Flutter颜色不随索引的变化而变化

Question

我想更改容器的颜色。所以我只是让循环显示容器，并在索引相同时更改颜色。但问题是索引在变化，但颜色没有变化。我已经检查了currentIndex的打印值是否正在改变，但不知道为什么颜色没有改变我正在使用一个有状态的小部件

代码

List categories = [
{'CatID': 0, 'CatName': 'All'},
{'CatID': 1, 'CatName': 'Computer Hardware'},
{'CatID': 2, 'CatName': 'Computer Software'},
{'CatID': 3, 'CatName': 'Internet'},
{'CatID': 4, 'CatName': 'Windows Installation'},
];
List<Widget> CatWidget = List<Widget>(); // Here we defined a list of widget!

class ShopScreen extends StatefulWidget {
@override
_ShopScreenState createState() => _ShopScreenState();
}
class _ShopScreenState extends State<ShopScreen> {
int currentindex = 0;
@override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
for (int i = 0; i < categories.length; i++) {
CatWidget.add(
GestureDetector(
onTap: () {
setState(() {
// set current index!
currentindex = i;
print(currentindex);
});
},
child: Container(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Container(
height: Height * 0.04,
decoration: BoxDecoration(
color: currentindex == i
? Color(0xff04385f)
: Colors.white, // Here we checked!,
border: Border.all(color: Colors.grey[300]),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Center(
child: Text(
categories[i]['CatName'],
style: TextStyle(
fontSize: 10,
color: currentindex == i ? Colors.white : Colors.grey,
fontFamily: 'UbuntuRegular'),
)),
),
),
),
),
);
}

Answer 1

像这样更改您的列表小工具

final CatWidget = <Widget>[]; 

我已经检查了代码的工作情况，只需像这样定义Widget，并在Widget Build中的for循环上方进行定义。

最后的代码看起来像这个

class ShopScreen extends StatefulWidget {
@override
_ShopScreenState createState() => _ShopScreenState();
}
class _ShopScreenState extends State<ShopScreen> {
int currentindex = 0;
@override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
final CatWidget = <Widget>[]; // Here we defined a list of widget!
for (int i = 0; i < categories.length; i++) {
CatWidget.add(
GestureDetector(
onTap: () {
setState(() {
// set current index!
currentindex = i;
print(currentindex);
});
},
child: Container(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Container(
height: Height * 0.04,
decoration: BoxDecoration(
color: currentindex == i
? Color(0xff04385f)
: Colors.white, // Here we checked!,
border: Border.all(color: Colors.grey[300]),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Center(
child: Text(
categories[i]['CatName'],
style: TextStyle(
fontSize: 10,
color: currentindex == i ? Colors.white : Colors.grey,
fontFamily: 'UbuntuRegular'),
)),
),
),
),
),
);
}