Flutter Widget

一、Widget分类

Widget的分类有很多类别，每个类别下面又包含很多Widget，主要包括以下几种类别：

• Basics：在构建第一个Flutter应用程序之前，需要知道的Basics Widget。
• Material Components：Material Design风格的Widget。
• Cupertino：iOS风格的Widget。
• Accessibility：辅助功能Widget。
• Animation and Motion：动画和动作Widget。
• Async：Flutter应用程序的异步Widget。
• Input：除了在Material Components和Cupertino中的输入Widget外，还可以接受用户输入的Widget。
• Interaction Models：响应触摸事件并将用户路由到不同的视图中。
• Layout：用于布局的Widget。
• Painting and effects：不改变布局、大小、位置的情况下为子Widget应用视觉效果。
• Scrolling：滚动相关的Widget。
• Styling：主题、填充相关Widget。
• Text：显示文本和文本样式。

二、widget的状态

widget的状态分别是无状态的StatelessWidget、有状态的StatefulWidget。StatefulWidget可以通过配合State的方式来保存状态。

State生命周期：

• initState。create之后被insert到渲染树时调用的，只会调用一次
• didChangeDependencies。state依赖的对象发生变化时调用
• didUpdateWidget。Widget状态改变时候调用，可能会调用多次
• build。构建Widget时调用
• deactivate。当移除渲染树的时调用
• dispose。Widget即将销毁时调用

三、根widget

根widget的种类有以下几种：

• WidgetsApp： 如果需要自定义风格，可以使用WidgetsApp。
• MaterialApp：Material Design风格的Widget。
• CupertinoApp iOS风格的根Widget。
  一般使用MD风格的MaterialApp就行了

四、Basics

Basics主要有以下几种：

• Container：一个便利的容器Widget，可以设置Widget的背景、尺寸、定位。
• Row：在水平方向上布置子窗口Widget列表。
• Column：在垂直方向上布置子窗口Widge列表。
• Image：显示图像的Widget
• Text：单一样式的文本。
• Icon：符合Material Design设计规范的图标
• RaisedButton：符合Material Design设计规范的凸起按钮。
• Scaffold：实现Basics 的Material Design布局结构。
• Appbar：Material Design的应用栏。
• FlutterLogo：以Widget形式来展示一个Flutter图标，可以调整样式。
• Placeholder：绘制一个框，为将来添加的Widget的占位。

4.1 模板和主题

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//MD风格的widget
      title: 'Welcome to Flutter',
      home: Scaffold(//布局结构
        appBar: AppBar(//应用栏
          title: Text('应用栏标题'),
        ),
        body:
          Padding(
            padding: EdgeInsets.all(40.0),
            child:  Text('此处就是Basics Widget'),
          ),
      ),
    );
  }
}

4.2 Text文本

	child:  Text(
              '文本Text',
          style: TextStyle(
            fontSize: 16.0,//大小
            color: Colors.indigo,//颜色
            fontStyle: FontStyle.normal,//风格
            fontWeight: FontWeight.bold//加粗
          ),
          )

4.3 图片

Image的构造：

• new Image：从ImageProvider获取图片
• new Image.asset：使用key从AssetBundle获取图片
• new Image.network：加载网络图片
• new Image.file：从文件中获取图片
• new Image.memory：用于从Uint8List获取图片

image的属性主要有fit，表示图片的填充模式，参数类型为BoxFit：

• 1.contain。全图显示，保持原比例。
• 2.cover。全图充满，可能拉伸也可能被裁剪
• 3.fill。全图显示，通过拉伸来充满目标框
• 4.fitHeight。图片高度充满目标框，可能拉伸也可能被裁剪
• 5.fitWidth。图片宽度充满目标框，可能拉伸也可能被裁剪
• 6.none。保持图片的原始大小，剪裁掉位于目标框外的图片部分
• 7.scaleDown。与contain缩小图像的方式相同，只不过会在必要时缩小以确保图片完全在目标框内，如果不缩小等同于none。

		child: Image.network(
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1877247387,402758218&fm=26&gp=0.jpg",
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          )

运行结果：

4.4 凸起按钮

凸起按钮符合MD 设计风格，可以通过onPressed来回调按钮的点击。

child: RaisedButton(
          onPressed: ()=>print("onPressed"),
          color: Colors.lightBlueAccent,
          child: Text('RaisedButton',style: TextStyle(fontSize: 10)),
        )

运行结果：

4.5 其他widget

Basics Widget中的还有Row、Column、Container等Widget

4.5.1 Row

Row用于在水平方向显示数组中的子元素Widget。

child: Row(
          children: <Widget>[
            Icon(Icons.access_alarm),
            Icon(Icons.add_a_photo),
            Icon(Icons.add_call)
          ],
        )

运行结果：
垂直方向：

child: Column(
          children: <Widget>[
            Icon(Icons.access_alarm),
            Icon(Icons.add_a_photo),
            Icon(Icons.add_call)
          ],
        )

需要注意的是，可以使用Expanded来配合Row和Column使用，用来填充剩余的空间：

	child: Row(
          children: <Widget>[
            Icon(Icons.access_alarm),
            Icon(Icons.add_a_photo),
            Icon(Icons.add_call),
            Expanded(
              child: FittedBox(
                fit: BoxFit.contain,
                child: const FlutterLogo(),
              ),
              flex: 2,
            ),
            Expanded(
              child: Text(
                "占三分之一",
              ),
              flex: 1,
            )
          ],
        )

主要还是靠Expanded配合flex来控制占比：

4.5.2 container

类似于ViewGroup，可以设置Widget的背景、尺寸、定位

	child: Container(
          decoration: BoxDecoration(
            color: Colors.lightGreen
          ),
          child: Text('这是Container'),
          padding: EdgeInsets.all(36.0),
          margin: EdgeInsets.all(10.0),
        )