滚动后如何保持小部件的状态？

Question

我正在编写一个带有 flutter 的应用程序，但我在开发过程中遇到了问题。我正在尝试使用带有自定义小部件的列表视图，它有一个最喜欢的图标，代表您喜欢它的产品。我在构造函数上传递了一个布尔值来设置一个变量来控制图标是满的还是空的。当我点击它时，我改变了它的状态。它工作得很棒，但是当我再次向下和向上滚动时，它会失去最新状态，returns 到初始状态。你知道滚动后如何保持状态吗？

很多 <3

这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index){
          return new LikeClass(liked: false);
        },
      ),
    );
  }
}

class LikeClass extends StatefulWidget {
  final bool liked;//i want this variable controls how heart looks like

  LikeClass({this.liked});

  @override
  _LikeClassState createState() => new _LikeClassState();
}

class _LikeClassState extends State<LikeClass> {
  bool liked;
  @override
  void initState() {
    liked=widget.liked;
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Column(
        children: <Widget>[
          new GestureDetector(
            onTap:((){
              setState(() {
                liked=!liked;
                //widget.liked=!widget.liked;
              });
            }),
            child: new Icon(Icons.favorite, size: 24.0,
              color: liked?Colors.red:Colors.grey,
              //color: widget.liked?Colors.red:Colors.grey,//final method to control the appearance
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

如果 ListView 中的项目不多，您可以将其替换为 SingleChildScrollview 和 Column，这样小部件就不会被回收。但听起来你应该有一个项目列表，其中每个项目都有一个 isFavourite 属性，并根据属性控制图标。切换收藏夹时不要忘记 setState。

Answer 2

您必须将状态（喜欢与否）存储在父窗口小部件中。 ListView.builder 小部件按需创建和销毁项目，并且在销毁项目时丢弃状态。这意味着列表项应该始终是无状态小部件。

这是一个交互性的例子：

class Item {
  Item({this.name, this.isFavorite});

  String name;
  bool isFavorite;
}

class MyList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyListState();
}

class MyListState extends State<MyList> {
  List<Item> items;

  @override
  void initState() {
    super.initState();

    // Generate example items
    items = List<Item>();
    for (int i = 0; i < 100; i++) {
      items.add(Item(
        name: 'Item $i',
        isFavorite: false,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListItem(
          items[index],
          () => onFavoritePressed(index),
        );
      },
    );
  }

  onFavoritePressed(int index) {
    final item = items[index];
    setState(() {
      item.isFavorite = !item.isFavorite;
    });
  }
}

class ListItem extends StatelessWidget {
  ListItem(this.item, this.onFavoritePressed);

  final Item item;
  final VoidCallback onFavoritePressed;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(item.name),
      leading: IconButton(
        icon: Icon(item.isFavorite ? Icons.favorite : Icons.favorite_border),
        onPressed: onFavoritePressed,
      ),
    );
  }
}

Answer 3

您正在做的事情的一个问题是，当您更改 liked 变量时，它存在于 Widget 状态，而不存在于其他任何地方。 ListView 项目共享小部件，因此无论数据中有多少实际项目，一次只创建比可见的多一点。

作为解决方案，将项目列表保留为主页状态的一部分，您可以使用真实数据填充和刷新。然后，您的每个 LikedClass 实例都持有对实际列表项之一的引用并操纵其数据。这样做只会在点击 LikedClass 而不是整个 ListView.

时重绘它

class MyData {
  bool liked = false;
}

class _MyHomePageState extends State<MyHomePage> {
  List<MyData> list;
  _MyHomePageState() {
    // TODO use real data.
    list = List<MyData>();
    for (var i = 0; i < 100; i++) list.add(MyData());
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          return new LikeClass(list[index]);
        },
      ),
    );
  }
}

class LikeClass extends StatefulWidget {
  final MyData data;

  LikeClass(this.data);

  @override
  _LikeClassState createState() => new _LikeClassState();
}

class _LikeClassState extends State<LikeClass> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Column(
        children: <Widget>[
          new GestureDetector(
            onTap: (() {
              setState(() {
                widget.data.liked = !widget.data.liked;
              });
            }),
            child: new Icon(
              Icons.favorite,
              size: 24.0,
              color: widget.data.liked ? Colors.red : Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 4

ListView.builder & GridView.builder 按需制作物品。这意味着，他们构建项目小部件并在超过 cacheExtent.

时销毁它们

所以你不能在那个项目小部件中保留任何短暂的状态。（所以大多数时候项目小部件是无状态的，但是当你需要使用 keepAlive 你使用有状态的项目小部件。

在这种情况下，您必须将您的状态保存在父级中 widget.So 我认为您可以使用的最佳选择是 状态管理方法。（如提供程序包或作用域模型）。

下面 link 有类似的示例，我在 flutter.dev

中看到

Link for Example

希望这个回答对您有所帮助

Answer 5

其他答案更适合您的情况，但这是一个替代方案，如果您只想在滚动期间保持几个元素处于活动状态，则可以使用它。在这种情况下，您可以将 AutomaticKeepAliveClientMixin 与 keepAlive 结合使用。

class Foo extends StatefulWidget {
  @override
  FooState createState() {
    return new FooState();
  }
}

class FooState extends State<Foo> with AutomaticKeepAliveClientMixin {
  bool shouldBeKeptAlive = false;
  @override
  Widget build(BuildContext context) {
    super.build(context);

    shouldBeKeptAlive = someCondition();
    return Container(

    );
  }

  @override
  bool get wantKeepAlive => shouldBeKeptAlive;
}

滚动后如何保持小部件的状态？

how to keep the state of my widgets after scrolling?

flutter

flutter-layout