как сохранить состояние моих виджетов после прокрутки?

Question

Я пишу приложение с флаттером, и у меня проблемы с разработкой. Я пытаюсь создать список с пользовательским виджетом, на котором есть любимая иконка, обозначающая, что вам понравился продукт. Я передаю логическое значение в конструкторе, чтобы установить переменные, которые контролируют, являются ли значки полными или пустыми. Когда я нажимаю на него, я меняю его состояние. Он работает потрясающе, но когда я прокручиваю вверх и вниз, он теряет последнее состояние и возвращается в исходное состояние. Вы знаете, как сохранить состояние после прокрутки?

Ты много <3 </p>

Вот мой код:

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

Проблема с тем, что вы делаете, заключается в том, что при изменении переменной liked она существует в состоянии виджета и больше нигде. 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 3

Если в ListView у вас не так много элементов, вы можете заменить их на SingleChildScrollview и Column, чтобы виджеты не были переработаны. Но, похоже, у вас должен быть список элементов, каждый из которых имеет свойство isFavourite, и управление значком на основе этого свойства. Не забудьте setState при переключении любимых.