Question

我在有状态的小部件内有一个listview.builder，我为该项目（ImageCard）制作了一个单独的有状态的小部件。在ImageCard小部件内，当我单击它时，我有一个喜欢的按钮，它的颜色更改为红色（喜欢），灰色（喜欢）。问题是当我向下滚动并返回时，颜色始终为灰色，这意味着未保存任何状态！如何通知父状态小部件保持状态？

父状态控件

@override
  Widget build(BuildContext context) {
    return _buildListView(models, _scrollController);
  }

  Widget _buildListView(
      List<PhotoModel> models, ScrollController scrollController) {
    return Container(
        child: ListView.builder(
            controller: scrollController,
            itemCount: models.length,
            itemBuilder: (context, int index) {
              if (index == models.length - 1) {
                return SpinKitThreeBounce(
                  color: Colors.purple,
                  size: 30.0,
                );
              } else {
                return ImageCard(
                    models[index].regularPhotoUrl,
                    models[index].mediumProfilePhotoUrl,
                    models[index].name,
                    models[index].color);
              }
            }));
  }

子状态小工具

class ImageCard extends StatefulWidget {
  final String imageUrl, userProfilePic, userName, color;

  ImageCard(this.imageUrl, this.userProfilePic, this.userName, this.color);

  @override
  _ImageCardState createState() => _ImageCardState();
}

class _ImageCardState extends State<ImageCard> {
  bool isLiked = false, isFollowing = false;

  @override
  Widget build(BuildContext context) {
    return new Card( ....

void _onLikedBtnClicked() {
    setState(() {
      if (isLiked)
        isLiked = false;
      else {
        isLiked = true;
      }
    });
  }

Answer 1

Flutter将自动处理移出屏幕的小部件，当它们重新出现时，将对其进行重建而不是恢复。

因此，通常的做法是将状态保存在一个高级小部件中，该小部件至少包含业务逻辑的一个完整方面，并且不会在短期内处置。然后将状态更改映射到子窗口小部件。

对于您的特定情况，一个简单的解决方案是：将信息存储在父窗口小部件中，然后将其映射到父窗口小部件的构建功能内的ImageCard。

向模型添加isliked，isfollowing属性，然后

class SomeParentState extends State<SomeParent> {
  List<Model> models;

  //.......

  @override
  Widget build(BuildContext context) {
    return _buildListView(models, _scrollController);
  }

  Widget _buildListView(List<PhotoModel> models,
      ScrollController scrollController) {
    return Container(
        child: ListView.builder(
            controller: scrollController,
            itemCount: models.length,
            itemBuilder: (context, int index) {
              if (index == models.length - 1) {
                return SpinKitThreeBounce(
                  color: Colors.purple,
                  size: 30.0,
                );
              } else {
                return ImageCard(
                  models[index].regularPhotoUrl,
                  models[index].mediumProfilePhotoUrl,
                  models[index].name,
                  models[index].color,
                  models[index].isLiked,
                  models[index].isFollowing,
                      () {
                    setState(() {
                      models[index].isLiked = !models[index].isLiked;
                    });
                  },
                      () {
                    setState(() {
                      models[index].isFollowing = !models[index].isFollowing;
                    });
                  },
                );
              }
            }));
  }
}


class ImageCard extends StatelessWidget{

  ImageCard(
      //...,
      this.isLiked,
      this.isFollowing,
      this.likeBtnClickedListener,
      this.followBtnClickedListener,
      )
  //...
  Widget build(BuildContext context){
    return Card(
      //.......
      IconButton(
        onPressed: likeBtnClickedListener,
      ),
      IconButton(
        onPressed: followBtnClickedListener,
      ),
    )
  }
}

这应该基本上可以解决您的问题。无论如何，通过这种方法可以更轻松地访问和同步子窗口小部件中的数据。

如果发现使子窗口小部件保持活动状态更加容易，则可以阅读AutomaticKeepAliveClientMixin的文档。当它移出视线时，它将停止扑灭杀死该小部件。但这有引起内存泄漏的风险。

Answer 2

要维护ListView内部小部件的状态，您需要AutomaticKeepAlive或AutomaticKeepAliveMixin（用于自定义小部件）

这将确保State实例在离开屏幕时不会被破坏

ListView(
  children: [
    // Not kept alive
    Text('Hello World'),
    // kept alive
    AutomaticKeepAlive(
     child: Text("Hello World"),
    ),
  ]
),

Answer 3

那您应该分开保存您的状态。您可以制作一个List<bool>并在其中为每个列表项提供一个值。无论如何，您可能都想保存或使用数据，那么这种机制将毫无用处。

Flutter：子状态小部件的维护状态

3 个答案: