Flutter学习总结（十三、Flutter基本组件第三部分)

Flutter基本组件第三部分

一起从0开始学习Flutter!

上一篇我们一起学习了TabBar，TabBarView，Image，接下来一起来学习Button，TextField和Card。

1.Button

在Flutter中的Button从大的风格上来划分，可以划分为MaterialButton(Google推荐的风格)和CupertinoButton(IOS推荐风格)，这篇主要是介绍MaterialButton，CupertinoButton是比较简单的，可以直接参照它的构造进行了解。
MaterialButton是RaisedButton，FlatButton的父类，还有很多种类的Button，例如：DropdownButton，FloatingActionButton，IconButton，OutlineButton，我们一个个来介绍它们。
首先我们可以先了解下MaterialButton：

MaterialButton

我们先看下它的构造方法，发现它有着很多的参数：

const MaterialButton({
    Key key,
    @required this.onPressed,//按钮的点击事件被触发调用此方法
    this.onLongPress,//按钮长按事件被触发调用此方法
    this.onHighlightChanged,//高亮状态的变化通知，会返回是否高亮的bool值，一般在按下会返回True，松开会返回False
    this.textTheme,//参照下面详解
    this.textColor,//设置的文字的颜色
    this.disabledTextColor,//当文字不可用时文字的颜色
    this.color,//设置的按钮的颜色
    this.disabledColor,//按钮不可用的时候的颜色
    this.focusColor,//按钮获取焦点时的颜色
    this.hoverColor,//是在H5的时候鼠标悬停的颜色
    this.highlightColor,//按下高亮时的颜色
    this.splashColor,//水波纹效果的颜色
    this.colorBrightness,//关于主题的亮度，Brightness.dark深色，Brightness.light浅色的
    this.elevation,//阴影的长度
    this.focusElevation,//获取焦点时阴影的长度
    this.hoverElevation,//H5的鼠标悬浮焦点时阴影的长度
    this.highlightElevation,//高亮时的阴影高度
    this.disabledElevation,//禁用时的阴影高度
    this.padding,//内部填充空白大小
    this.shape,//设定的形状,例如我们要创建一个圆形的按钮：shape: CircleBorder()
    this.clipBehavior = Clip.none,//参照下面详解，
    this.focusNode,//焦点的关联组件
    this.autofocus = false,//是否自动获取焦点
    this.materialTapTargetSize,//配置最小尺寸，参照前面的FloatingActionButton的配置
    this.animationDuration,//如果形状和阴影发生变化的时候的持续时间
    this.minWidth,//按钮的最小宽度
    this.height,//按钮的高度
    this.enableFeedback = true,//是否提供辅助功能
    this.child,//可以在按钮中的子控件，我们可以添加文字或者图片作为按钮的样式
  }) 

textTheme
根据主题里的颜色设置文字颜色，默认值是ButtonTextTheme.normal。
ButtonTextTheme.normal 是黑色或者白色，根据ThemeData.brightness的设置不同有变化。
ButtonTextTheme.accent 文字的颜色同ThemeData.accentColor的设置一样。
ButtonTextTheme.primary 文字的颜色同ThemeData.primaryColor的设置一样。
可以看到上面的按钮设置中虽然属性众多但是都是一些比较好理解的一些简单属性，所以不再多加赘述了。只需要根据需要进行设定就可以了。
clipBehavior
Clip.none 不进行设置
Clip.hardEdge 裁剪速度快，但容易失真，会有锯齿。
Clip.antiAliasWithSaveLayer 裁剪后具有抗锯齿特性并分配屏幕缓冲区，所有后续操作在缓冲区进行，然后再进行裁剪和合成，很少使用。
Clip.antiAlias 裁剪边缘抗锯齿，裁剪更平滑，裁剪速度比 Clip.antiAliasWithSaveLayer 快，但是比 Clip.hardEdge 慢，常用于圆形和弧形之类的形状裁剪。

RaisedButton

因为它是MaterialButton的子类，只是样式略有区别，有了默认的样式，所以不再多加赘述它的区别。

FlatButton

扁平化的按钮，也是基于MaterialButton的子类，用法与MaterialButton一致。

DropdownButton

