一、Widget

在flutter中大部分类都是继承于widget，widget的作用就是描述一个UI的配置数据。可以这样说，flutter就是一个个widget以树形结构构建的UI。

widget分为statefulWidget和statelessWidget。statelessWidget不需要维护状态的变化，而statefulWidget需要维护状态的变化。选择的标准：是否需要重绘制widget。重点看下statefulWidget。

statefulWidget.png

• 从上面的代码可以看出，一个statefulWidget类会对应有一个State类
• state可以在build的时候同步被读取
• state可以在生命周期期间被改变，当state改变的时候，会调用setState()方法通知Flutter Framework去改变，当Flutter Framework接受到消息之后，会重新buildUI树，从而达到更新UI的作用

二、state生命周期

1. void initState( ) { } // 初始化状态，只执行一次
2. void didChangeDependencies( ) { } // 当widget依赖的对象发生变化时调用，例如全局的主题或者语言等
3. void didUpdateWidget( covariant T oldWidget ) { } // 当widget重新构建的时候调用，根据canUpdate方法判断
4. void build( ) { } // 构建UI
5. void reassemble( ) { } // 调试模式下，热重载执行，release模式下不会执行
6. void deactivate( ) { } // 当widget被移除的时候调用

7. void dispose( ) { } // 当widget永久一处的时候调用，可以作为释放资源

   
   
   state图解.png

三、基础的控件Widget

flutter除了提供一套基础的widget，还提供了一套Material风格（android风格）和Cupertino风格（iOS风格）,官网：https://api.flutter.dev/flutter/material/material-library.html

1、Text

Tip:显示文本，有些样式属性和android的textView类似，例如对齐、大小、颜色等

• 使用方法

Text(‘这是一个文本信息’)

• 属性介绍

2、按钮

Tip：Material库提供了很多按钮，例如ElevatedButton、TextButton、OutlinedButton等，这些都是直接或者间接对ButtonStyleButton
的包装定制，所以大多数属性和ButtonStyleButton一样。另外所有的MaterialButton都有两个共同特征：1、按下时会有水波动画 2、都有一个onPress回调方法，若不提供回调方法，则按钮时禁止状态，不响应用户点击

button.png

• 使用方法

      ElevatedButton(
            onPressed: () {},
            child: Text('ElevatedButton'),
       )
      OutlinedButton(
            onPressed: () {},
            child: Text('OutlinedButton'),
       )
      TextButton(
            onPressed: () {},
            child: Text('TextButton'),
       )

• 属性说明
  Button的样式根据它的属性style通过MaterialStateProperty设置，MaterialStateProperty具有以下属性

3、图片

Tip：使用Image来加载并显示图片，Image的数据源可以是asset、文件、内存或者网络。ImageProvider是一个抽象类，主要定义了图片数据获取的接口load( )，从不同的数据源中获取数据。如AssetImage可以加载本地图片资源，NetworkImage可以加载网络图片。

• 加载本地图片

Image(image: AssetImage(‘assets/images/cat.webp’)) //注意此处是图片相对路径
Image.asset(‘assets/images/cat.webp’)

• 加载网络图片

Image(image: NetworkImage(‘https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg’))
Image.network(‘https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg’)

• 系统图标

Icon(Icons.ac_unit)

• Image其他属性

4、输入框

• 使用方法

TextField(
          maxLength: 11,
          decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                /*边角*/
                borderRadius: BorderRadius.all(
                  Radius.circular(30), //边角为30
                ),
                borderSide: BorderSide(
                  color: Colors.amber, //边线颜色为黄色
                  width: 2, //边线宽度为2
                ),
              ),
              isDense: true,
              icon: Icon(Icons.ten_k),
              labelText: '手机号',
              hintText: '请输入手机号',
              helperText: '请输入数字',
              prefixIcon: Icon(Icons.phone),
              suffixIcon: Icon(Icons.remove_red_eye)),
          inputFormatters: <TextInputFormatter>[
            FilteringTextInputFormatter.digitsOnly
          ],
        )

textField.png

• 属性介绍

End：代码之技在于练