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

一尘不染

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

flutter

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

Ty很多<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
            ),
          ),
        ],
      ),
    );
  }
}

阅读 253

2020-08-13

共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,
      ),
    );
  }
}

2020-08-13