如何防止多个 StatefulWidgets (ImageSliders) 覆盖彼此的内容？

Question

所以我试图在同一个页面/卡片上放置三个 ImageSlider。 它们非常相似，这就是为什么我创建了一个类并只是想传递变化的值。

这并没有按预期工作：现在只有最后一次调用的滑块的三倍。

我认为它可能与被覆盖并尝试传递唯一密钥的状态相同。

虽然没有改变。

滑块：

List<String> _imgList;
List<String> _nameList;
String _description;

class ShopListSlider extends StatefulWidget {
  ShopListSlider(
      {Key key,
      String description,
      @required List<String> imgList,
      @required List<String> nameList})
      : super(key: key) {
    _imgList = imgList;
    _nameList = nameList;
    _description = description;
  }

  @override
  _ShopListSliderState createState() => _ShopListSliderState();
}

class _ShopListSliderState extends State<ShopListSlider> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(...);
 }
}

调用滑块的小部件内容：

child: Column(children: [
          SizedBox(height: 50),
          ShopListSlider(
              key: UniqueKey(),
              description: "Restaurants in Deiner Nähe",
              imgList: imgListNear,
              nameList: nameListNear),
          SizedBox(height: 50),
          ShopListSlider(
              key: UniqueKey(),
              description: "Beliebte Restaurants",
              imgList: imgListBest,
              nameList: nameListBest),
          SizedBox(height: 50),
          ShopListSlider(
              key: UniqueKey(),
              description: "Deine Favoriten",
              imgList: imgListFavorites,
              nameList: nameListFavorites),
        ]),

Answer 1

没有任何键也可以正常工作。

问题是你的类变量不在类里面，它们是包级别的，这基本上意味着所有的小部件都是无状态的，共享一些全局状态。

只需在 State 内移动这些自己的，然后删除这些键：

class _ShopListSliderState extends State<ShopListSlider> {
   List<String> _imgList;
   List<String> _nameList;
   String _description;

Fwiw，像这样扔一个 UniqueKey() 将强制每一个 build() 重新构建一个小部件，无论它是否被更改，这并不是你真正想要的。