list - 阵列 flutter 中的颜色容器

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;
}

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