DropdownButton({
    Key key,
    @required this.items,//参照下面的详解
    this.selectedItemBuilder,//参照下面的详解
    this.value,//在items定义的value值中的一条，如果没有符合的则会报错
    this.hint,//提示文字
    this.disabledHint,//按钮被禁用时的提示文字
    @required this.onChanged,//参照下面的详解
    this.elevation = 8,//下方阴影的高度
    this.style,//设置显示的文字样式
    this.underline,//可以自己设置DropDownButton中的下划线样式
    this.icon,//右边的下拉箭头可以通过icon参数进行替换
    this.iconDisabledColor,//当button被禁用了的时候icon的颜色
    this.iconEnabledColor,//当button可以使用的时候icon的颜色
    this.iconSize = 24.0,//icon的大小
    this.isDense = false,//是否减少高度，如果是True则button里的文字和下划线之间没有间隙，False则有间隙
    this.isExpanded = false,//是否要从当前位置开始横向填充满控件，True则会一直填充到父容器右边
    this.itemHeight = kMinInteractiveDimension,//每一条目的高度，默认值为48
    this.focusColor,//获取焦点后的颜色
    this.focusNode,//焦点绑定
    this.autofocus = false,//自动获取焦点
  }) 

items
需要传入DropdownMenuItem的集合，我们先看下DropdownMenuItem能为我们做什么。

const DropdownMenuItem({
    Key key,
    this.value,//我们给这个条目定义的Value值
    @required Widget child,//每个条目里添加的控件
  })

如果我们要做一个简单的控件，则可以使用下面的方式来创建一个DropdownMenuItem的集合：

items: <String>['One', 'Two', 'Free', 'Four']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),

我们在以前的控件中也使用过map函数来帮忙我们快速的创建一组控件，这里也是通过map函数来帮我们来快速创建了每一个DropdownMenuItem。
selectedItemBuilder
这里返回的是选中后DropdownButton的显示样式，如果我们想要换一种样式我们可以自定义每一个条目选中后的按钮状态。例如：

selectedItemBuilder: (BuildContext context) {
                  return items.map<Widget>((String item) {
                    return Text(item);
                  }).toList();
                }

onChanged
在下拉框出现后进行选择完后的回调，会返回我们传入的value的值，可以根据这里返回的值来刷新DropdownButton显示的item内容。例如：

 onChanged: (String newValue) {
                  setState(() {
                    dropdownValue = newValue;
                  });
                },

IconButton

带有图片的button，基本用法与其他的Button差不多，我们只看下它不同的地方。

const IconButton({
    Key key,
    this.iconSize = 24.0,//图片按钮的尺寸
    @required this.icon,//传入进来的按钮图片
    @required this.onPressed,//点击事件的触发，如果没有传入该方法则认为该按钮不可用
    this.color,//只有在按钮可用的时候才会生效，也就是onPressed必须有值传入
    ...
  })

OutlineButton

一个自带边框的按钮，其他的属性和普通的button差不多，我们只看它的差异部分。

const OutlineButton({
    Key key,
    this.borderSide,//参照下面的详细解释
    this.disabledBorderColor,//当按钮不可用的时候的颜色
    this.highlightedBorderColor,//按钮按下时的边框颜色
    ...
  })

borderSide
用来设置边框的颜色以及粗细，我们需要传入BorderSide的对象

const BorderSide({
    this.color = const Color(0xFF000000),//边框的颜色
    this.width = 1.0,//边框的粗细程度
    this.style = BorderStyle.solid,//边框的样式
  })

2.TextField

用户输入框，属性比较多，我们来先看看他们都代表什么：

