Flutter：基础Widget摘要

说明：
控件类Widget(无子Widget，类似Android的View)

1.文本显示(类似TextView)：

(1)Text实现文本显示：

Text("要显示的内容",
  textAlign: TextAlign.left,      //文字对齐方式，left左对齐、right右对齐、center居中对齐
  maxLines: 行数,                 //最大行数
  overflow: TextOverflow.ellipsis,//(默认自动换行)文字超限以...结尾
  textScaleFactor: 倍数,          //(以系统字号为基准)字体放大或缩小倍数，>1.0放大、<1.0缩小
  style: TextStyle( //文本样式
    color: 颜色,                  //文字颜色
    fontSize: 字号,               //字体大小，不会随系统字号改变而改变
    height: 倍数,                 //缩放倍数，行高 = fontSize x height
    fontFamily: "字体名",         //设置字体
    background: Paint()..color=颜色,  //背景颜色
  )
)

(2)TextSpan实现一段文本不同样式：

Text.rich(TextSpan( //一段文本
    children: [ //给各部分文本单独设置样式
     TextSpan(
       text: "文本A"
       style: TextStyle(...),    //样式A
     ),
     TextSpan(
       text: "文本B",
       style: TextStyle(...),    //样式B
     ),
     ...  //省略
    ]
))

(3)DefaultTextStyle为子Text设置默认样式：

DefaultTextStyle(
  style: TextStyle(...),    //1.设置所有子Text默认样式
  child: Column(
    children: <Widget>[
      Text("文本A"),        //2.继承默认样式
      Text("文本B",
        style: TextStyle(
            inherit: false, //2.不继承默认样式
            ... //省略样式
        ),
      ),
    ],
  ),
)

(4)使用自定义字体：

<1>pubspec.yaml中声明自定义字体：

flutter:
  fonts:
    - family: 自定义字体1
      fonts:
        - asset: assets/fonts/字体文件名1.ttf  #字体路径名
    ...

<2>使用自定义字体：

Text("...",
  style: TextStyle(
    fontFamily: "自定义字体1", //使用自定义字体
  ),
)

2.按钮(类似Button)：

