Flutter（三）基础组件

1.文本及样式

Text("Hello world",
  textAlign: TextAlign.left,
);

属性

const Text(
this.data, { //data就是展示的文字，必传字段，其他的都是可选
    Key key,    //widget的标识
    this.style,  //文本样式，类型是TextStyle
    this.strutStyle, //使用的支柱风格，类型是StrutStyle
    this.textAlign, //文本的对齐方式，类型是TextAlign
    this.textDirection, // 文字方向，类型是TextDirection
    this.locale, //选择用户语言和格式的标识符，类型是Locale
    this.softWrap, //bool 类型 ，false标识文本只有一行，水平方向无限
    this.overflow, //文本的阶段方式，类型是TextOverflow
    this.textScaleFactor,//double类型 表示文本相对于当前字体的缩放因子，默认为1.0
    this.maxLines,// int 类型，显示的最大行数
    this.semanticsLabel, //String 类型，给文本加上一个语义标签，没有实际用处
    this.textWidthBasis,//一行或多行文本宽度的不同方式，类型是TextWidthBasis

TextStyle

const TextStyle({ 
    this.inherit = true, //是否继承父Text的样式，默认为true
    this.color,  //文字的颜色 类型为Color
    this.backgroundColor,  //背景颜色 类型为Color
    this.fontSize, //double 类型，文字的大小 
    this.fontWeight, //字体粗细，类型是FontWeight
    this.fontStyle, //是否在字体中倾斜字形，类型为FontStyle
    this.letterSpacing, // double类型，字母之间的间隔 
    this.wordSpacing, //double类型，单词之间的间隔
    this.textBaseline, //用于对齐文本的水平线，类型是 TextBaseline
    this.height, //double类型，文本的高度，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
    this.locale, //选择用户语言和格式的标识符，类型是Locale
    this.foreground,//文本的前景色，类型是Paint
    this.background,//文本的背景色    ，类型是Paint
    this.shadows,//在文本下方绘制阴影，类型是List< ui.Shadow>
    this.fontFeatures,//字体选择字形的列表，类型List     
    this.decoration,//文本的线条，类型是TextDecoration   
    this.decorationColor,//TextDecoration 线条的颜色，类型是Color
    this.decorationStyle,//TextDecoration 线条的样式，类型是TextDecorationStyle
    this.decorationThickness,//double类型，默认为1.0，表示使用字体的基本画笔厚度宽度
    this.debugLabel,//String 类型，文本样式的描述无实际用处
    String fontFamily,//String类型，用于设置使用哪种自定义字体
    List<String> fontFamilyFallback,//String 类型，字体列表，当前面的字体找不到时，会在这个列表里依次查找
    String package,//String 类型，用于设置使用哪种自定义字体

2.按钮

//带背景和阴影的按钮
ElevatedButton(
  child: Text("normal"),
  onPressed: () {},
);
//默认背景透明
TextButton(
  child: Text("normal"),
  onPressed: () {},
)
//带边框的按钮
OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)
//图标按钮
IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

ElevatedButton、TextButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带文字+图标的按钮。

3.图片

从asset中加载图片

1.在工程根目录下创建一个images目录并在pubspec.yaml中配置图片

assets:
    - images/avatar.png

2.加载图片

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);
//或者
Image.asset("images/avatar.png",
  width: 100.0,
)

从网络加载图片

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)
//或者
Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

参数
const Image({
…
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
…
})

使用iconfont

在Flutter开发中，iconfont和图片相比有如下优势：

体积小：可以减小安装包大小。
矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过TextSpan和文本混用

1.在pubspec.yaml文件中的配置

flutter:
  uses-material-design: true

Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";

Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 24.0,
    color: Colors.green,
  ),
);

这种方式需要我们提供每个图标的码点，这并对开发者不友好，所以，Flutter封装了IconData和Icon来专门显示字体图标

所以上面可以这么写

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
  //Icons类中包含了所有Material Design图标的IconData静态变量定义
    Icon(Icons.accessible,color: Colors.green),
    Icon(Icons.error,color: Colors.green),
    Icon(Icons.fingerprint,color: Colors.green),
  ],
)

iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式
1.导入字体图标文件

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

2.定义icon类

class MyIcons{
  // book 图标
  static const IconData book = const IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

3.使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)

