Question

我正在构建一个简单的测验应用程序作为一个学习项目。我只想更改单击按钮的颜色。现在，它会更改所有按钮的颜色。我试图列出颜色，所以每个按钮都可以从列表中选取颜色。

class _AnwserButtonsState extends State<AnwserButtons> {
  Color color = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        children: widget.anwsers
            .map(
              (anwser) => RaisedButton(
                child: Text(anwser, style: TextStyle(color: color)),
                onPressed: () => onPressed(anwser),
              ),
            )
            .toList(),
      ),
    );
  }

  onPressed(anwser) {
    setState(
      () {
        if (anwser == widget.properAnwser) {
          color = Colors.green;
        } else {
          color = Colors.red;
        }
      },
    );
  }
}

Answer 1

您需要一个id值。使用ListView.builder时可以使用索引。

ListView.builder(
            itemCount: widget.anwsers.length,
            itemBuilder: (BuildContext context, int index) {
return Column(
                  children: <Widget> [
RaisedButton(
                child: Text(widget.anwsers[index], style: TextStyle(color: color)),
                onPressed: () => onPressed(widget.anwsers[index], index),
              ),
            )
onPressed(anwser, index) {
    setState(
      () {
        if (anwser == widget.properAnwser[index]) {
          color = Colors.green;
        } else {
          color = Colors.red;
        }
      },
    );
  }
}

这可以给您一个想法。但我的意见是建立一个具有答案，正确答案，颜色和ID的课程。在本示例中使用类时，可能会更容易且易读。

Answer 2

使用ListView.builder会更好，因为您可以通过RaisedButton中的index来控制每个List

有用链接：

https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

https://medium.com/@DakshHub/flutter-displaying-dynamic-contents-using-listview-builder-f2cedb1a19fb

按钮文字颜色变化

2 个答案: