Flutter 全栈式——基础控件

arcticfox

修改于 2020-06-13 14:47:36

3.7K0

修改于 2020-06-13 14:47:36

在Flutter中，UI小控件有两种设计风格，一种是Material设计，这是安卓的官方设计风格，另一种则是Cupertino风格，是iOS的官方设计风格。因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。

官方Widgets 介绍文档
官方Widgets API文档
中文 Widgets 介绍文档

文本控件

Text

属性名	类型	简述
data	String	需要显示的文本字符串
style	TextStyle	文本显示的样式
textAlign	TextAlign	文本对齐方式
textDirection	TextDirection	文本显示方向
softWrap	bool	是否自动换行
overflow	TextOverflow	溢出处理。clip：剪辑溢出的文本；fade：将溢出的文本淡化为透明；ellipsis：用省略号表示溢出；visible：在容器之外显示溢出的文本
textScaleFactor	double	每个逻辑像素的字体像素值。简单说就是字体缩放系数
maxLines	int	文本最多可显示的行数。如果文本超过给定的行数，则根据溢出规则截断
textSpan	TextSpan	以TextSpan方式显示文本。需使用Text.rich构造方法创建

Image

构造方法

Image : 从ImageProvider中获取图片
Image.asset ：加载资源目录中的图片
Image.network：加载网络图片
Image.file：加载本地图片文件
Image.memory：加载Uint8List资源图片

属性名	类型	简述
image	ImageProvider	用于自定义图片控件的情况
width/height	double	设置Image控件自身的宽高
fit	BoxFit	图片的填充模式
color	Color	图片颜色
colorBlendMode	BlendMode	对图片进行混合颜色处理，有多种值可选
alignment	Alignment	设置图片的对齐位置
repeat	ImageRepeat	设置图片的重复填充方式
centerSlice	Rect	类似与Android中的点9处理，在图片上定义某个矩形区域用于拉伸，这9个点其实就是八个方向加上正中
gaplessPlayback	bool	当ImageProvider发生变化时，显示新图片的过程中，如果值为true则保留旧图片直至显示出新图片为止；如果false，则不保留旧图片，直接空白等待下一张图片的加载

// 直接构造
Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)
    
// 调用相应的命名构造方法
Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

BoxFit 填充模式

文档地址

显示整张图片，按照原始比例缩放显示

TextField

属性名	类型	简述
controller	TextEditingController	输入框的控制器，通常用于获取输入的内容
focusNode	FocusNode	用于输入框的焦点管理和监听
decoration	InputDecoration	输入框的装饰器，用于修改外观
keyboardType	TextInputType	设置输入类型，不同的输入类型键盘会不一样
textInputAction	TextInputAction	用于设置键盘动作（一般位于右下角，默认是完成）
textCapitalization	TextCapitalization	配置平台键盘如何选择大写或小写键盘。
style	TextStyle	文本样式
textAlign	TextAlign	文本位置
textDirection	TextDirection	文本显示方向
autofocus	bool	是否自动获取焦点
obscureText	bool	是否隐藏输入的文字，通常用于密码框
autocorrect	bool	是否自动校验
maxLines	int	最大行数
maxLength	int	输入的最大字符数
maxLengthEnforced	bool	配合maxLength使用，达到最大长度时是否阻止输入
onChanged	ValueChanged<String>	输入文本发生变化时回调
onEditingComplete	VoidCallback	点击键盘完成按钮时触发的回调，无参数
onSubmitted	ValueChanged<String>	点击完成按钮时触发的回调，该回调有参数，参数即为输入的值
inputFormatters	List<TextInputFormatter>	对输入文本的校验
cursorWidth	double	光标的宽度
cursorRadius	Radius	光标的圆角
cursorColor	Color	光标的颜色
keyboardAppearance	Brightness	键盘的外观，仅在iOS设备上支持
onTap	GestureTapCallback	点击输入框时的回调
enabled	bool	输入框是否可用
readOnly	bool	是否只读

装饰器 InputDecoration

