Question

我正在用杂乱的代码编写应用程序，我在开发中遇到了问题。我正在尝试使用带有自定义小部件的listview，它具有一个喜欢的图标，代表您喜欢它的产品。我在构造函数上传递了一个布尔值，以设置一个控制图标是完整还是空的变量。当我单击它时，它会更改其状态。它的效果很棒，但是当我上下滚动时，它会丢失最新状态并返回到初始状态。您知道滚动后如何保持状态吗？

要很多<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.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 2

ListView.builder和GridView.builder使项目随需应变。这意味着，他们构造商品小部件并在它们超过cacheExtent时销毁它们。

因此您不能在该项目小部件内保留任何短暂状态。（因此，大多数时间项目小部件都是无状态的，但是当您需要使用keepAlive时，请使用有状态的项目小部件。

在这种情况下，您必须将状态保留在父小部件中。因此，我认为您可以使用的最佳选择是状态管理方法。（例如提供程序包或作用域模型）。

下面的链接有类似的示例，我在flutter.dev中看到

Link for Example

希望这个答案对您有帮助

Answer 3

如果ListView中没有很多物品，则可以用SingleChildScrollview和Column替换它，以便不回收这些小部件。但是听起来您应该拥有一个项目列表，其中每个项目都有一个isFavourite属性，并根据该属性控制图标。切换收藏夹时不要忘记setState。

Answer 4

您正在做的一个问题是，当您更改liked变量时，它以Widget状态存在，而在其他任何地方都没有。 ListView个项目共享Widget，因此无论数据中有多少实际项目，一次创建的内容都不会多于其他内容。

对于解决方案，请保留项目列表作为主页状态的一部分，您可以使用真实数据进行填充和刷新。然后，每个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, ), ), ], ), ); } }。

SendKeys

Answer 5

其他答案更适合您的情况，但这是一种替代选择，如果您只想在滚动过程中保持多个元素处于活动状态，则可以使用该答案。在这种情况下，您可以将AutomaticKeepAliveClientMixin与keepAlive一起使用。

> GET /path/to/1234567890/resources
> WebTestClient-Request-Id: [3]
> Accept: [application/json]

No content

< 200 OK OK
< Content-Type: [application/json]

[{"code":"1001","alarms":[{"lanes":["PRIMARY"]},{"lanes":["SECONDARY"]}],"categories":[],"createdOn":1602268418140,"_id":1100}]

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

5 个答案: