Dart 颤振：setState（）工作不正常

我正在制作一个新的有状态小部件，它将根据所选的选项显示listview，这里是1和2。点击GestureDetector后，

index

的值会发生变化，文本的字体大小和颜色也会发生变化。但是，包含

页面[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]
          ),
        ]
      )
    );
  }
}

@覆盖
状态createState（）{
//TODO:实现createState
返回MatchStatsState（）；
}
}
类MatchStatsState扩展状态{
列表页=[
列表视图(
滚动方向：轴水平，
儿童：[
击球状态视图（CSK击球），
BowlingStatsView（cskBowling），
],
),
列表视图(
滚动方向：轴水平，
儿童：[
BattingStatsView（kxipBatting），
BowlingStatsView（kxipBowling）
],
),   
];
Color activeColor=Colors.yellow；
Color=Colors.white；
num activeFontSize=20.0；
num inactiveFontSize=15.0；
int指数=0；
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
返回容器(
高度：MediaQuery.of（context）.size.height*0.4，
宽度：MediaQuery.of（context）.size.width*0.95，
子：列(
儿童：[
容器(
高度：MediaQuery.of（上下文）.size.height*0.05，
宽度：MediaQuery.of（context）.size.width*0.95，
孩子：排(
儿童：[
手势检测器(
onTap:（）{
设置状态（）{
指数=0；
});
},
子：容器(
宽度：MediaQuery.of（context）.size.width*0.45，
子项：文本（“一”，样式：TextStyle（颜色：索引==0？activeColor:inactiveColor，fontSize:index==0？activeFontSize:inactiveFontSize）），
),
),
手势检测器(
onTap:（）{
设置状态（）{
指数=1；
});
},
子：容器(
宽度：MediaQuery.of（context）.size.width*0.45，
子项：文本（“两个”，样式：TextStyle（颜色：index==1？activeColor:inactiveColor，fontSize:index==1？activeFontSize:inactiveFontSize）），
),
),
],
),
),
容器(
高度：MediaQuery.of（上下文）.size.height*0.35，
宽度：MediaQuery.of（context）.size.width*0.95，
子：页[索引]
),
]
)
);
}
}

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

尝试以下方法：

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

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];
  }

---

记住覆盖initState。

我认为问题的原因是元素树无法识别小部件树中所做的更改，因此您可以向包含页面[index]或 您可以这样做：

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

不要在小部件树中使用容器，而是使用一个每次ui重新呈现时都会调用的函数。

---

我希望这能有所帮助

您是否在State类中添加了initState（）？我用这段代码进行了尝试，对initState进行了重写，在initState中初始化了索引，但不幸的是，我得到了相同的结果。我已经更新了代码，请尝试一下。您以某种方式强制重新构建小部件，只有这样容器才会重新构建自身。似乎在您的代码中，小部件并没有真正重建！我怎样才能强制重建？GetPropertWidget（）给出的结果与以前相同。您尝试强制的是刷新列表。尝试返回初始代码，在那里您将列表保存为属性并保存在setState（）{pages=list.from（pages）}

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