Как сохранить состояние на свитке во флаттере?

Question

У меня есть простая сетка, которая занимает больше места, чем реальное состояние экрана, и ее можно прокручивать вверх и вниз.

В каждой ячейке есть метод onTap(), который меняет цвет ячейки.

Проблема в том, что после того, как я прокручиваю измененную ячейку вне поля зрения, состояние не сохраняется.

Есть идеи?

class GridWidget extends StatefulWidget {
  @override
  _GridWidgetState createState() => new _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  @override
  Widget build(BuildContext context) {
    Color cellColor = Colors.white;

    return new GridView.count(
      crossAxisCount: 10,
      children: new List.generate(100, (index) {
        return new CellWidget(
          index: index,
          color: cellColor,
          text: new Text(index.toString()),
        );
      }),
    );
  }
}

CellWidget

...
class _CellWidgetState extends State<CellWidget> {
  Color cellColor = Colors.white;
  Text cellText = new Text('white');

  @override
  void initState() {
    super.initState();
    cellColor = widget.color;
    cellText = widget.text;
  }

  _changeCell(index) {
    setState(() {
      cellColor = Colors.lightBlue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () => _changeCell(widget.index),
      child: new Container(
        width: double.infinity,
        height: double.infinity,
        child: new Center(child: cellText),
      ),
    );
  }
}

Answer 1

Вы можете использовать класс AutomaticKeepAliveClientMixin, чтобы предотвратить удаление ваших предметов при прокрутке. Изменение кода в CellWidget должно решить вашу проблему:

class _CellWidgetState extends State<CellWidget> with AutomaticKeepAliveClientMixin {
  Color cellColor = Colors.white;
  Text cellText = new Text('white');

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    cellColor = widget.color;
    cellText = widget.text;
  }

  _changeCell(index) {
    setState(() {
      cellColor = Colors.lightBlue;
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return new GestureDetector(
      onTap: () => _changeCell(widget.index),
      child: new Container(
        width: double.infinity,
        height: double.infinity,
        child: new Center(child: cellText),
      ),
    );
  }
}

Вот ссылка на документацию: AutomaticKeepAliveClientMixin

Answer 2

в документе Flutter для ListView.builder упомянул, что ListView дети будут строить по требованию, когда вы будете прокручивать ... я думаю, что такая же ситуация происходит с GridView.count