TextButton(//无背景的按钮
//icon: Icon(图标),       //带图标的按钮
//label: Text("文本"),    //按钮显示文本
  child: Text("文本"),
  onPressed: () {... //点击事件}
)
ElevatedButton( //带阴影和灰色背景的按钮
  child: Text("文本"),
  onPressed: () {... //点击事件}
)
OutlineButton( //带边框，点击变色的按钮
  child: Text("文本"),
  onPressed: () {... //点击事件}
)
IconButton( //纯图标按钮，点击出现背景的按钮
  icon: Icon(图标资源),
  onPressed: () {... //点击事件}
)

3.文本输入框TextField：

//文本改变回调事件监听
MyController myController =  MyController();
...
//在生命周期方法里监听
@override
void initState() {
  myController.addListener((){
    ...
  });
}
...
TextField(
  autofocus: true,  //true自动获取输入焦点
  decoration: InputDecoration(
    labelText: "标题",              //输入框顶侧标题
    hintText: "提示文本",           //类似android:hint
    prefixIcon: Icon(图标),         //输入框左侧图标
    border: InputBorder.none        //隐藏下划线
  )
  enable: true,                     //false时禁止输入
  maxLines: 1,                      //(默认1)最大行数，null无限制
  keyboardType: TextInputType.text, //键盘类型，text为文本输入键盘、number为数字键盘、phone为电话号码键盘等
  textInputAction: TextInputAction.search, //键盘回车图标，此处为搜索图标
//controller: myController,         //文本改变回调事件
  onChanged: (v) {                  //文本改变回调事件
    ...  
  }
  ...
)

4.Image显示图片：

(1)Image显示本地图片：

<1>pubspec.yaml中配置图片路径：

assets:
  - images/图片名.png    //images为自已创建的目录，在工程根目录下

<2>加载本地图片并显示：

Image(
  image: AssetImage("images/图片名.png"),   //加载本地图片
  fit: contain,//缩放模式，none按图片原本大小显示、fill为拉伸铺满、contain为等比缩放、fitWidth为按宽度等比缩放(高度超时被裁剪)、fitHeight为按高度等比缩放(宽度超时被裁剪)
  repeat: ImageRepeat.noRepeat, //重复方式，noRepeat不重复、repeatY按Y轴重复平铺、repeatX按X轴重复平铺
  width: 宽度,
  height: 高度
);

或

Image.asset("images/图片名.png",   //加载本地图片
  width: 宽度,
  height: 高度
)

(2)Image显示网络图片：

Image(
  image: NetworkImage("图片url"),    //加载网络图片，下载后会缓存在本地
  width: 宽度,
  height: 高度
)

或

Image.network(
  "图片url",    //加载网络图片
  width: 宽度,
  height: 高度
)

5.Icon显示字体图标(矢量图标)：

(1)显示系统字体图标：

<1>配置使用MD字体图标，在pubspec.yaml中：

flutter:
  uses-material-design: true  #使用Material Design字体图标

<2>使用字体图标：

Icon(Icons.字体图标名, color: 图标颜色值);

(2)显示自定义字体图标：

<1>配置自定义字体图标路径，在pubspec.yaml中：

fonts:
  - family: 自定义字体名
    fonts:
      - asset: fonts/自定义字体.ttf  #fonts为自已创建的目录，工程根目录下

<2>使用自定义字体图标：

class Icons1{ //自定义Icons类
  static const IconData iconData1 = const IconData(
      Unicode代码点,    //图标存储在图标字体中的Unicode代码点
      fontFamily: '自定义字体名', 
      matchTextDirection: true
  );
}
//使用自定义字体图标
Icon(Icons1.iconData1, color: 图标颜色值);

6.单选开关Switch：

Switch(
  value: 是否选中状态,
  onChanged:(value){  //value为操作单选按钮后的新状态
    ...
  },
)

7.多选框Checkbox：

Checkbox(
  value: 是否选中状态,
  activeColor: 选中时的颜色,
  onChanged:(value){  //value为操作多选按钮后的新状态
    ...
  } 
)

8.进度条：

(1)长条型进度条：

LinearProgressIndicator(//设置进度条宽高需要外套一层SizedBox等
  backgroundColor: 背景色,
  valueColor: AlwaysStoppedAnimation(进度条颜色),   //渐变色进度条使用ColorTween(begin: 开始颜色, end: 结束颜色)替换进度条颜色
  value: 0,  //0-1进度值，此字段省略时，进度条会重复执行自左往右动画
)

(2)圆形进度条：

CircularProgressIndicator(//设置进度条宽高需要外套一层SizedBox等
  backgroundColor: 背景色,
  valueColor: AlwaysStoppedAnimation(进度条颜色),
  value: 0,  //0-1进度值，此字段省略时，进度条会重复执行旋转动画
  strokeWidth: 进度条粗细度
)

9.Form+TextFormField实现表单控件：

GlobalKey formKey = GlobalKey<FormState>();  //在自定义State类中定义全局key
...
Form(
  key: formKey, //定义为全局Key，提交表单时获取取FormState
  autovalidateMode: AutovalidateMode.onUserInteraction,
  child: Column(
    children: <Widget>[
      TextFormField(  //表单子项必须为TextFormField
        autofocus: true,
        decoration: InputDecoration( //输入框
          hintText: "输入表单文本", //类似android:hint
        ),
        validator: (v) { // 校验方法
          ... //校验输入框的值
        },
      ),
      ElevatedButton( //带阴影和灰色背景的按钮
          child: Text("提交"),
          onPressed: () { //提交方法
            if ((formKey.currentState as FormState).validate()) { //表单输入验证通过后提交数据
               ... //提交数据
            }
          }
      )
    ]
  )
)