处理动态生成的按钮上的“ onPressed”回调

Question

我创建了一个使用以下代码返回Widget列表的方法，并且希望单独处理onPressed事件！ （即更改所单击按钮的背景颜色）

我是Flutter的新手，找不到解决方法！

List<Widget> workingHoursButtons() {
    List<Widget> timeButtons = [];
    for (var i = 8; i <= 17; i++) {
      timeButtons.add(
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 59.0,
            height: 50.0,
            child: FlatButton(
              color: i == currentHour ? Color(0xff425660) : null,
              shape: RoundedRectangleBorder(
                side: BorderSide(),
                borderRadius: BorderRadius.circular(3.0),
              ),
              child: Text(
                "$i",
                style: TextStyle(
                  color: i == currentHour ? Colors.white : null,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: i < currentHour
                  ? null
                  : () {
                      print(i);
                    },
            ),
          ),
        ),
      );
    }
    return timeButtons;
  }

Answer 1

您需要使用StatefulWidget并在您的小部件状态下为每个按钮存储颜色。然后，使用onPressed事件，可以通过调用setState方法来更改此按钮的颜色（通过传递其索引），并且更改后的按钮将重新绘制。

Answer 2

因此，根据Igor的评论，是的，您需要一个可自定义的StatefulWidget，该按钮可为每个按钮保留唯一的ID，以便可以根据您当前的时间进行检查。简化示例：

首先，设置您的按钮列表：

workingHoursButtons() {
  buttonList = new List();
  for (var i = 0; i <= 5; i++) {
    buttonList.add(MyButton(index: i, whatHour: _currentHour,));
  }
}

使用ListView.builder，您的主要构建窗口小部件的外观如何：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ...,
    body: ListView.builder(
      itemCount: buttonList.length,
      itemBuilder: (BuildContext context, int index) {
        return buttonList[index];
      },
    ),
  );
}

和您的自定义按钮小部件，将其传递给索引和您的currentHour：

class MyButton extends StatefulWidget {
  MyButton({Key key, this.index, this.whatHour}) : super(key: key);

  final int index;
  final int whatHour;

  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  Color _btnColor;

  @override
  void initState() {
    super.initState();
    _btnColor = _setInitColor();
  }

  Color _setInitColor() {
    return widget.index == widget.whatHour ? Color(0xff425660) : null;
  }

  MaterialColor _changeColor() {
    // just testing with blue/red colors
    return widget.index < widget.whatHour ? Colors.blue : Colors.red;
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      color: _btnColor,
      child: Text('button' + widget.index.toString()),
      onPressed: () {
        setState(() {
          _btnColor = _changeColor();
        });
      },
    );
  }
}

根据需要修改。