flutter-widget-radio

radio至关于Android中的radioGroup,这里有两种形式的group,其中Radio是不带文字的radioGroup,而RadioListTitle是带标题与副标题的group。 其中Radio经常使用属性为 value:表明这个button的一个值相似于ID groupValue:group的值 onChange:值改变时触发 activeColor:选中时的颜色 当groupValue=value时表明选中 相似于这种radioGroup的使用,要么放于Row中,要么放于Column中 好比这里放入Row中bash

class RadioADemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<RadioADemo> {
  int groupValue = 1;

  onChange(val) {

    this.setState(() {
      groupValue = val; print("val = " + val.toString());

    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.centerLeft,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Radio(
                value: 1,
                activeColor:Color.fromARGB(255, 255, 67, 26),
                groupValue: groupValue, //当value和groupValue一致的时候则选中
                onChanged: (T) {
                  onChange(T);
                }),
            Radio(
                value: 2,
                groupValue: groupValue,
                onChanged: (T) {
                  onChange(T);
                }),
            Radio(
                value: 3,
                groupValue: groupValue,
                onChanged: (T) {
                  onChange(T);
                })
          ],
        ),
      ),
    );
  }
}
复制代码

第一个添加了activeColor

而radioListTitle则是带文字的radiobutton,他能够带title和subtitle,除了有上面介绍过的属性以外,他还有几个重要的属性 secondary:在radiobutton的尾部显示一个widget,固然这个通常是Icon title:天然是标题了 subtitle:在title下方显示的副标题 isThreeLine:是否显示三行文本(title+subtitle)ui

class DemoRadioList extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<DemoRadioList> {
  String value = '';

  onChange(v) {
    this.setState(() {
      value = v;
    });
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      body: Column(
        children: <Widget>[
          RadioListTile<String>(
              secondary: Icon(Icons.extension),
              title: const Text('A'),
              value: "A",
              groupValue: this.value,
              isThreeLine: false,
              subtitle: const Text("subtitleA"),
              onChanged: onChange),
          RadioListTile<String>(
              title: const Text('B'),
              value: "B",
              subtitle: const Text("subtitleB"),
              groupValue: this.value,
              onChanged: onChange),
        ],
      ),
    );
  }
}
复制代码

本站公众号
   欢迎关注本站公众号,获取更多信息