4.单选开关和复选框

单选开关Switch和复选框Checkbox

它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的

当Switch或Checkbox被点击时，会触发它们的onChanged回调

输入框及表单

TextField用于文本输入
Widget 之 TextField

const TextField({
    Key key,//Widget的标识
    this.controller,//控制TextField的编辑，不设置会有默认值，类型是TextEditingController
    this.focusNode,//用于控制TextField是否有当前键盘的输入焦点，类型是FocusNode
    this.decoration = const InputDecoration(),//用于控制TextField的外观显示，如颜色，边框等，类型是InputDecoration
    TextInputType keyboardType,//用于设置该输入框默认的键盘输入类型，类型是TextInputType
    this.textInputAction,//键盘动作按钮图标(即回车键位图标)，类型是TextInputAction
    this.textCapitalization = TextCapitalization.none,//定义文本的大写格式，类型是TextCapitalization
    this.style,//文本样式，类型是TextStyle
    this.strutStyle,//使用的支柱风格，类型是StrutStyle
    this.textAlign = TextAlign.start,//文本的对齐方式，类型是TextAlign
    this.textAlignVertical,//垂直对齐，类型是TextAlignVertical
    this.textDirection,//文字方向，类型TextDirection
    this.readOnly = false,//bool类型，文本是不是不能编辑
    this.showCursor,//bool类型，是否显示光标
    this.autofocus = false,//类型是bool,是否自动获取焦点
    this.obscureText = false,//类型是bool，是否隐藏正在编辑的文本，用于密文等，文本内容会用“•”替换，默认为false
    this.autocorrect = true,//类型是bool，是否自动更正
    this.maxLines = 1,//类型是int，显示的最大行数
    this.minLines,//类型是int，最小展示行数
    this.expands = false,//bool 类型，是否可扩展
    this.maxLength,//类型是int，输入框中允许的最大字数
    /**
    *  类型是bool，是否强制限制最大字符数，默认为true
    *  true：强制限制最大字符数
    *  false：不限制最大字符数，即使设置了maxLength也不生效
    **/
    this.maxLengthEnforced = true,
    this.onChanged,//输入框内容改变时的回调函数，类型是ValueChanged
    this.onEditingComplete,//输入框输入完成时触发，但是onEditingComplete没有参数，不会返回内容，类型是VoidCallback
    this.onSubmitted,//输入框输入完成时触发，但是onSubmitted有参数，会返回内容，类型是ValueChanged
    this.inputFormatters,//用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。类型是List< TextInputFormatter>
    /**
    *  类型是bool，输入框是否禁用，如果为false，则输入框会被禁用
    *    ，禁用状态不接收输入和事件，同时* *   显示禁用态样式（在其    
    *   decoration中定义）。
      **/
    this.enabled,
    this.cursorWidth = 2.0,//类型是double，自定义输入框光标宽度
    this.cursorRadius,//自定义输入框光标圆角，类型是Radius
    this.cursorColor,//自定义光标颜色，类型是Color
    this.keyboardAppearance,//设置键盘的外观模式，只能在iOS上使用，类型是Brightness
    this.scrollPadding = const EdgeInsets.all(20.0),//文本框滑动时的间距，类型是EdgeInsets
    this.dragStartBehavior = DragStartBehavior.start,//设置设置决定了用户何时正式启动拖动，类型是DragStartBehavior
    this.enableInteractiveSelection,//类型是bool 是否启用交互式选择，true：长按将会选中文字，并且弹出 cut/copy/paste 的菜单
    this.onTap,//TextField的点击事件，类型是GestureTapCallback
    this.buildCounter,//生成自定义 InputDecorator.counter 小部件的回调，类型是InputCounterWidgetBuilder
    this.scrollController,//类型是ScrollController，滚动监听器
    this.scrollPhysics,//类型是 ScrollPhysics，确定滚动的物理属性
  }) : assert(textAlign != null),
       assert(readOnly != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(dragStartBehavior != null),
       assert(maxLines == null || maxLines > 0),
       assert(minLines == null || minLines > 0),
       assert(
         (maxLines == null) || (minLines == null) || (maxLines >= minLines),
         'minLines can\'t be greater than maxLines',
       ),
       assert(expands != null),
       assert(
         !expands || (maxLines == null && minLines == null),
         'minLines and maxLines must be null when expands is true.',
       ),
       assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       super(key: key);

const InputDecoration({
    this.icon,//图片，类型是Widget
    this.labelText,//String 类型，描述输入字段的文本
    this.labelStyle,//lableText样式，类型是TextStyle
    this.helperText,//String 提供有关输入的提示文本，比如改如何使用
    this.helperStyle,//helperText的样式，类型是TextStyle
    this.hintText,//String类型，指示字段接受何种类型的输入
    this.hintStyle,//hintText的样式，类型是TextStyle
    this.hintMaxLines,//int 类型，[hintText]所能占用的最大行数。
    this.errorText,//String类型，出现在输入边框下方的错误提示文本。
    this.errorStyle,//errorText的样式，类型是TextStyle
    this.errorMaxLines,//int 类型，errorMaxLines所能占用的最大行数。
    this.hasFloatingPlaceholder = true,//bool类型，标签是否在焦点上浮动
    this.isDense,//bool 类型，输入是否为密集形式(即使用较少的垂直空间)。
    this.contentPadding,//输入内容的那边距，类型是EdgeInsetsGeometry
    this.prefixIcon,//出现在前缀或装饰器文本字段的可编辑部分之前的图标，类型为Widget
    this.prefix,//可选小部件放置在输入之前的行上，类型为Widget
    this.prefixText,//String 类型可选文本前缀，放在输入之前的行上
    this.prefixStyle,//prefixText的样式，类型为TextStyle
    this.suffixIcon,//出现在文本可编辑部分后，或者装饰容中文本的后缀上，类型是Widget
    this.suffix,//可选小部件，可放置在输入后的行上。类型是Widget
    this.suffixText,//String类型，可选文本后缀，放在输入后的行上。
    this.suffixStyle,//suffixText的样式，类型为TextStyle
    this.counter,//可选的自定义计数器小部件，类型是Widget
    this.counterText,//String类型，可选文本放在行下作为字符计数。
    this.counterStyle,//counterText的样式，类型TextStyle
    this.filled,//bool类型，装饰的容器将填满
    this.fillColor,//填充颜色，类型是 Color
    this.focusColor,//与[fillColor]混合并填充装饰容器的颜色，类型是 Color
    this.hoverColor,//如果容器被鼠标悬停在上面，则显示用于装饰的焦点突出显示的颜色。类型是 Color
    this.errorBorder,//当[InputDecorator]没有焦点并且显示错误时要显示的边框。类型 InputBorder
    this.focusedBorder,//当[InputDecorator]有焦点且没有显示错误时要显示的边框。类型 InputBorder
    this.focusedErrorBorder,//当[InputDecorator]具有焦点并显示错误时要显示的边框。类型 InputBorder
    this.disabledBorder,//当[InputDecorator]被禁用并且没有显示错误时显示的边框。类型 InputBorder
    this.enabledBorder,//启用[InputDecorator]时要显示的边框，并且没有显示错误。类型 InputBorder
    this.border,//边框的形状，以画出周围装饰的容器。类型 InputBorder
    this.enabled = true,//bool 类型，如果为false， [helperText]、[errorText]和[counterText]则不展示，其余可视元素的不透明度减少。
    this.semanticCounterText,//String类型，对应文本的语义标签。
    this.alignLabelWithHint,//bool 类型，当[InputDecorator]包含多行时，通常设置为true
  }) : assert(enabled != null),
       assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not supported.'),
       assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not supported.'),
       isCollapsed = false;

焦点可以通过FocusNode和FocusScopeNode来控制，默认情况下，焦点由FocusScope来管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取Widget树中默认的FocusScopeNode

监听焦点状态改变事件

// 创建 focusNode   
FocusNode focusNode = FocusNode();
...
// focusNode绑定输入框   
TextField(focusNode: focusNode);
...
// 监听焦点变化    
focusNode.addListener((){
   print(focusNode.hasFocus);
});

表单Form

Form

Flutter提供了一个Form 组件，它可以对输入框进行分组，然后进行一些统一操作，如输入内容校验、输入框重置以及输入内容保存。

Form({
  required Widget child,
  bool autovalidate = false,
  WillPopCallback onWillPop,
  VoidCallback onChanged,
})

autovalidate：是否自动校验输入内容；当为true时，每一个子 FormField 内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验。

onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果 Future 的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。

onChanged：Form的任意一个子FormField内容发生变化时会触发此回调

FormField

const FormField({
  ...
  FormFieldSetter<T> onSaved, //保存回调
  FormFieldValidator<T>  validator, //验证回调
  T initialValue, //初始值
  bool autovalidate = false, //是否自动校验。
})

为了方便使用，Flutter 提供了一个TextFormField组件，它继承自FormField类

FormState

FormState为Form的State类，可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的子孙FormField进行统一操作

FormState.validate()：调用此方法后，会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。

FormState.save()：调用此方法后，会调用Form子孙FormField的save回调，用于保存表单内容

FormState.reset()：调用此方法后，会将子孙FormField的内容清空

示例：
用户名不能为空，如果为空则提示“用户名不能为空”。
密码不能小于 6 位，如果小于 6 为则提示“密码不能少于 6 位”。

import 'package:flutter/material.dart';

class FormTestRoute extends StatefulWidget {
  @override
  _FormTestRouteState createState() => _FormTestRouteState();
}

class _FormTestRouteState extends State<FormTestRoute> {
  TextEditingController _unameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();
  GlobalKey _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey, //设置globalKey，用于后面获取FormState
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column(
        children: <Widget>[
          TextFormField(
            autofocus: true,
            controller: _unameController,
            decoration: InputDecoration(
              labelText: "用户名",
              hintText: "用户名或邮箱",
              icon: Icon(Icons.person),
            ),
            // 校验用户名
            validator: (v) {
              return v!.trim().isNotEmpty ? null : "用户名不能为空";
            },
          ),
          TextFormField(
            controller: _pwdController,
            decoration: InputDecoration(
              labelText: "密码",
              hintText: "您的登录密码",
              icon: Icon(Icons.lock),
            ),
            obscureText: true,
            //校验密码
            validator: (v) {
              return v!.trim().length > 5 ? null : "密码不能少于6位";
            },
          ),
          // 登录按钮
          Padding(
            padding: const EdgeInsets.only(top: 28.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: ElevatedButton(
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Text("登录"),
                    ),
                    onPressed: () {
                      // 通过_formKey.currentState 获取FormState后，
                      // 调用validate()方法校验用户名密码是否合法，校验
                      // 通过后再提交数据。
                      if ((_formKey.currentState as FormState).validate()) {
                        //验证通过提交数据
                      }
                    },
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

进度指示器

Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator，都有精确的进度指示和模糊的进度指示

LinearProgressIndicator

LinearProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  ...
})

value：value表示当前的进度，取值范围为[0,1]；如果value为null时则指示器会执行一个循环动画（模糊进度）；当value不为null时，指示器为一个具体进度的进度条。

backgroundColor：指示器的背景色。

valueColor: 指示器的进度条颜色；该值类型是Animation，允许我们对进度条的颜色也可以指定动画。如果我们不需要对进度条颜色执行动画，对进度条应用一种固定的颜色，可以通过AlwaysStoppedAnimation来指定。

// 模糊进度条(会执行一个动画)
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

CircularProgressIndicator

参数含义同LinearProgressIndicator

CircularProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  //圆形进度条的粗细
  this.strokeWidth = 4.0,
  ...   
}) 

// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%，会显示一个半圆
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

自定义尺寸

LinearProgressIndicator和CircularProgressIndicator，并没有进度条尺寸的参数，但都是取父容器的尺寸作为绘制的边界，所以可以使用尺寸限制类Widget，如ConstrainedBox、SizedBox 来指定尺寸

// 线性进度条高度指定为3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圆形进度条直径指定为100
//如果CircularProgressIndicator显示空间的宽高不同，则会显示为椭圆
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

//可以通过valueColor对进度条颜色做动画
LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                .animate(_animationController), // 从灰色变成蓝色
              value: _animationController.value,
            )

flutter_spinkit 包提供了多种风格的模糊进度指示器

更多：
Flutter 学习 - Widget 之 Text
Flutter 学习 - Widget 之 TextField
Material Design所有图标可以在其官网查看：https://material.io/tools/icons/