动态组件：statefullWidget

静态组件：StatelessWidget

VSCode 快捷键

R 热加载

P 虚拟机中显示网格

O 切换安卓和IOS

Q 退出调试器

StatelessWidget

Scaffold / AppBar

class Home extends StatelessWidget {
  @override
  build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
        elevation: 0.0, //阴影
        leading: Icon(
          Icons.menu,
        ), //菜单左边
        actions: <Widget>[
          //菜单右边
          Icon(Icons.search),
        ],
      ),
      body: Homepage(),
      drawer: DrawerListDemo(),
    );
  }
}

Text / RichText

 body: Center(
            child: Text(
              '这是一段测试数据，很长的数据，需要隐藏显示不下的内容,就会隐藏',
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 15.0,
                color: Color.fromARGB(255, 255, 150, 150),
              ),
            ),
          )),
          
          
 class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
          text: '测试',
          style: TextStyle(color: Colors.blue, fontSize: 24.0),
          children: [
            TextSpan(
                text: 'RichText',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 30.0,
                  fontStyle: FontStyle.italic,
                )),
            TextSpan(
                text: '组件',
                style: TextStyle(
                  color: Colors.green,
                ))
          ]),
    );
  }
}         

Container / Colum / Row

class Homepage extends StatelessWidget {
  @override
  build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(10.0),
        padding: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          color: Colors.lightGreen[100],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [TestDemo(), ContainerDemo(), RowDemo()],
        ));
  }
}

Drawer / DrawerHeader

class DrawerListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
              decoration: BoxDecoration(color: Colors.lightBlue),
              child: Center(
                child: Text(
                  'Drawer Header',
                  style: TextStyle(fontSize: 24.0, color: Colors.white),
                ),
              )),
          ListTile(
            title: Text('My'),
            leading: Icon(Icons.supervised_user_circle),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
          ListTile(
            title: Text('Group'),
            leading: Icon(Icons.group),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
          ListTile(
            title: Text('Setting'),
            leading: Icon(Icons.settings),
            trailing: Icon(Icons.arrow_forward_ios),
          )
        ],
      ),
    );
  }
}

StatefulWidget

TextField/ElevatedButton

//引入默认样式
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, avoid_unnecessary_containers, non_constant_identifier_names

import 'package:flutter/material.dart';

class LoginInput extends StatefulWidget {
  const LoginInput({Key? key}) : super(key: key);

  @override
  _LoginInputState createState() => _LoginInputState();
}

class _LoginInputState extends State<LoginInput> {
  late String username;
  late String password;

  _login() {
    print('username: ' + username);
    print('password: ' + password);

    // 路由跳转
    // Navigator.push(context, MaterialPageRoute(builder: (context) => DemoTab()));
    Navigator.pushNamed(context, '/tab');
  }

  Widget userNameInput() {
    return TextField(
      keyboardType: TextInputType.number,
      maxLength: 11,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.phone_android),
        label: Text('手机号'),
        hintText: '请输入手机号',
      ),
      onChanged: (value) {
        username = value;
      },
    );
  }

  Widget passWordInput() {
    return TextField(
      keyboardType: TextInputType.text,
      obscureText: true,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.password),
        label: Text('密码'),
        hintText: '请输入密码',
      ),
      onChanged: (value) {
        password = value;
      },
    );
  }

  Widget LoginSubmitBtn() {
    return Container(
      height: 50.0,
      width: double.infinity,
      child: ElevatedButton(
        child: Text('登录'),
        onPressed: () {
          _login();
        },
        style: ButtonStyle(
            textStyle: MaterialStateProperty.all(TextStyle(fontSize: 18.0)),
            shape: MaterialStateProperty.all(BeveledRectangleBorder(
                borderRadius: BorderRadius.circular(0)))),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
        elevation: 0.0, //阴影
      ),
      body: Container(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: [
              userNameInput(),
              passWordInput(),
              SizedBox(height: 50.0),
              LoginSubmitBtn()
            ],
          )),
    );
  }
}

router

不带name的路由

// 路由跳转
// Navigator.push(context, MaterialPageRoute(builder: (context) => DemoTab()));


//返回上一页
Navigator.pop(context);

带name的路由

//定义路由 不能使用home:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter Demo',
      // home: LoginInput(),
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {
        '/': (context) => LoginInput(), 
        '/tab': (context) => DemoTab()},
    );
  }
}

//路由跳转
Navigator.pushNamed(context, '/tab');


//返回上一页
Navigator.pop(context);