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)


相关推荐

  • Python 写入txt文本文件[通俗易懂]

    Python 写入txt文本文件[通俗易懂]引入完整示例

  • 自动控制原理哈工大课后答案_控制系统的数学模型答案

    自动控制原理哈工大课后答案_控制系统的数学模型答案计算机控制系统大作业,简析冯诺依曼结构和哈佛结构异同浅析冯诺依曼结构与哈佛结构摘要:本文简要介绍了冯诺依曼结构与哈佛结构,将两者原理及应用情况进行了对比分析,并对计算机组成发展趋势做了简单预测。关键词:计算机系统结构冯诺依曼结构哈佛结构1冯诺依曼结构与哈佛结构1.1冯诺依曼结构冯诺依曼结构(VonNeumannarchitecture),也称普林斯顿结构,它把程序本身当作数据来对待,程…

  • webservice 实例 创建与 调用「建议收藏」

    webservice 实例 创建与 调用「建议收藏」webservice实例创建与调用序webservice选型配置代码webservice接口层接口实现实体webservice挂靠配置启动服务测试服务测试:测试地址客户端生成环境配置代码生成序对接SAP系统,指定要用webservice做对接。不然打死也不用webservice,感觉webService也实现不怎么流行了,过程中遇到了不少问题。就javawebservice而言,框架就有不下十种。网上的教程更是五花八门,零零碎碎,并且很多误导。本博将记录下项目里用的webservi

  • nginx指令详解_考试说明全解

    nginx指令详解_考试说明全解常见的命令有:nginx-sreopen#重启Nginxnginx-sreload#重新加载Nginx配置文件,然后以优雅的方式重启Nginxnginx-sstop#强制停止Nginx服务nginx-squit#优雅地停止Nginx服务(即处理完所有请求后再停止服务)nginx-t#检测配置文件是否有语法错误,然后退出nginx-?,-h#打开帮助信息nginx-v#显示版本信息并退出nginx-V#显示版本和配置选项信息,然后退出

  • python plotly 使用教程

    python plotly 使用教程1、plotly介绍lotly的Python图形库使互动的出版质量图表成为在线。如何制作线图,散点图,面积图,条形图,误差线,箱形图,直方图,热图,子图,多轴,极坐标图和气泡图的示例。推荐最好使

  • 区块链进入共享汽车行业,实现共享使用权和所有权

    区块链进入共享汽车行业,实现共享使用权和所有权

发表回复

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

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