Flutter常用组件构造参数说明

bennyskydp

已于 2022-09-28 11:12:04 修改

阅读量876

点赞数

分类专栏： Flutter 文章标签： flutter

于 2022-07-25 11:07:30 首次发布

本文链接：https://blog.csdn.net/dslnf/article/details/125692873

版权

Flutter 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Checkbox 复选框

const Checkbox({
  Key? key,
  required this.value,// 是否被选中
  this.tristate = false,//复选框value是否可以为null
  required this.onChanged,// 选中回调
  this.mouseCursor,// 鼠标指针状态
  this.activeColor,// 选中颜色
  this.fillColor,// 不同状态颜色设置
  this.checkColor,// 对勾颜色
  this.focusColor,// 获取焦点颜色
  this.hoverColor,// 指针悬停颜色
  this.overlayColor,// 按压覆盖颜色
  this.splashRadius,// 按压覆盖半径
  this.materialTapTargetSize,//最小大小
  this.visualDensity,// 组件紧凑程度
  this.focusNode,
  this.autofocus = false,
  this.shape,// 自定义选项框样式
  this.side,// 自定义选项框边框样式
})

Radio 单选框

const Radio<T>({
  Key? key,
  required this.value,//单选按钮的值
  required this.groupValue,//当前选中的值
  required this.onChanged,//选中这个按钮的回调
  this.mouseCursor,// 鼠标悬停状态
  this.toggleable = false,//点击已选中按钮是否调用onChanged回调
  this.activeColor,// 选项按钮颜色
  this.fillColor,//设置单选框不同状态的的颜色
  this.focusColor,// 获取焦点颜色
  this.hoverColor,//指针悬停颜色
  this.overlayColor,//按压覆盖颜色
  this.splashRadius,//按压覆盖颜色的半径
  this.materialTapTargetSize,//组件最小大小
  this.visualDensity,//组件的紧凑程度
  this.focusNode,//焦点
  this.autofocus = false,//是否自动获取焦点
})

开关 Switch

const Switch({
  Key? key,
  required this.value,//当前开关状态
  required this.onChanged,// 改变状态回调
  this.activeColor,// 开启全部颜色
  this.activeTrackColor,// 开启轨道的颜色
  this.inactiveThumbColor,//关闭滑块颜色
  this.inactiveTrackColor,// 关闭轨道颜色
  this.activeThumbImage,// 开启滑块图片
  this.onActiveThumbImageError,// 开启滑块图片加载失败触发
  this.inactiveThumbImage,// 关闭滑块图片
  this.onInactiveThumbImageError,// 关闭滑块图片加载失败触发
  this.thumbColor,// 可以通过不同状态设置滑块颜色
  this.trackColor,// 可以通过不同状态设置轨道颜色
  this.materialTapTargetSize,//设置组件的最小大小
  this.dragStartBehavior = DragStartBehavior.start,// 处理手势拖拽行为
  this.mouseCursor,//设置鼠标停留状态 app用不到
  this.focusColor,// 获取焦点颜色
  this.hoverColor,//指针悬停颜色 
  this.overlayColor,// 设置按压滑动覆盖上面的颜色
  this.splashRadius,// 设置点击滑动覆盖圆环的半径
  this.focusNode,//焦点控制
  this.autofocus = false,// 是否自动获取焦点
  })

ListView

ListView({
  Axis scrollDirection = Axis.vertical, // 列表的滚动方向，可选值：Axis的horizontal、vertical
  ScrollController controller, // 控制器，与列表滚动相关，比如监听列表的滚动事件
  ScrollPhysics physics, // 列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不同：Android = 波纹状（ClampingScrollPhysics），而iOS = 回弹的弹性效果（BouncingScrollPhysics）。若想不同的平台上呈现各自的效果可使用AlwaysScrollableScrollPhysics，它会根据不同平台自动选用各自的物理效果。若想禁用在边缘的拖动效果，可使用NeverScrollableScrollPhysics
  bool shrinkWrap = false, // 决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时，shrinkWrap必须为true，否则Flutter会给出警告；
  EdgeInsetsGeometry padding, // 列表内边距
  this.itemExtent, // 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能（因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置）；
  double cacheExtent, // 预渲染区域长度，ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域（对于ListView.build或ListView.separated构造函数创建的列表，不在可视区域和预渲染区域内的子元素不会被创建或会被销毁）；
  List<Widget> children = const <Widget>[], // 容纳子元素的组件数组
})

TabBar

const TabBar({
    Key key,
    @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个
    this.controller,
    this.isScrollable = false,//是否需要滚动，true为需要
    this.indicatorColor,//选中下划线的颜色
    this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,//用于设定选中状态下的展示样式
    this.indicatorSize,//选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
    this.labelColor,//设置选中时的字体颜色，tabs里面的字体样式优先级最高
    this.labelStyle,//设置选中时的字体样式，tabs里面的字体样式优先级最高
    this.labelPadding,
    this.unselectedLabelColor,//设置未选中时的字体颜色，tabs里面的字体样式优先级最高
    this.unselectedLabelStyle,//设置未选中时的字体样式，tabs里面的字体样式优先级最高
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,//点击事件
  })

