找人做网站协议,网站 设计 工具,网站开发与维护相关课程,绵阳房产网在Flutter中#xff0c;UI小控件有两种设计风格#xff0c;一种是Material设计#xff0c;这是安卓的官方设计风格#xff0c;另一种则是Cupertino风格#xff0c;是iOS的官方设计风格。因此#xff0c;当遇到带有这两个单词开头的控件时#xff0c;我们应该明确他们表达… 在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文本最多可显示的行数。如果文本超过给定的行数则根据溢出规则截断textSpanTextSpan以TextSpan方式显示文本。需使用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个点其实就是八个方向加上正中gaplessPlaybackbool当ImageProvider发生变化时显示新图片的过程中如果值为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是否浮动默认为trueisDensebool输入框是否为密集型默认为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)表示禁用装饰线输入校验 TextInputFormatterinputFormatters属性需要我们提供一个TextInputFormatter 类型的列表该类有三个子类提供我们使用WhitelistingTextInputFormatter 白名单校验只允许输入符合规则的字符BlacklistingTextInputFormatter 黑名单校验除了限定的字符其他的都可以输入LengthLimitingTextInputFormatter 长度限制与maxLength作用类似前两个在实际使用时其实是使用的Dart中正则表达式/// 黑名单校验 长度限制Button Button的通用属性属性名类型简述onPressedVoidCallback点击事件监听onLongPressVoidCallback长按事件监听onHighlightChangedValueChanged水波纹高亮变化回调,按下返回true,抬起返回falsetextThemeButtonTextTheme定义按钮主题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或nullactiveColorColor选中时的颜色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最小值 默认 0maxdouble最大值 默认 1divisionsint分段个数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; }); }, ),本文视频课程
