scenebuilder各控件属性介绍_Flutter 全栈式——基础控件

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

  • 官方Widgets 介绍文档

  • 官方Widgets API文档

  • 中文 Widgets 介绍文档

控件简述
Text文本控件
Image图片控件
Icon图标控件
SelectableText可选文本控件
TextField文本输入框
MaterialButtonMaterial(安卓)风格按钮
RaisedButton凸起的按钮
FlatButton扁平的按钮
IconButton图标按钮
CupertinoButtonCupertino(iOS)风格按钮
OutlineButton线框按钮
Radio单选框
Checkbox多选框
Chip碎片控件
Slider滑块控件
CupertinoSlideriOS 风格滑块控件
Switch开关控件
CupertinoSwitchiOS 风格开关控件
Placeholder占位控件

Text

属性名类型简述
dataString需要显示的文本字符串
styleTextStyle文本显示的样式
textAlignTextAlign文本对齐方式
textDirectionTextDirection文本显示方向
softWrapbool是否自动换行
overflowTextOverflow溢出处理。clip:剪辑溢出的文本;fade:将溢出的文本淡化为透明;ellipsis:用省略号表示溢出;visible:在容器之外显示溢出的文本
textScaleFactordouble每个逻辑像素的字体像素值。简单说就是字体缩放系数
maxLinesint文本最多可显示的行数。如果文本超过给定的行数,则根据溢出规则截断
textSpanTextSpanTextSpan方式显示文本。需使用Text.rich构造方法创建

Image

构造方法

  • Image : 从ImageProvider中获取图片
  • Image.asset :加载资源目录中的图片
  • Image.network:加载网络图片
  • Image.file:加载本地图片文件
  • Image.memory:加载Uint8List资源图片
属性名类型简述
imageImageProvider用于自定义图片控件的情况
width/heightdouble设置Image控件自身的宽高
fitBoxFit图片的填充模式
colorColor图片颜色
colorBlendModeBlendMode对图片进行混合颜色处理,有多种值可选
alignmentAlignment设置图片的对齐位置
repeatImageRepeat设置图片的重复填充方式
centerSliceRect类似与Android中的点9处理,在图片上定义某个矩形区域用于拉伸,这9个点其实就是八个方向加上正中
gaplessPlaybackboolImageProvider发生变化时,显示新图片的过程中,如果值为true则保留旧图片直至显示出新图片为止;如果false,则不保留旧图片,直接空白等待下一张图片的加载
// 直接构造

BoxFit 填充模式

文档地址

取值简述
BoxFit.contain显示整张图片,按照原始比例缩放显示
BoxFit.fill显示整张图片,拉伸填充全部可显示区域
BoxFit.cover按照原始比例缩放,可能裁剪,填满可显示区域
BoxFit.fitHeight按照原始比例缩放,可能裁剪,高度优先填满
BoxFit.fitWidth按照原始比例缩放,可能裁剪宽度优先填满
BoxFit.none图片居中显示,不缩放原图
BoxFit.scaleDown显示整张图片,只能缩小或者原图显示

TextField

属性名类型简述
controllerTextEditingController输入框的控制器,通常用于获取输入的内容
focusNodeFocusNode用于输入框的焦点管理和监听
decorationInputDecoration输入框的装饰器,用于修改外观
keyboardTypeTextInputType设置输入类型,不同的输入类型键盘会不一样
textInputActionTextInputAction用于设置键盘动作(一般位于右下角,默认是完成)
textCapitalizationTextCapitalization配置平台键盘如何选择大写或小写键盘。
styleTextStyle文本样式
textAlignTextAlign文本位置
textDirectionTextDirection文本显示方向
autofocusbool是否自动获取焦点
obscureTextbool是否隐藏输入的文字,通常用于密码框
autocorrectbool是否自动校验
maxLinesint最大行数
maxLengthint输入的最大字符数
maxLengthEnforcedbool配合maxLength使用,达到最大长度时是否阻止输入
onChangedValueChanged输入文本发生变化时回调
onEditingCompleteVoidCallback点击键盘完成按钮时触发的回调,无参数
onSubmittedValueChanged点击完成按钮时触发的回调,该回调有参数,参数即为输入的值
inputFormattersList对输入文本的校验
cursorWidthdouble光标的宽度
cursorRadiusRadius光标的圆角
cursorColorColor光标的颜色
keyboardAppearanceBrightness键盘的外观,仅在iOS设备上支持
onTapGestureTapCallback点击输入框时的回调
enabledbool输入框是否可用
readOnlybool是否只读

装饰器 InputDecoration

属性名类型简述
iconWidget设置位于输入框前的图标
labelTextString设置描述输入框的标签
labelStyleTextStyle设置labelText的样式
helperTextString帮助文本,位于输入框下方,如果errorText为空则不会显示
helperStyleTextStyle设置helperText的样式
hintTextString提示文本,位于输入框内部
hintStyleTextStylehintText的样式
hintMaxLinesint提示文本最大行数
errorTextString错误文本信息提示
errorStyleTextStyleerrorText的样式
hasFloatingPlaceholderboollabelText是否浮动,默认为true
isDensebool输入框是否为密集型,默认为false,为true时,图标及间距会变小
contentPaddingEdgeInsetsGeometry内间距
isCollapsedbool是否装饰的大小与输入字段的大小相同。
prefixIconWidget位于输入框内部起始位置的图标
prefixWidget预先填充的Widget,跟prefixText只能同时出现一个
prefixTextString预填充的文本,例如手机号前面预先加上区号等
prefixStyleTextStyleprefixText的样式
suffixIconWidget位于输入框尾部的图标
suffixWidget位于输入框尾部的控件
suffixTextString位于尾部的填充文字
suffixStyleTextStylesuffixText的样式
counterWidget输入框右下方的计数小控件,不能和counterText同时使用
counterTextString右下方显示的文本,常用于显示输入的字符数量
counterStyleTextStylecounterText的样式
filledbool如果为true,则使用fillColor指定的颜色填充
fillColorColor输入框的背景颜色
errorBorderInputBordererrorText不为空,且输入框没有焦点时要显示的边框
focusedBorderInputBorder输入框有焦点时的边框,errorText必须为空
focusedErrorBorderInputBordererrorText不为空时,输入框有焦点时的边框
disabledBorderInputBorder输入框禁用时显示的边框,errorText必须为空
enabledBorderInputBorder输入框可用时显示的边框,errorText必须为空
borderInputBorder正常情况下的边框
enabledbool输入框是否可用

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中正则表达式

