Блог

Главная - Вопросы по программированию - Элементы в GridView потеряли свое состояние, когда они находятся вне области просмотра

Элементы в GridView потеряли свое состояние, когда они находятся вне области просмотра

#flutter #gridview #widget #flutter-layout #flutter-animation

#flutter #gridview #виджет #flutter-layout #flutter-анимация

Вопрос:

Я новичок в flutter. Я хочу создать сетку размером 8×2 с кнопкой (пользовательский виджет кнопки).Но элементы в GridView потеряли свое состояние, когда они находятся вне области просмотра.Я также попробовал SilverGrid.Там также та же проблема.Вот мой фрагмент кода. Выбранный статус звуковой карты теряется, когда я прокручиваю вниз и возвращаюсь к началу звуковой карты.Я приложил образец изображения здесь.

     import 'package:flutter/material.dart';
    import 'package:relax/constants.dart';
    import 'package:relax/soundcard.dart';
    
    class Index extends StatefulWidget {
    @override
    _IndexState createState() => _IndexState();
    }
    class _IndexState extends State<Index> {
     bool playState = false;
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Color(0xFF55b9f3),
        child: GridView.count(
          primary: false,
    padding: const EdgeInsets.all(20),
          crossAxisSpacing: 40,
          mainAxisSpacing: 40,
          crossAxisCount: 2,
          children: <Widget>[
            SoundCard(
              assetName: 'rain',
              
            ),
            SoundCard(
              assetName: 'summernight',
              
            ),
            SoundCard(
              assetName: 'water',
              
            ),
            SoundCard(
              assetName: 'wind',
              
            ),
            SoundCard(
              assetName: 'thunderstorm',
              
            ),
            SoundCard(
              assetName: 'forest',
             
            ),
            SoundCard(
              assetName: 'leaves',
              
            ),
            SoundCard(
              assetName: 'fireplace',
              
            ),
            SoundCard(
              assetName: 'waterstream',
            
            ),
            SoundCard(
              assetName: 'seaside',
             
            ),
            SoundCard(
              assetName: 'brownnoise',
              
            ),
            SoundCard(
              assetName: 'coffeeshop',
             
            ),
            SoundCard(
              assetName: 'fan',
              
            ),
            SoundCard(
              assetName: 'pinknoise',
              
            ),
            SoundCard(
              assetName: 'whitenoise',
              
            ),
            SoundCard(
              assetName: 'train',
             
            ),
          ],
        )
      
        );
  }
}

Звуковая карта похожа на кнопку.Когда я прокручиваю и возвращаюсь к началу, выбранное состояние кнопки звуковой карты теряется из выбранного состояния.Может ли кто-нибудь помочь мне в этом?

Комментарии:

1. можете ли вы показать нам код, в котором при нажатии кнопки он выбирается?

2. Спасибо !, Я решил это, добавив `AutomaticKeepAliveClientMixin` с моим виджетом звуковой карты

3. @ARUNBALAJI пожалуйста, добавьте свое решение в качестве ответа и примите его, чтобы люди с похожими проблемами могли его найти.

Ответ №1:

Чтобы гарантировать, что состояние сохраняется даже после перехода с экрана, добавьте в состояние mixin с именем AutomaticKeepAliveClientMixin и переопределите средство получения wantKeepAlive как таковое:

 class _IndexState extends State<Index> with AutomaticKeepAliveClientMixin
{
    @override
    bool get wantKeepAlive => true;
    ...
}

Ответ №2:

Я решаю вышеуказанную проблему, добавляя AutomaticKeepAliveClientMixin свою звуковую карту. Вкратце, когда мы разрабатываем наши приложения, наш дизайн обычно имеет начальный экран с несколькими вкладками или просмотр страниц. Проблема, с которой мы сталкиваемся, заключается в том, что при смене страниц состояние предыдущей страницы будет потеряно. Это было неудобно.

Это решается приведенным ниже методом.

 class Page extends StatefulWidget {
  final String title;
  const Page({
    Key key,
    @required this.title,
  }) : super(key: key);
  @override
  _PageState createState() => _PageState();
}
class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {
  int _value = 0;
  @override
  Widget build(BuildContext context) {
    super.build(context); /// Remember to add this line!!!
   ...
   ...
  @override
  bool get wantKeepAlive => true;
}

Не забудьте добавить «super.build (контекст); »

Метки: