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;
    });
  }

　　最終效果以下：