GridView 中的项目在离开视口时会丢失其状态

Question

我是 flutter 的初学者。我想创建一个带有按钮（自定义按钮小部件）的 8x2 gridview。但是当它们离开 viewport.I 时，GridView 中的项目丢失了它的状态也尝试了 SilverGrid.There 也相同 proplem.Here是我的代码片段。当我向下滚动并且 return 到 SoundCard.I 顶部包含示例图片 here.

时，声卡的选定状态丢失了它的状态

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

SoundCard 就像按钮。当我滚动并 return 到顶部时，SoundCard 按钮的选定状态将丢失其选定 state.Can 谁能帮我解决这个问题？

Answer 1

为确保即使在离开屏幕后仍能保持状态，请将名为 AutomaticKeepAliveClientMixin 的 mixin 添加到状态并覆盖 wantKeepAlive getter 这样的：

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

Answer 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(context);”

GridView 中的项目在离开视口时会丢失其状态

Items in GridView lost its state when it when they are out of the viewport

gridview

widget

flutter

flutter-layout

flutter-animation