flutter - 为什么我的StatefulWidget丢失状态？

我正在构建类似火种的刷卡机制，其中在Stack窗口小部件中有一个卡片小部件列表。第一张卡包裹在Dismissible小部件内，该部件在关闭时会关闭顶部的卡，并在底部添加新的卡。

我的问题是，当第一张卡片被撤消而第二张卡片成为第一张卡片时，该卡片暂时被处置，并且initState被再次调用

但是，正如Linus Torvalds曾经说过的，


“谈话很便宜，请告诉我代码”


所以我举一个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(color: Colors.white, child: CardStack()),
    );
  }
}

class CardStack extends StatefulWidget {
  @override
  _CardStackState createState() => _CardStackState();
}

class _CardStackState extends State<CardStack> {
  final List<String> _postIds = ["1", "2", "3"];
  int _nextId = 4;

  _updatePosts(DismissDirection dir) {
    setState(() {
      _postIds.removeAt(0);
      _postIds.add((_nextId++).toString());
    });
  }

  List<Widget> _buildCards() {
    List<Widget> cards = [];
    for (int i = 0; i < _postIds.length; ++i) {
      if (i == 0) {
        cards.insert(
            0,
            Dismissible(
              key: UniqueKey(),
              onDismissed: _updatePosts,
              child: Card(key: ValueKey(_postIds[i]), postId: _postIds[i]),
            ));
      } else {
        cards.insert(0, Card(key: ValueKey(_postIds[i]), postId: _postIds[i]));
      }
    }
    return cards;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: _buildCards(),
    );
  }
}

class Card extends StatefulWidget {
  Card({Key key, this.postId}) : super(key: key);

  final String postId;

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

class _CardState extends State<Card> {
  @override
  void initState() {
    super.initState();
    print("Init state card with id ${widget.postId}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      color: Colors.blueAccent,
      child: Center(
        child: Text(widget.postId),
      ),
    );
  }
}

如果我运行它记录

I/flutter (26740): Init state card with id 3
I/flutter (26740): Init state card with id 2
I/flutter (26740): Init state card with id 1
// swipe
I/flutter (26740): Init state card with id 4
I/flutter (26740): Init state card with id 2 <- unwanted rebuild

我认为第一张卡片的重建是由于现在包裹在Dismissible小部件内，所以flutter不知道如何重用基础的Card小部件。

有没有办法防止这种不必要的重建呢？

最佳答案

问题是，StatefulWidget的位置在小部件树中正在更改。

可能是您的StatefulWidget有条件地包装在特定的小部件内，这样您的小部件树在以下之间变化：

SomeWidget
  MyStatefulWidget

和：

SomeWidget
  AnotherWidget
    MyStatefulWidget

默认情况下，Flutter不会理解MyStatefulWidget在小部件树内移动。

相反，它会认为先前的MyStatefulWidget已被删除，而新的dispose与原始的完全不相关。

这导致在先前的State上调用initState，而在新的State上调用ListView。



为防止这种情况，您有一些解决方案。

不要有条件地将小部件包装在另一个小部件中

如果可以的话，这是最好的解决方案：
重构您的布局，使小部件树始终相同。

例如，如果您只希望将GlobalKey中的第一个窗口小部件禁用，请改为：

ListView.builder(
  itemBuilder: (_, index) {
    final child = MyStatefulWidget();
    if (index == 0) {
      return Dismissible(key: ValueKey(index), onDismissed: ..., child: child);
    }
  }
)

做：

ListView.builder(
  itemBuilder: (_, index) {
    return Dismissible(
      key: ValueKey(someValue),
      onDismissed: ...,
      confirmDismiss: (_) async => index == 0, // only first item can be dismissed
      child: MyStatefulWidget();
    );
  }
)

这样，树不会有条件地更改，但是行为仍然是有条件的

使用GlobalKey

不太理想，因为成本更高，但更灵活。

您可以使用SomeTree告诉Flutter，特定的小部件可以从一个位置移动到另一个位置。

这样，我们将能够编写：

Widget build(BuildContext context) {
  if (something) {
    return SomeTree(
      child: MyStatefulWidget(key: GlobalObjectKey('my widget'));
    );
  } else {
    return AnotherTree(
      child: MyStatefulWidget(key: GlobalObjectKey('my widget'));
    );
  }
}

这样，从AnotherTree转换为MyStatefulWidget时，小部件将保留其状态。

提醒一下，请尽可能避免使用。这是相对昂贵的。

关于flutter - 为什么我的StatefulWidget丢失状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59338209/