const TextField({
    Key key,
    this.controller,//参照下面的详解
    this.focusNode,//关联的光标下一个组件
    this.decoration = const InputDecoration(),//文本框的装饰器，默认提供一个带有下划线的样式，我们可以修改颜色，添加icon或者其他
    TextInputType keyboardType,//参照下面的详解
    this.textInputAction,//参照下面的详解
    this.textCapitalization = TextCapitalization.none,//设置大小写键盘
    this.style,//设置文字的样式
    this.strutStyle,//设置一个统一的文本样式
    this.textAlign = TextAlign.start,//文字对齐方式
    this.textAlignVertical,//文字竖直方向的显示方式，靠顶部，底部，居中
    this.textDirection,//文字的显示方向
    this.readOnly = false,//是否可以进行编辑，True就是只读文字，不可更改
    ToolbarOptions toolbarOptions, //参照下面的详解
    this.showCursor,//是否显示编辑的光标
    this.autofocus = false,//自动获取焦点
    this.obscureText = false,//是否隐藏显示内容，密码格式可以设置为True
    this.autocorrect = true,//是否开启自动纠正功能
    this.enableSuggestions = true,//是否开启输入推荐
    this.maxLines = 1,//最大输入行数
    this.minLines,//最小输入行数
    this.expands = false,//不理解意思
    this.maxLength,//允许输入的最长字符长度
    this.maxLengthEnforced = true,//是否允许可以输入的字符数超过最大长度
    this.onChanged,//文字变化的时候的回调
    this.onEditingComplete,//提交内容时候的回调，一般是点击回车按钮的时候回调
    this.onSubmitted,//在提交时候回调，不可与onEditingComplete同时使用,区别于onEditingComplete的是回调带有参数。
    this.inputFormatters,//输入的内容的格式验证，可以传入多组格式
    this.enabled,//是否启用该输入框
    this.cursorWidth = 2.0,//闪烁的光标的宽度
    this.cursorRadius,//光标的圆角弧度
    this.cursorColor,//输入光标的颜色
    this.keyboardAppearance,//键盘的亮度
    this.scrollPadding = const EdgeInsets.all(20.0),//滚动时的内边距,实际测试没有发现有用
    this.dragStartBehavior = DragStartBehavior.start,//拖拽行为的开始点,实际测试没有发现有用
    this.enableInteractiveSelection = true,//长按的时候是否显示复制，剪切，粘贴这些功能
    this.onTap,//在点击的时候的回调
    this.buildCounter,//如果我们设置了maxlength，则可以通过它来在右下角显示字数
    this.scrollController,//设置内容滚动的监听
    this.scrollPhysics,//
  }) 

controller
文本框内容变化需要回调，通过Controller来抓取监听，Controller里添加addListener来获取内容的变化，例如：

controller.addListener((){
       print("text is ${controller.text}");//获取文本输入框内容
    });

keyboardType
选择弹出的输入框的类型。
text 普通的文本输入类型
multiline 跟普通键盘一样，只是允许输入多行，也就是左下角的确认按钮会变成回车按钮。
number 数字键盘
phone 拨号键盘，带有"*“和 “#”.
datetime 在安卓手机上显示数字键盘加上”:“和”-"，ios上显示默认键盘
emailAddress 已经加上"@" 和".“的普通键盘
url 已经加上”/" 和"."的普通键盘
visiblePassword 普通键盘

textInputAction
这里控制最后回车按钮的触发事件，比如回车和发送按钮。
none 默认状态，回车符号
unspecified 安卓显示 回车符号
done 完成按钮
go 显示GO按钮
search 显示搜索按钮
send 显示发送按钮
next 显示下一步按钮
previous iOS显示一个左转箭头，安卓显示回车符号
continueAction android 不支持
join 显示join按钮
route 显示Route按钮
emergencyCall android 不支持
newline 回车按钮
toolbarOptions
设置长按文字后出现的工具选择框都有哪些功能，需要传入ToolbarOptions实体。

const ToolbarOptions({
    this.copy = false,//是否显示复制按钮
    this.cut = false,//是否显示剪切按钮，如果设置不可编辑则不显示
    this.paste = false,//是否显示粘贴按钮，如果设置不可编辑则不显示
    this.selectAll = false,//是否显示选择全部按钮
  })

3.Card

卡片控件，可以设置显示的阴影效果，只能传入单一控件。我们先看下他需要的参数：

const Card({
    Key key,
    this.color, //卡片的颜色
    this.elevation, //设置阴影的大小
    this.shape, //参照下面的详细说明
    this.borderOnForeground = true, //从文档上来看是shape的边是否要遮挡child，默认是遮挡的。实际没有看出来效果
    this.margin, //设置外边距
    this.clipBehavior, //参照Button 的clipBehavior属性说明
    this.child, //需要填充到里面的子控件
    this.semanticContainer = true,//判断是否是语义容器，作为系统的辅助功能的时候使用。
  }) 

shape
控制card的形状，如果我们想要一个带圆角的Card需要下面这样设置：

shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))),

今天我们又学习了这几个组件，主要是Button的部分比较多，按钮的样式比较复杂，还需要多加练习查看运行后的结果。

接下来我们还需要学习其他的新的组件