c/c++语言开发共享Flutter实现单选,复选和开关组件的示例代码

1、开关 switch构造方法:const switch({ key? key, required this.value,//当前开关状态 required this.onchanged,//

1、开关 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,// 是否自动获取焦点

通过switch构造方法我们可以实现简单的开关组件,并且除了改变颜色之外我们还可以自定义滑块,如果对这个开关组件进行说明除了自定义布局,还可以使用switchlisttile组件,一个列表和swith的组合,官方帮我们实现了很多常见的功能,可以直接拿来使用。如果使用苹果风格开关可以使用封装好的cupertinoswitch

示例代码:

switch(      // activecolor: colors.blue,      activetrackcolor: colors.red,      inactivetrackcolor: colors.green,      // inactivethumbcolor: colors.yellow,      materialtaptargetsize: materialtaptargetsize.shrinkwrap,      dragstartbehavior: dragstartbehavior.start,      activethumbimage: assetimage("images/lbxx.png"),      inactivethumbimage: assetimage("images/lbxx.png"),      value: _switchselected,      onchanged: (value) {        setstate(() {          _switchselected = value;        });      }),

Flutter实现单选,复选和开关组件的示例代码

2、单选 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,//是否自动获取焦点  })

单选组件使用了泛型,我们在使用的时候可以自定义选项的数据类型,一般都是在列表中使用,通过单选组件可以帮我们实现一个单选列表选项,当然radio也有对应的radiolisttile,用来对单选框进行说明。

示例代码:

column(    children: [  _radiocheckbox(_datalist[0]),  _radiocheckbox(_datalist[1]),  _radiocheckbox(_datalist[2]),  _radiocheckbox(_datalist[3])    ],  ),  row _radiocheckbox(fmradiobean fmradiobean) {    return row(      children: [        radio<fmradiobean>(            visualdensity: visualdensity(                horizontal: visualdensity.minimumdensity,                vertical: visualdensity.minimumdensity),            value: fmradiobean,            // activecolor: colors.red,            fillcolor: materialstateproperty.resolvewith((state) {              if (state.contains(materialstate.selected)) {                return colors.red;              } else {                return colors.blue;              }            }),            focuscolor: colors.orange,            groupvalue: groupvalue,            toggleable: false,            onchanged: (value) {              setstate(() {                groupvalue = fmradiobean;                radiotext = fmradiobean.text;              });            }),        text(fmradiobean.text)      ],    );  }  class fmradiobean {    int index;    string text;    bool isselect;    fmradiobean(this.index, this.text, this.isselect);  }

Flutter实现单选,复选和开关组件的示例代码

3、复选多选 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,// 自定义选项框边框样式  }) 

多选组件可以使用shape和side字段自定义选择框样式,不过一般交互都是单选用圆形,多选用方形。既然前面俩兄弟都有现成的辅助说明组件,多选自然也有checkboxlisttile,仨兄弟用法基本一样。

示例代码:

column(    children: [      _checkcheckbox(_datalist[0]),      _checkcheckbox(_datalist[1]),      _checkcheckbox(_datalist[2]),      _checkcheckbox(_datalist[3])    ],  ),  text(_checktext.tostring())    row _checkcheckbox(fmradiobean fmradiobean) {    return row(      children: [        checkbox(            visualdensity: visualdensity(                horizontal: visualdensity.minimumdensity,                vertical: visualdensity.minimumdensity),            value: fmradiobean.isselect,            activecolor: colors.blue,            checkcolor: colors.white,            shape: roundedrectangleborder(              borderradius: borderradius.all(radius.circular(6))            ),            side: borderside(color: colors.black,width: 2,style: borderstyle.solid),            onchanged: (value) {              setstate(() {                if (value == true) {                  fmradiobean.isselect = true;                  _checktext.add(fmradiobean.text);                } else {                  fmradiobean.isselect = false;                  _checktext.remove(fmradiobean.text);                }              });            }),        text(fmradiobean.text)      ],    );  }

Flutter实现单选,复选和开关组件的示例代码

小结

可以看到这仨兄弟的构造有很多一样的属性,同时也有在移动端也用不着的属性,比如鼠标焦点相关的属性,我目前使用的版本是2.8.1,在2.10之后版本flutter正式支持了windows桌面应用开发,也可见flutter组件跨平台的特点,以后有时间再研究下windwos应用开发。

到此这篇关于flutter实现单选,复选和开关组件的示例代码的文章就介绍到这了,更多相关flutter单选 复选 开关组件内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>!

需要了解更多c/c++开发分享Flutter实现单选,复选和开关组件的示例代码,都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/c-cdevelopment/1081548.html

(0)
上一篇 2022年4月24日
下一篇 2022年4月24日

精彩推荐