list - 数组颤动中的颜色容器
问题描述
问题更新于 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)
],
),
],
),
),
),
);
}
}
解决方案
好的,我将在这个答案中假设一些事情,所以根据需要进行更改。您要使用的颜色是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;
}
您唯一需要做的就是确保单击下一步时的函数采用一个变量,该变量是问题的索引,即您所在的问题编号。
推荐阅读
- javascript - 如何从调度中获得价值?
- python - 如何在循环中打开(和关闭)PyQt5 应用程序,并让该循环多次运行
- regex - 正则表达式匹配给定字符串中的数字、逗号、点、空格
- html - 导航器之间的显示字体问题
- nginx - nginx 将 vtt 作为 txt 服务
- tensorflow - 将 Keras 中的损失函数定义为逐个元素取反的元素乘法
- angularjs - 一个控制器正在工作,但另一个控制器出现错误。名为“ctrEmployee”的控制器未注册
- jquery - 选择选择器的第二个元素
- android - 保持 TextView 颜色的状态
- latency - 如何使用停车时间模拟器将 System.currentTimeMillis() 存储在数组中