list - 从列表中更改 containerColor

Question

我之前问过一个关于 Flutter 列表的问题。我得到了很好的帮助，但在同一个列表中出现了新问题。由于这个新问题具有其他性质，因此我提出了这个新问题。

我有一个蓝色容器列表(下面的代码是从我的工作代码中简化的，以使我的问题更清楚)。

当用户输入 5 并按下“提交”按钮时，第一个容器的颜色应变为绿色(如果不是 5，则按钮应变为红色)。用户第二次按下“提交”按钮时，第二个容器应该改变颜色。等等……

我面临的问题是我无法使列表的增量生效。

      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 = "";
  var _controller = new TextEditingController();
  int _counter = 1;

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

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

  Widget myTextField() {
    return Container(
      width: 50.0,
      child: TextField(
        controller: _controller,
        textAlign: TextAlign.center,
        autofocus: true,
        keyboardType: TextInputType.number,
        onChanged: (val) {
          userAnswer = val;
        },
      ),
    );
  }

  Widget myListBuilder() {
    return Container(
      height: 50.0,
      width: 300.0,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          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)),
              ),
              myTextField(),
              RaisedButton(
                child: Text('Submit'),
                onPressed: () {
                  setState(() {
                    submitPressed(0);  //This will naturally only give index 0
                  });
                },
              ),
              myListBuilder(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  buildContainer(context, 0),
                  buildContainer(context, 1),
                  buildContainer(context, 2)
                ],
              ),
              RaisedButton(
                child: Text('Next'),
                onPressed: () {
                  _counter++;
                  _controller.clear();
                  myTextField();
                },
              ),
              Text('This should be container no: $_counter'),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

我不明白你为什么会有这个

submitPressed(0);

此代码有效:

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 = "";
  var _controller = new TextEditingController();
  int _counter = 0;

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

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

  Widget myTextField() {
    return Container(
      width: 50.0,
      child: TextField(
        controller: _controller,
        textAlign: TextAlign.center,
        autofocus: true,
        keyboardType: TextInputType.number,
        onChanged: (val) {
          userAnswer = val;
        },
      ),
    );
  }

  Widget myListBuilder() {
    return Container(
      height: 50.0,
      width: 300.0,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          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)),
              ),
              myTextField(),
              RaisedButton(
                child: Text('Submit'),
                onPressed: () {
                  setState(() {
                    submitPressed(_counter);
                  });
                },
              ),
              myListBuilder(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  buildContainer(context, 0),
                  buildContainer(context, 1),
                  buildContainer(context, 2)
                ],
              ),
              RaisedButton(
                child: Text('Next'),
                onPressed: () {
                  setState(() {
                    _counter++;
                  });
                  _controller.clear();
                  myTextField();
                },
              ),
              Text('This should be container no: ${_counter +1}'),
            ],
          ),
        ),
      ),
    );
  }
}

我将 _counter 更改为充当索引，并将其用作方法 submitPressed 的参数。我还将增量放在 setState 中，或者您只有在点击提交按钮后才能看到新数字。