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

因此，根据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();
        });
      },
    );
  }
}

根据需要进行修改。

Answer 2

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

Answer 3

我要感谢Igor和TWL的回答，但是我注意到关于此类问题的一件事是没有“正确的”答案。对于将来会遇到类似问题的任何人，我都会以这种方式进行总结。

您需要一个变量，该变量会在每次按下按钮时更改（我必须创建4个变量）
每次更改（即按按钮）都呼叫setState()

当然，根据您的动态按钮逻辑，这可能会变得凌乱，但这似乎是唯一的解决方案。

在旁注：我认为应该有更好的方法来处理按钮的按下（使用this.？），或者只是我希望抖动能像JS一样工作

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

3 个答案: