数组颤动中的颜色容器

Question

问题已于 4 月 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;
}

您唯一需要做的就是确保单击下一步时的函数采用一个变量，该变量是问题的索引，即您所在的问题编号。