インデックスの変更でフラッターカラーが変化しない

Dec 01 2020

容器のタップの色を変えたいのですが。だから私は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'),
                )),
              ),
            ),
          ),
        ),
      );
    }

回答

3 UmaizKhan Dec 01 2020 at 09:13

このようにリストウィジェットを変更します

 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'),
                )),
              ),
            ),
          ),
        ),
      );
    }