属性名	类型	简述
icon	Widget	设置位于输入框前的图标
labelText	String	设置描述输入框的标签
labelStyle	TextStyle	设置labelText的样式
helperText	String	帮助文本，位于输入框下方，如果errorText为空则不会显示
helperStyle	TextStyle	设置helperText的样式
hintText	String	提示文本，位于输入框内部
hintStyle	TextStyle	hintText的样式
hintMaxLines	int	提示文本最大行数
errorText	String	错误文本信息提示
errorStyle	TextStyle	errorText的样式
hasFloatingPlaceholder	bool	labelText是否浮动，默认为true
isDense	bool	输入框是否为密集型，默认为false，为true时，图标及间距会变小
contentPadding	EdgeInsetsGeometry	内间距
isCollapsed	bool	是否装饰的大小与输入字段的大小相同。
prefixIcon	Widget	位于输入框内部起始位置的图标
prefix	Widget	预先填充的Widget，跟prefixText只能同时出现一个
prefixText	String	预填充的文本，例如手机号前面预先加上区号等
prefixStyle	TextStyle	prefixText的样式
suffixIcon	Widget	位于输入框尾部的图标
suffix	Widget	位于输入框尾部的控件
suffixText	String	位于尾部的填充文字
suffixStyle	TextStyle	suffixText的样式
counter	Widget	输入框右下方的计数小控件，不能和counterText同时使用
counterText	String	右下方显示的文本，常用于显示输入的字符数量
counterStyle	TextStyle	counterText的样式
filled	bool	如果为true，则使用fillColor指定的颜色填充
fillColor	Color	输入框的背景颜色
errorBorder	InputBorder	errorText不为空，且输入框没有焦点时要显示的边框
focusedBorder	InputBorder	输入框有焦点时的边框，errorText必须为空
focusedErrorBorder	InputBorder	errorText不为空时，输入框有焦点时的边框
disabledBorder	InputBorder	输入框禁用时显示的边框，errorText必须为空
enabledBorder	InputBorder	输入框可用时显示的边框，errorText必须为空
border	InputBorder	正常情况下的边框
enabled	bool	输入框是否可用

border的三种值

InputBorder.none 没有边框
OutlineInputBorder 线框
UnderlineInputBorder 底边线，默认的

TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30), // 圆角
          ),
          borderSide: BorderSide(
            color: Colors.amber, //线框颜色为黄色
            width: 2,            //线框宽度为2
          ),
        ),

        labelText: "labelText",
        helperText: "helperText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
      ),
    );

小技巧

当输入框的默认线框无法满足时，可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线

输入校验 TextInputFormatter

inputFormatters属性需要我们提供一个TextInputFormatter 类型的列表，该类有三个子类提供我们使用

WhitelistingTextInputFormatter 白名单校验，只允许输入符合规则的字符
BlacklistingTextInputFormatter 黑名单校验，除了限定的字符其他的都可以输入
LengthLimitingTextInputFormatter 长度限制，与maxLength作用类似

前两个在实际使用时，其实是使用的Dart中正则表达式

/// 黑名单校验 + 长度限制
inputFormatters: [
        BlacklistingTextInputFormatter(RegExp("[a-z]")),
        LengthLimitingTextInputFormatter(11)
      ],

/// 白名单校验
inputFormatters: [BlacklistingTextInputFormatter(RegExp("[0-9]"))],

Button

Button的通用属性

属性名	类型	简述
onPressed	VoidCallback	点击事件监听
onLongPress	VoidCallback	长按事件监听
onHighlightChanged	ValueChanged<bool>	水波纹高亮变化回调,按下返回true,抬起返回false
textTheme	ButtonTextTheme	定义按钮主题
textColor	Color	按钮文字颜色
disabledTextColor	Color	禁用按钮时文字颜色
color	Color	按钮颜色
disabledColor	Color	禁用按钮时颜色
focusColor	Color	获取焦点时按钮颜色
splashColor	Color	水波纹效果的初始化颜色
hoverColor	Color	当指针悬停在按钮上时的填充颜色
highlightColor	Color	水波纹的高亮颜色
elevation	double	阴影高度
hoverElevation	double	指针悬停在按钮上时的阴影
focusElevation	double	获取焦点时的阴影
highlightElevation	double	高亮时的阴影
disabledElevation	double	禁用时的阴影
colorBrightness	Brightness	用于此按钮的主题亮度
child	Widget	子控件
enabled	bool	是否禁用按钮
padding	EdgeInsetsGeometry	内边距
shape	ShapeBorder	设置形状
clipBehavior	Clip	剪裁
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获取焦点
animationDuration	Duration	设置按钮形状和阴影变化的持续时间
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
minWidth	double	按钮最小宽度
height	double	按钮高度
enableFeedback	bool	是否开启按钮触觉反馈

    RaisedButton(
      child: Text('凸起按钮'),
      onPressed: (){},
      color: Colors.blue[200],
      splashColor:Colors.yellow[100],
    ),

    FlatButton(
      child: Text('扁平按钮'),
      onPressed: (){},
      color: Colors.blue[200],
    ),

    OutlineButton(
      child: Text('线框按钮'),
      onPressed: (){},
      textColor: Colors.red,
      borderSide: BorderSide(color: Colors.red,),
    ),

Radio 与 Checkbox

Radio

