flutter Radio 单选框

flutter Radio 单选框Flutter单选框

大家好,又见面了,我是你们的朋友全栈君。

Radio 单选框

目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

【x1】点击查看提示

【x2】各种系列的教程

【x3】Flutter文章积累目录


1 flutter单选框Radio的基本使用

  ///单选框的基本使用
  ///默认选中的单选框的值
  int groupValue = 0;
  Radio buildRadioUseWidget() { 
   
    return Radio(
      ///此单选框绑定的值 必选参数
      value: 0,
      ///当前组中这选定的值 必选参数
      groupValue: groupValue,
      ///点击状态改变时的回调 必选参数
      onChanged: (v) { 
   
        setState(() { 
   
          this.groupValue = v;
        });
      },
    );
  }

运行效果如下图所示
在这里插入图片描述
在实际项目开发中,一般单选框都会成组使用,不会单独使用,如下图所示效果:
在这里插入图片描述
代码如下:

  ///默认选中的单选框的值
  int groupValue = 0;
  ///单选框的成组使用
  Row buildRadioGroupWidget() { 
   
    return Row(children: [
      Radio(
        ///此单选框绑定的值 必选参数
        value: 0,
        ///当前组中这选定的值 必选参数
        groupValue: groupValue,
        ///点击状态改变时的回调 必选参数
        onChanged: (v) { 
   
          setState(() { 
   
            this.groupValue = v;
          });
        },
      ),
      Radio(
        ///此单选框绑定的值 必选参数
        value: 1,
        ///当前组中这选定的值 必选参数
        groupValue: groupValue,
        ///点击状态改变时的回调 必选参数
        onChanged: (v) { 
   
          setState(() { 
   
            this.groupValue = v;
          });
        },
      ),
      Radio(
        ///此单选框绑定的值 必选参数
        value: 2,
        ///当前组中这选定的值 必选参数
        groupValue: groupValue,
        ///点击状态改变时的回调 必选参数
        onChanged: (v) { 
   
          setState(() { 
   
            this.groupValue = v;
          });
        },
      )
    ],);
  }

如下图所示效果,是在实际项目中也比较常用的一种设计效果,单选框与文字结合使用,在水平方向通过结合Row来实现
在这里插入图片描述

///默认选中的单选框的值
int groupValue = 0;
///单选框的成组使用
Row buildRadioGroupRowWidget() { 
   
  return Row(
    children: [
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此单选框绑定的值 必选参数
            value: 0,
            ///当前组中这选定的值 必选参数
            groupValue: groupValue,
            ///点击状态改变时的回调 必选参数
            onChanged: (v) { 
   
              setState(() { 
   
                this.groupValue = v;
              });
            },
          ),
          Text("语文")
        ],
      ),
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此单选框绑定的值 必选参数
            value: 1,
            ///当前组中这选定的值 必选参数
            groupValue: groupValue,
            ///点击状态改变时的回调 必选参数
            onChanged: (v) { 
   
              setState(() { 
   
                this.groupValue = v;
              });
            },
          ),
          Text("数学")
        ],
      ),
      Row(
        ///包裹子布局
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            ///此单选框绑定的值 必选参数
            value: 2,
            ///当前组中这选定的值 必选参数
            groupValue: groupValue,
            ///点击状态改变时的回调 必选参数
            onChanged: (v) { 
   
              setState(() { 
   
                this.groupValue = v;
              });
            },
          ),
          Text("英语")
        ],
      ),
    ],
  );
}

在这里需要注意的是水平线性布局Row默认的填充父布局的,用在这里的话,需要将其设置为包裹子布局的方式,通过配置mainAxisSize的值为MainAxisSize.min来实现。
在上图的效果基础上进行一些改造,将单选框Radio与文字的排列方式使用线性布局Column来组件,实现的效果如下图所示,对应的关键代码如下:
在这里插入图片描述
代码如下:

///单选框的成组使用
///默认选中的单选框的值
int groupValue = 0;
  Row buildRadioGroupColumnWidget() { 
   
    return Row(
      children: [
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
              ///此单选框绑定的值 必选参数
              value: 0,
              ///当前组中这选定的值 必选参数
              groupValue: groupValue,
              ///点击状态改变时的回调 必选参数
              onChanged: (v) { 
   
                setState(() { 
   
                  this.groupValue = v;
                });
              },
            ),
            Text("语文")
          ],
        ),
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [... ... 省略 ],
        ),
        Column(
          ///包裹子布局
          mainAxisSize: MainAxisSize.min,
          children: [... ... 省略 ],
        ),
      ],
    );
  }


目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

【x1】点击查看提示

【x2】各种系列的教程

【x3】Flutter文章积累目录


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140609.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Java代码实体类生成SQL语句(Java实体类转数据库)

    Java代码实体类生成SQL语句(Java实体类转数据库)有的时候把数据库删了,如果照着实体类重新创建数据库的话比较麻烦,可以使用这个工具,把代码复制到项目里面设置一下即可把Java代码中的实体类转换为SQL语句输出为一个文件,打开执行命令即可。代码如下:packageMain;importjavax.xml.bind.annotation.XmlElement;importjava.io.*;importjava.lang.annotation.Annotation;importjava.lang.reflect.Field;p.

  • mysql中的数据库对用户权限做限制

    mysql中的数据库对用户权限做限制

  • JS判断数据类型的方法有哪些_c语言数据类型

    JS判断数据类型的方法有哪些_c语言数据类型javascript判断数据类型的方法

  • Snap7 西门子S7系列PLC的通信库 简介[通俗易懂]

    Snap7 西门子S7系列PLC的通信库 简介[通俗易懂]目录简介参考Snap7简介Snap7用途适用系统支持语言西门子S7通信介绍Snap7组件Sanp7APISnap7PythonSnap7安装PLC设置连接PLC读取数据发送数据Sanp7C/C++node.js简介最近在开发一个项目,作为技术帝,已经完成工艺、机械设计的设计,项目过多,也是为了让自己更加????叉,就开始尝试做电气制图和PLC编程。结合物联网的发展,有一种想法,将数据传…

    2022年10月23日
  • 武侠金曲「建议收藏」

    十首香港武侠金曲唱出无限中国意境

  • 大学四年嵌入式学习心得体会

    大学四年嵌入式学习心得体会我所在学校是普通的本科院校,从大一开始加入嵌入式实验室,一直在实验室呆了三年半,从大一的懵懂无知,天天看着C语言书自己敲代码,到后来学习51单片机,STM32,做过3-4个项目,参加各种比赛,轻轻松松搞定毕业设计。在此写的这篇Chat主要是针对大学学习嵌入式的童鞋的,嵌入式不容易学,牵扯的内容,知识点太多,你是否不知道如何下手呢?是否在迷茫为什么我学的这么吃力呢?下面作为过来人的我为您解…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号