flutter Radio单选框

单选框,允许用户从一组中选择一个选项。

import ‘package:flutter/material.dart‘;

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  int _radioGroupA = 0;

  void _handleRadioValueChanged(int value) {
    setState(() {
      _radioGroupA = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘RadioDemo‘),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(‘RadioGroupValue: $_radioGroupA‘),
            SizedBox(height: 32.0),
            RadioListTile(
              value: 0,
              groupValue: _radioGroupA,
              onChanged: _handleRadioValueChanged,
              title: Text(‘Options A‘),
              subtitle: Text(‘Description‘),
              secondary: Icon(Icons.filter_1),
              selected: _radioGroupA == 0,
            ),
            RadioListTile(
              value: 1,
              groupValue: _radioGroupA,
              onChanged: _handleRadioValueChanged,
              title: Text(‘Options B‘),
              subtitle: Text(‘Description‘),
              secondary: Icon(Icons.filter_2),
              selected: _radioGroupA == 1,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Radio(
                //   value: 0,
                //   groupValue: _radioGroupA,
                //   onChanged: _handleRadioValueChanged,
                //   activeColor: Colors.black,
                // ),
                // Radio(
                //   value: 1,
                //   groupValue: _radioGroupA,
                //   onChanged: _handleRadioValueChanged,
                //   activeColor: Colors.black,
                // ),
              ],
            ),
          ],
        ),
      )
    );
  }
}

文档:https://api.flutter.dev/flutter/material/Radio-class.html

效果:

原文地址:https://www.cnblogs.com/loaderman/p/11344937.html

时间: 2024-11-06 11:29:19

flutter Radio单选框的相关文章

checbox复选框实现radio单选框的单选功能

checbox复选框实现radio单选框的单选功能:大家知道复选框可以一次选中多个,单选按钮每次只能够选中其中的一个,但是单选按钮比较霸道,你选中以后,只能够且必须选中其中一个,所有下面就通过checkbox复选框模拟实现单选按钮的功能,但是能够取消选中的项.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

纯css3实现的超炫checkbox复选框和radio单选框

之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现的没有任何js代码.下面我们一起看下实现代码吧 html代码: <div style="width:200px; float:left"> <label> <input type="checkbox" class="option-

css3的实现的checkbox复选框和radio单选框绚丽美化效果

css3的实现的checkbox复选框和radio单选框绚丽美化效果:在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作,并且还有很大的局限性.由于css3的出现,一切好像变的都变的轻松起来,并且效果非常的绚丽,这是使用css2无法做到的,下面就分享一段能够实现此功能的代码实例,需要的朋友可以做一下参考.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> &

h5 radio单选框样式设置

radio单选框样式设置 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } span.s1 { } input[type=radio] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; -webkit-appearance: none; background-color: transp

layui 获取radio单选框选中的值

Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio" name="sex" value="男" title="男" lay-filter="ChoiceRadio"> <input type="radio" name="sex&q

Extjs的radio单选框的使用

Extjs的radio的FormPanel的代码如下: {  xtype : 'radiogroup',    fieldLabel : '是否置顶',    name:'isTop',     items : [{                boxLabel : '置顶',                name:'isTop',                inputValue : '1'                }, {                 boxLabel : '

[oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框,radio单选框以及如何实现自定义数据格式要求

1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -

html 的radio单选框如何实现互斥------radio只是input的type属性

先看看没有互斥的情况: 1 <html> 2 <body> 3 4 男性:<input type="radio" id="male" /> 5 <br /> 6 女性:<input type="radio" id="female" /> 7 <br /> 8 9 </body> 10 </html> 11 要实现互斥, 可以让名称一

layui radio 单选框 效果 显示不来

$("input[name=sex][value=女]").attr("checked", data.data.adminInfoEntity.adminInfoSex == 1 ? true : false);$("input[name=sex][value=男]").attr("checked", data.data.adminInfoEntity.adminInfoSex == 2 ? true : false);$(&