flutter 按钮单选封装

数字是本身先写死的

List list =[ { "title": "影视特效", "type":0, }, { "title": "室内设计", "type":1 }, { "title": "游戏原画", "type":2 }, { "title": "次时代", "type":3 }, { "title": "UI设计", "type":4 }, { "title": "后期合成", "type":5 }, ];

使用了GridView

用来控制一行显示几列

@override
  Widget build(BuildContext context) {
    int groupValue=1;
    return GridView.count(
      padding: EdgeInsets.all(5.0),
      //一行多少个
      crossAxisCount: 3,
      //滚动方向
      scrollDirection: Axis.vertical,
      // 左右间隔
      crossAxisSpacing: 10.0,
      // 上下间隔
      mainAxisSpacing: 15.0,
      //宽高比
      childAspectRatio: 1 / 0.4,
      shrinkWrap: true,
      children: widget.formList.map((value) {
        return listitem(context,value);
      }).toList(),
    );
  }

widget.formList 是从调用页面传过来的

 Widget listitem(context,value) { var deviceSize = MediaQuery.of(context).size; print(value['type']); return groupValue==value['type'] ? RaisedButton( color: Colors.black, onPressed: (){ print('切换${value}'); updateGroupValue(value['type']); }, child: Text(value['title'],style: TextStyle(color: Colors.white),), ):OutlineButton( onPressed: (){ print('切换${value}'); updateGroupValue(value['type']); }, child: Text(value['title']), ); }
这里是代码的关键比较 当value和groupValue一致的时候则选中 设置选中样式和没选中样式

 

当点击某一个按钮的时候进行修改 groupValue 的值 默认groupValue值为0

int groupValue=0;

void updateGroupValue(int v){
    setState(() {
      groupValue=v;
    });
  }

　　最终效果以下：