属性名	类型	简述
value	动态类型	此单选按钮表示的值
groupValue	动态类型	该组单选按钮当前选定的值
onChanged	ValueChanged<T>	状态变化回调
activeColor	Color	选中时的颜色
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小。
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获得焦点

    Row(
      children: <Widget>[
        Radio(
          value: 1,
          activeColor: Colors.pink,
          groupValue: this._sex,
          onChanged: (value) {
            setState(() {
              this._sex = value;
            });
          },
        ),
        Text('男'),
        Radio(
          value: 2,
          activeColor: Colors.pink,
          groupValue: this._sex,
          onChanged: (value) {
            setState(() {
              this._sex = value;
            });
          },
        ),
        Text('女'),
      ],
    ),

Checkbox

属性名	类型	简述
value	bool	是否选中此复选框
onChanged	ValueChanged<bool>	该组单选按钮当前选定的值
tristate	bool	默认false，如果为true，复选框的值可以为true、false或null
activeColor	Color	选中时的颜色
checkColor	Color	选中时复选框图标的颜色
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获得焦点

    Row(
      children: <Widget>[
        Checkbox(
          activeColor: Colors.pink,
          checkColor: Colors.blue,
          value: this._flag1,
          onChanged: (value) {
            setState(() {
              this._flag1 = value;
            });
          },
        ),
        Checkbox(
          activeColor: Colors.pink,
          checkColor: Colors.blue,
          value: this._flag2,
          onChanged: (value) {
            setState(() {
              this._flag2 = value;
            });
          },
        ),
      ],
    )

Chip

属性名	类型	简述
avatar	Widget	在碎片标签之前显示的小控件
label	Widget	碎片的标签
labelStyle	TextStyle	标签文字样式
labelPadding	EdgeInsetsGeometry	标签文字内间距
shape	ShapeBorder	形状
clipBehavior	Clip	裁剪。默认Clip.none（不裁剪）
backgroundColor	Color	背景颜色
padding	EdgeInsetsGeometry	内间距
deleteIcon	Widget	添加图标按钮，必须与onDeleted 配合使用
onDeleted	VoidCallback	图标按钮监听
deleteIconColor	Color	deleteIcon的颜色
deleteButtonTooltipMessage	String	deleteIcon长按文字提示
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
elevation	double	阴影高度
shadowColor	Color	阴影颜色

    Chip(
      avatar: Icon(Icons.add_alert),
      label: Text('我是一个标签'),
      deleteIcon: Icon(Icons.close),
      deleteIconColor:Colors.red,
      deleteButtonTooltipMessage:'点你妹',
      labelStyle: TextStyle(color: Colors.white),
      backgroundColor: Colors.blue,
      elevation:20,
      shadowColor:Colors.grey,
      onDeleted: (){
        print('onTap');
      },
    ),

Slider 与 CupertinoSlider

Slider

属性名	类型	简述
value	double	当前值默认 0 -- 1 之间
onChanged	ValueChanged<double>	滑动过程中调用
onChangeStart	ValueChanged<double>	开始滑动时调用
onChangeEnd	ValueChanged<double>	滑动完成时调用
min	double	最小值默认 0
max	double	最大值默认 1
divisions	int	分段个数
label	String	滑动时显示的文字（必须与divisions配合使用）
activeColor	Color	用于滑块轨道的活动部分的颜色
inactiveColor	Color	滑块轨道的非活动部分的颜色

CupertinoSlider 控件属性与Slider 基本相同。

    Slider(
        label:'current ${valuec.round()}',
        max: 100,
        min: 0,
        divisions: 5,
        activeColor:Colors.blue,
        inactiveColor: Colors.yellow,

        value:this.valuec,
        onChanged: (double v) {
          setState(() {
            this.valuec = v;
          });
        },
        onChangeStart: (startValue) {
          print('Started at $startValue');
        },
        onChangeEnd: (newValue) {
          print('Ended on $newValue');
        },
    ),

Switch 和 CupertinoSwitch

Switch

属性名	类型	简述
value	bool	当前开关状态
onChanged	ValueChanged<bool>	开关状态变化回调
activeColor	Color	打开状态的颜色
activeTrackColor	Color	打开状态时轨道上的颜色。
inactiveThumbColor	Color	关闭状态按钮的颜色
inactiveTrackColor	Color	关闭状态轨道颜色
activeThumbImage	ImageProvider	打开状态下按钮图片
inactiveThumbImage	ImageProvider	关闭状态下按钮图片
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
dragStartBehavior	DragStartBehavior	确定处理拖动启动行为的方式
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获得焦点

CupertinoSwitch 的属性较少

属性名	类型	简述
value	bool	当前开关状态
onChanged	ValueChanged<bool>	开关状态变化回调
activeColor	Color	打开状态的颜色

    Switch(
      activeColor:Colors.red,
      activeTrackColor:Colors.yellow,
      inactiveThumbColor:Colors.pink[200],
      inactiveTrackColor:Colors.black,
      value: this.valuea,
      onChanged: (v) {
        setState(() {
          this.valuea = v;
        });
      },
    ),