Question

我正在制作一个新的有状态窗口小部件，该窗口小部件将根据所选选项显示一个列表视图，此处为“一”和“两个”。轻按GestureDetector后，index的值就会更改，文本的字体大小和颜色也会更改。但是带有pages[index]的容器不会重建

我不知道这是怎么回事，因为该列中的一个容器会重建，而另一个不会。

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MatchStatsState();
  }
}

class MatchStatsState extends State<MatchStats>{
  List<Widget> pages = [
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        BattingStatsView(CskBatting),
        BowlingStatsView(cskBowling),
      ],
    ),
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        BattingStatsView(kxipBatting),
        BowlingStatsView(kxipBowling)
      ],
    ),   
  ];
  Color activeColor = Colors.yellow;
  Color inactiveColor = Colors.white;
  num activeFontSize = 20.0;
  num inactiveFontSize = 15.0;
  int index = 0;

  @override
  Widget build(BuildContext context) {


    // TODO: implement build
    return Container(
      height: MediaQuery.of(context).size.height*0.4,
      width: MediaQuery.of(context).size.width*0.95,
      child: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height*0.05,
            width: MediaQuery.of(context).size.width*0.95,
            child: Row(
              children: <Widget>[
                GestureDetector(
                    onTap: (){
                      setState(() {
                        index = 0;
                      });
                    },
                    child: Container(
                    width: MediaQuery.of(context).size.width*0.45,
                    child: Text("ONE",style: TextStyle(color: index == 0?activeColor:inactiveColor,fontSize: index == 0? activeFontSize: inactiveFontSize)),
                  ),
                ),
                GestureDetector(
                    onTap: (){
                      setState(() {
                        index = 1;
                      });
                    },
                    child: Container(
                    width: MediaQuery.of(context).size.width*0.45,
                    child: Text("TWO",style: TextStyle(color: index == 1?activeColor:inactiveColor, fontSize: index == 1? activeFontSize: inactiveFontSize)),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height*0.35,
            width: MediaQuery.of(context).size.width*0.95,
            child: pages[index]
          ),
        ]
      )
    );
  }
}

我希望在索引值更改时重建列中的第二个容器，我该如何实现？

Answer 1

尝试一下：

创建一个返回列表小部件的方法，如下所示：

List<Widget> buildPages() {
    return [
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          BattingStatsView(CskBatting),
          BowlingStatsView(cskBowling),
        ],
      ),
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          BattingStatsView(kxipBatting),
          BowlingStatsView(kxipBowling)
        ],
      ),
    ];
  }

Widget getProperWidget(int index) {
    return buildPages()[index];
  }

比您的列容器：

Container(
            height: MediaQuery.of(context).size.height*0.35,
            width: MediaQuery.of(context).size.width*0.95,
            child: getproperWidget(index)
          ),

记住要覆盖initState。

Answer 2

我认为导致此问题的原因是元素树无法识别在小部件树中所做的更改，因此您可以将Key添加到保存pages [index]的容器中，或者您可以执行以下操作：

    Widget getWidget(int index){
  return Container(
    child:pages[index],
  );
}

而不是在小部件树中使用Container，而是使用每次ui re render时都会调用的函数。希望对您有帮助

Flutter：setState（）无法正常工作

2 个答案: