数组颤振中的颜色容器

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此处使用 a ，因为您尚未在代码示例中指定它。你会这样构建你的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;
}

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