如何在flutter中创建这样的自定义单选按钮组
这是完整的代码
class CustomRadio extends StatefulWidget { @override createState() { return new CustomRadioState(); } } class CustomRadioState extends State<CustomRadio> { List<RadioModel> sampleData = new List<RadioModel>(); @override void initState() { // TODO: implement initState super.initState(); sampleData.add(new RadioModel(false, 'A', 'April 18')); sampleData.add(new RadioModel(false, 'B', 'April 17')); sampleData.add(new RadioModel(false, 'C', 'April 16')); sampleData.add(new RadioModel(false, 'D', 'April 15')); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("ListItem"), ), body: new ListView.builder( itemCount: sampleData.length, itemBuilder: (BuildContext context, int index) { return new InkWell( //highlightColor: Colors.red, splashColor: Colors.blueAccent, onTap: () { setState(() { sampleData.forEach((element) => element.isSelected = false); sampleData[index].isSelected = true; }); }, child: new RadioItem(sampleData[index]), ); }, ), ); } } class RadioItem extends StatelessWidget { final RadioModel _item; RadioItem(this._item); @override Widget build(BuildContext context) { return new Container( margin: new EdgeInsets.all(15.0), child: new Row( mainAxisSize: MainAxisSize.max, children: <Widget>[ new Container( height: 50.0, width: 50.0, child: new Center( child: new Text(_item.buttonText, style: new TextStyle( color: _item.isSelected ? Colors.white : Colors.black, //fontWeight: FontWeight.bold, fontSize: 18.0)), ), decoration: new BoxDecoration( color: _item.isSelected ? Colors.blueAccent : Colors.transparent, border: new Border.all( width: 1.0, color: _item.isSelected ? Colors.blueAccent : Colors.grey), borderRadius: const BorderRadius.all(const Radius.circular(2.0)), ), ), new Container( margin: new EdgeInsets.only(left: 10.0), child: new Text(_item.text), ) ], ), ); } } class RadioModel { bool isSelected; final String buttonText; final String text; RadioModel(this.isSelected, this.buttonText, this.text); }
To use :
void main() { runApp(new MaterialApp( home: new CustomRadio(), )); }