颤振颜色不会随着索引的变化而改变答案

【问题标题】：Flutter color not chaning on change of index颤振颜色不会随着索引的变化而改变
【发布时间】：2020-12-01 09:01:42
【问题描述】：

我想改变容器水龙头的颜色。所以我只是 for 循环来显示容器并在索引相同时更改颜色。但问题是索引在变化，但颜色没有变化。我检查了 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'),
                )),
              ),
            ),
          ),
        ),
      );
    }

【问题讨论】：

标签： flutter dart

【解决方案1】：

像这样更改您的列表小部件

 final CatWidget = <Widget>[];

我检查了代码，它工作正常，只需像这样定义小部件，我在小部件构建中的 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'),
                )),
              ),
            ),
          ),
        ),
      );
    }

【讨论】：