Flutter tabview刷新问题

Question

我的 main.dart 中有一个 TabBarView，每个选项卡都有一个显示内容的类（它是 listview 对象），当我在选项卡之间移动时，listview 页面每次都会刷新，tabbarview 是否正常？我不希望每次在标签之间切换时它都会刷新。

是我班的问题吗？如何解决这个问题？代码是这样的。

    class ListWidget extends StatefulWidget {
  final catID;

  ListWidget(this.catID);


  _ListWidgetState createState() => new _ListWidgetState(catID);
}

class _ListWidgetState extends State<ListWidget> {

  var catID;

  void initState() {
    super.initState();
    _fetchListData();
  }

  @override

  Widget build(BuildContext context) {
    // TODO: implement build

    return new Scaffold(.......
}

Answer 1

MahMoos 是对的，但是这里有一个例子很好......

1. 使用 AutomaticKeepAliveClientMixin
2. 覆盖 wantKeepAlive 属性并返回 true

`

class ListWidget extends StatefulWidget {

  @override
  _ListWidgetState createState() => _ListWidgetState();

}

class _ListWidgetState extends State<ListWidget> with 
                  AutomaticKeepAliveClientMixin<ListWidget>{ // ** here

  @override
  Widget build(BuildContext context) {
    super.build(context)
    return Container();
  }

  @override
  bool get wantKeepAlive => true; // ** and here
}

Answer 2

如果我理解你的话，你会抱怨刷新，因为你需要视图在标签之间移动后保存它们的状态。关于这个主题有一个open issue，并且有办法解决 cmets 中提到的这个问题。

更新：

使用AutomaticKeepAliveClientMixin 可以解决此问题，您可以在此article 中了解更多信息。

Answer 3

如果您希望您的 Tab 视图数据在您更改 Tab 时不刷新，您应该使用

AutomaticKeepAliveClientMixin

class BaseScreen extends StatefulWidget {

  BaseScreen(this.title, this.listener, {Key key}) : super(key: key);

}

class BaseScreenState extends State<BaseScreen> with AutomaticKeepAliveClientMixin {

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
    primaryColor = Theme.of(context).primaryColor;
    textTheme = Theme.of(context).textTheme;
    return Scaffold(
      key: scaffoldKey,
      appBar: getAppBar(),
      body: Container(),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

我遇到了同样的问题，this tutorial 帮助了我。

快乐编码。

Answer 4

为此：在我们的州使用mixin 和AutomaticKeepAliveClientMixin。

并实施：bool get wantKeepAlive => true;

注意：在此示例中，wantKeepAlive => true 用于第一个选项卡，wantKeepAlive => false 用于第二个选项卡。所以你可以很好地看到它是如何工作的。

class ResidentListScreen extends StatefulWidget {
  @override
  _ResidentListScreenState createState() => _ResidentListScreenState();
}

class _ResidentListScreenState extends State<ResidentListScreen> with 
AutomaticKeepAliveClientMixin<ResidentListScreen>{

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
   super.initState();
  }

 @override
 Widget build(BuildContext context) { 

 }
}