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中

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）

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),
        ],
      ),
    );
  }
}
複製代碼