flutter 按钮单选封装

数字是自己先写死的

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

使用了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;
    });
  }

　　最终效果如下：