如何在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); }
使用:
void main() { runApp(new MaterialApp( home: new CustomRadio(), )); }
截图:
您可以使用ListView和List Item创建它,并使用一个局部变量来存储所选项目 . 您可以根据变量渲染选定的ListItem .
附:如果您需要代码段,请告诉我们 .
[EDIT]
正如您所要求的,以下是代码片段,它将向您展示如何维护每个ListView项的状态 .
现在你可以玩它,并按照你想要的方式 . 如果您只想要一个选定的项目,则可以按此方式编写逻辑 .
void main() { runApp(new MaterialApp( home: new ListItemDemo(), )); } class ListItemDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("ListItem"), ), body: new ListView.builder( itemCount: 10, itemBuilder: (BuildContext context, int index) { return new MyListItem( title: "Hello ${index + 1}", ); }), ); } } class MyListItem extends StatefulWidget { final String title; MyListItem({this.title}); @override _MyListItemState createState() => new _MyListItemState(); } class _MyListItemState extends State<MyListItem> { bool isSelected; @override void initState() { super.initState(); isSelected = false; } @override Widget build(BuildContext context) { return new Row( children: <Widget>[ new Text("${widget.title} ${isSelected ? "true" : "false"}"), new RaisedButton( onPressed: () { if (isSelected) { setState(() { isSelected = false; }); } else { setState(() { isSelected = true; }); } }, child: new Text("Select"), ) ], ); } }
2 回答
这是完整的代码
使用:
截图:
您可以使用ListView和List Item创建它,并使用一个局部变量来存储所选项目 . 您可以根据变量渲染选定的ListItem .
附:如果您需要代码段,请告诉我们 .
[EDIT]
正如您所要求的,以下是代码片段,它将向您展示如何维护每个ListView项的状态 .
现在你可以玩它,并按照你想要的方式 . 如果您只想要一个选定的项目,则可以按此方式编写逻辑 .