flutter Radio 单选框

全栈程序员站长

发布于 2022-09-01 10:35:52

1.6K0

发布于 2022-09-01 10:35:52

文章被收录于专栏：全栈程序员必看全栈程序员必看

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

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文章积累目录

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140609.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter