인덱스 변경시 Flutter 색상이 변경되지 않음

Dec 01 2020

용기 탭에서 색상을 변경하고 싶습니다. 그래서 for loop는 인덱스가 같을 때 컨테이너를 표시하고 색상을 변경합니다. 그러나 문제는 인덱스가 변하고 있지만 색상은 변하지 않는다는 것입니다. 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'),
                )),
              ),
            ),
          ),
        ),
      );
    }