如何使用 Flutter 在 GridView 中启用和禁用按钮？答案

【问题标题】：How to enable and disable button in GridView using Flutter?如何使用 Flutter 在 GridView 中启用和禁用按钮？
【发布时间】：2020-06-26 09:00:45
【问题描述】：

我已经使用颤振在网格视图中创建了按钮。现在我想在单击按钮时更改按钮的颜色。与 HTML 中的主动使用相同。当我单击按钮时，按钮应显示为活动状态，当我单击另一个按钮时，第一个按钮将被禁用，当前按钮将被启用。

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'My Mitsu',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          actions: <Widget>[
            new RaisedButton(
              child: new Text("Logout",
                  style: TextStyle(color: Colors.black, fontSize: 20.0)),
              onPressed: () async {
                log_out();
              },
              color: Colors.white,
            )
          ],
        ),
        backgroundColor: Colors.white,
        body: Column(children: [
          Expanded(
            child: GridView.count(
              crossAxisCount: countValue,
              mainAxisSpacing: 35.0,
              crossAxisSpacing: 35.0,
              padding: const EdgeInsets.fromLTRB(20.0, 40.0, 40.0, 20.0),
              childAspectRatio: (aspectWidth / aspectHeight),
              children: <Widget>[
                RaisedButton(
                  child: Text('Send Lift to Parking',
                      style: TextStyle(fontSize: 15.0)),
                  onPressed: () {
                    onPress(0);
                    showShortToast();
                  },
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(1);
                    showShortToast();
                  },
                  child: Text('Send Lift to 1st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(2);
                    showShortToast();
                  },
                  child: Text('Send Lift to 2st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(3);
                    showShortToast();
                  },
                  child: Text('Send Lift to 3st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(4);
                    showShortToast();
                  },
                  child: Text('Send Lift to 4st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(5);
                    showShortToast();
                  },
                  child: Text('Send Lift to 5st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(6);
                    showShortToast();
                  },
                  child: Text('Send Lift to 6st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
                RaisedButton(
                  onPressed: () {
                    onPress(7);
                    showShortToast();
                  },
                  child: Text('Send Lift to 7st Floor',
                      style: TextStyle(fontSize: 15.0)),
                ),
              ],
            ),
          ),
        ]));
  }

【问题讨论】：

标签： android flutter

【解决方案1】：

如果不给按钮的onPressed属性传递函数，按钮会自动禁用，（不通过=传递null）

///button#1
FlatButton(
 //change color according to state
 color: button1Enabled? Colors.green:Colors.red;
 onPressed: button1Enabled? (){ } : null;
)

///button#2
FlatButton(
 onPressed: (){
  setState(){
   button1Enabled = !button1Enabled;
  }
 }
)

【讨论】：

点击按钮时颜色应该改变

【解决方案2】：

像这样创建你的按钮

RaisedButton(
    onPressed: () {
       onPressed(1);
    },
    color: currentIndex == 1 ? bottonColor : null,
    child: Text('Send Lift to 1st Floor',
           style: TextStyle(fontSize: 15.0)),
),

并像这样创建 onPress 函数

onPressed(String floor) {
setState(() {
  currentIndex = int.parse(floor);
  bottonColor = Colors.red;
});

}

在 currentIndex 和 buttonColor 类之外创建两个变量

int currentIndex = 0;
Color bottonColor;
class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {

   }
}

【讨论】：