/// 黑名单校验 + 长度限制

Button

Button的通用属性

属性名类型简述
onPressedVoidCallback点击事件监听
onLongPressVoidCallback长按事件监听
onHighlightChangedValueChanged水波纹高亮变化回调,按下返回true,抬起返回false
textThemeButtonTextTheme定义按钮主题
textColorColor按钮文字颜色
disabledTextColorColor禁用按钮时文字颜色
colorColor按钮颜色
disabledColorColor禁用按钮时颜色
focusColorColor获取焦点时按钮颜色
splashColorColor水波纹效果的初始化颜色
hoverColorColor当指针悬停在按钮上时的填充颜色
highlightColorColor水波纹的高亮颜色
elevationdouble阴影高度
hoverElevationdouble指针悬停在按钮上时的阴影
focusElevationdouble获取焦点时的阴影
highlightElevationdouble高亮时的阴影
disabledElevationdouble禁用时的阴影
colorBrightnessBrightness用于此按钮的主题亮度
childWidget子控件
enabledbool是否禁用按钮
paddingEdgeInsetsGeometry内边距
shapeShapeBorder设置形状
clipBehaviorClip剪裁
focusNodeFocusNode用于焦点管理和监听
autofocusbool是否自动获取焦点
animationDurationDuration设置按钮形状和阴影变化的持续时间
materialTapTargetSizeMaterialTapTargetSize配置点击目标的最小大小
minWidthdouble按钮最小宽度
heightdouble按钮高度
enableFeedbackbool是否开启按钮触觉反馈
    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动态类型该组单选按钮当前选定的值
onChangedValueChanged状态变化回调
activeColorColor选中时的颜色
materialTapTargetSizeMaterialTapTargetSize配置点击目标的最小大小。
focusNodeFocusNode用于焦点管理和监听
autofocusbool是否自动获得焦点
    Row(
      children: [
        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

属性名类型简述
valuebool是否选中此复选框
onChangedValueChanged该组单选按钮当前选定的值
tristatebool默认false,如果为true,复选框的值可以为true、false或null
activeColorColor选中时的颜色
checkColorColor选中时复选框图标的颜色
materialTapTargetSizeMaterialTapTargetSize配置点击目标的最小大小
focusNodeFocusNode用于焦点管理和监听
autofocusbool是否自动获得焦点
    Row(
      children: [
        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

属性名类型简述
avatarWidget在碎片标签之前显示的小控件
labelWidget碎片的标签
labelStyleTextStyle标签文字样式
labelPaddingEdgeInsetsGeometry标签文字内间距
shapeShapeBorder形状
clipBehaviorClip裁剪。 默认Clip.none(不裁剪)
backgroundColorColor背景颜色
paddingEdgeInsetsGeometry内间距
deleteIconWidget添加图标按钮, 必须与onDeleted 配合使用
onDeletedVoidCallback图标按钮监听
deleteIconColorColordeleteIcon的颜色
deleteButtonTooltipMessageStringdeleteIcon长按文字提示
materialTapTargetSizeMaterialTapTargetSize配置点击目标的最小大小
elevationdouble阴影高度
shadowColorColor阴影颜色
    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

属性名类型简述
valuedouble当前值  默认 0 -- 1 之间
onChangedValueChanged滑动过程中调用
onChangeStartValueChanged开始滑动时调用
onChangeEndValueChanged滑动完成时调用
mindouble最小值  默认 0
maxdouble最大值  默认 1
divisionsint分段个数
labelString滑动时 显示的文字  (必须与divisions配合使用)
activeColorColor用于滑块轨道的活动部分的颜色
inactiveColorColor滑块轨道的非活动部分的颜色

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

属性名类型简述
valuebool当前开关状态
onChangedValueChanged开关状态变化回调
activeColorColor打开状态的颜色
activeTrackColorColor打开状态时轨道上的颜色。
inactiveThumbColorColor关闭状态按钮的颜色
inactiveTrackColorColor关闭状态轨道颜色
activeThumbImageImageProvider打开状态下按钮图片
inactiveThumbImageImageProvider关闭状态下按钮图片
materialTapTargetSizeMaterialTapTargetSize配置点击目标的最小大小
dragStartBehaviorDragStartBehavior确定处理拖动启动行为的方式
focusNodeFocusNode用于焦点管理和监听
autofocusbool是否自动获得焦点

CupertinoSwitch 的属性较少

属性名类型简述
valuebool当前开关状态
onChangedValueChanged开关状态变化回调
activeColorColor打开状态的颜色
    Switch(
      activeColor:Colors.red,
      activeTrackColor:Colors.yellow,
      inactiveThumbColor:Colors.pink[200],
      inactiveTrackColor:Colors.black,
      value: this.valuea,
      onChanged: (v) {
        setState(() {
          this.valuea = v;
        });
      },
    ),

本文视频课程

148e98108b35a11f98244731124517a8.png

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值