Wrap

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0, //主轴方向子widget的间距
  this.runAlignment = WrapAlignment.start, //纵轴方向的对齐方式
  this.runSpacing = 0.0, //纵轴方向的间距
  this.crossAxisAlignment = WrapCrossAlignment.start,//主轴方向的对齐方式
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})

表单 TextField+InputDecoration（原文链接）

const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦点
this.decoration = const InputDecoration(),//装饰
TextInputType keyboardType,//键盘类型，即输入类型
this.textInputAction,//键盘按钮
this.textCapitalization = TextCapitalization.none,//大小写
this.style,//样式
this.strutStyle,
this.textAlign = TextAlign.start,//对齐方式
this.textDirection,
this.autofocus = false,//自动聚焦
this.obscureText = false,//是否隐藏文本，即显示密码类型
this.autocorrect = true,//自动更正
this.maxLines = 1,//最多行数，高度与行数同步
this.minLines,//最小行数
this.expands = false,
this.maxLength,//最多输入数，有值后右下角就会有一个计数器
this.maxLengthEnforced = true,
this.onChanged,//输入改变回调
this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
this.onSubmitted,//提交时,配合TextInputAction
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,
this.onTap,//点击事件
this.buildCounter,
this.scrollPhysics,
})

InputDecoration

const InputDecoration({
this.icon,                  // 装饰器外小图标
this.labelText,             // 文本框描述标签
this.labelStyle,            // 文本框描述标签样式
this.helperText,            // 文本框辅助标签
this.helperStyle,           // 文本框辅助标签样式
this.hintText,              // 文本框默认提示信息
this.hintStyle,             // 文本框默认提示信息样式
this.hintMaxLines,          // 文本框默认提示信息最大行数
this.errorText,             // 文本框错误提示信息
this.errorStyle,            // 文本框错误提示信息样式
this.errorMaxLines,         // 文本框错误提示信息最大行数
this.hasFloatingPlaceholder = true,     // 文本框获取焦点后 labelText 是否向上浮动
this.isDense,               // 是否问紧凑型文本框
this.contentPadding,        // 文本内边距
this.prefixIcon,            // 前置图标
this.prefix,                // 前置预填充 Widget
this.prefixText,            // 前置预填充文本
this.prefixStyle,           // 前置预填充样式
this.suffixIcon,            // 后置图标
this.suffix,                // 后置预填充 Widget
this.suffixText,            // 后置预填充文本
this.suffixStyle,           // 后置预填充样式
this.counter,               // 输入框右下角 Widget
this.counterText,           // 输入框右下角文本
this.counterStyle,          // 输入框右下角样式
this.filled,                // 是否颜色填充文本框
this.fillColor,             // 填充颜色
this.errorBorder,           // errorText 存在时未获取焦点边框
this.focusedBorder,         // 获取焦点时边框
this.focusedErrorBorder,    // errorText 存在时获取焦点边框
this.disabledBorder,        // 不可用时边框
this.enabledBorder,         // 可用时边框
this.border,                // 边框
this.enabled = true,        // 输入框是否可用
this.semanticCounterText,
this.alignLabelWithHint,    // 覆盖将标签与 TextField 的中心对齐
})

SliverAppBar

const SliverAppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,// 设置拉伸模式(http://laomengit.com/flutter/widgets/FlexibleSpaceBar.html)
    this.bottom,
    this.elevation,
    this.forceElevated = false,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,//此应用栏是否显示在屏幕顶部
    this.centerTitle,//标题是否居中显示，默认值根据不同的操作系统
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距
    this.expandedHeight,//展开高度
    this.floating = false,//是否随着滑动隐藏标题
    this.pinned = false,//是否固定在顶部
    this.snap = false,//与floating结合使用
    this.stretch = false,//是否可拉伸
    this.stretchTriggerOffset = 100.0,//拉伸对齐偏移量设置
    this.onStretchTrigger,//当拉伸超过stretchTriggerOffset时触发该方法
    this.shape,
  }

CustomScrollView

  const CustomScrollView({
    Key key,
    Axis scrollDirection = Axis.vertical,//滚动方向 vertical垂直滚动
    bool reverse = false,//滚动开始方向，false从头开始滚动，true从尾开始滚动
    ScrollController controller,//控制器
    bool primary,//是否使用主题色
    ScrollPhysics physics,//滑动到底部回弹效果
							NeverScrollableScrollPhysics()禁止滚动
							AlwaysScrollableScrollPhysics()允许滚动
							ClampingScrollPhysics()Android下微光效果
							BouncingScrollPhysics()iOS下弹性效果
    bool shrinkWrap = false,//该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时(例如listview嵌套listview),被嵌套的shrinkWrap必须为true,否则Flutter会给出警告
    Key center,//中心
    double anchor = 0.0,//锚点
    double cacheExtent,//缓存区域
    this.slivers = const <Widget>[],//子widget数组
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,//确定处理拖动开始行为的方式 默认为DragStartBehavior.start
  })