阵列中的彩色容器颤动

Question

问题更新于10月10日：

嗨！我仍然卡住了，不能让这个工作:(

我正在尝试创建一个应用程序，用户将在导航到结果屏幕之前回答总共3个问题。为了显示问题的进展，将连续有3个彩色容器。该行最初将是例如蓝色，但是当用户回答正确时 - 该问题的容器将变为绿色，如果答案不正确，则容器将变为红色。

我真的可以在这里使用一些进一步的帮助

下面我使用不同颜色的代码尽可能简单，只是为了显示列表中的不同项目。

现在它在第一个问题上工作正常，但随后又停止了。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'listing 4',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  int sum = 5;
  String userAnswer;
  String correction = "";

  List<Color> colors = [Colors.blue, Colors.amber, Colors.pink];

  submitPressed(int index) {
    if (userAnswer == sum.toString()) {
      setState(() {
        correction = sum.toString();
        colors[index] = Colors.green;
      });
    } else {
      colors[index] = Colors.red;
    }
  }

  Widget myListBuilder() {
    return ListView.builder(
      itemCount: 3,
      itemBuilder: buildContainer,
    );
  }

  Widget buildContainer(BuildContext context, int index) {
    return Container(
        child: Padding(
      padding: const EdgeInsets.only(top: 10.0),
      child: Container(
        height: 20.0,
        width: 15.0,
        decoration: BoxDecoration(
            color: colors[index], //this is the important line
            borderRadius: BorderRadius.all(Radius.circular(8.0))),
      ),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Listing 4'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Text('Correct answer is 5',
                    style: TextStyle(fontSize: 20.0)),
              ),
               Container(
                width: 50.0,
                child: TextField(
                  textAlign: TextAlign.center,
                  autofocus: true,
                  keyboardType: TextInputType.number,
                  onChanged: (val) {
                    userAnswer = val;
                  },
                ),
              ),
              RaisedButton(
                child: Text('Submit'),
                onPressed: () {
                  submitPressed(0);
                },
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  buildContainer(context, 0),
                  buildContainer(context, 1),
                  buildContainer(context, 2)
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

好的，我将在这个答案中假设一些内容，因此必要时进行更改。您要使用的颜色是Colors.blue作为默认颜色，Colors.green表示正确，Colors.red表示不正确。

您首先要初始化一个颜色列表，所有颜色都是蓝色，因为这是默认颜色：

List<Color> colors = [Colors.blue, Colors.blue, Colors.blue ..... Colors.blue] 
//You will write Colors.blue ten times as there are 10 boxes.

我将假设你在这里使用ListView.builder，因为你没有在你的代码示例中指定它。你会建立你的ListView：

//Place this within your widget tree
ListView.builder(
  itemBuilder: buildContainer,
  itemCount: 10,
);

然后，您需要修改buildContainer方法，因为itemBuilder参数需要一个方法来获取context和index并输出一个小部件，因此：

Widget buildContainer(BuildContext context, int index) {
  return Container(
    child: Padding(
      padding: const EdgeInsets.only(top: 10.0),
      child: Container(
        height: 20.0,
        width: 15.0,
        decoration: BoxDecoration(
          color: colors[index], //this is the important line
          borderRadius: BorderRadius.all(Radius.circular(8.0))
        ),
      ),
    )
  );
}

然后，这将创建10个盒子，每个盒子从他们之前创建的颜色列表中的位置获得颜色。现在你只需要在完成后改变颜色。使用您的代码示例：

if (userAnswer == widget.sum.toString()) {
  setState(() {
    correction = widget.sum.toString();
    //Here we will instead set the specific color in the array
    colors[index] = Colors.green;
  });
} else {
  correction = widget.sum.toString();
  colors[index] = Colors.red;
}

您需要做的唯一事情是确保单击下一个函数时，该函数将获取一个变量，该变量是问题的索引，即您所在的问题编号。