Flutter tabview刷新问题

Question

我的 main.dart 中有一个 TabBarView，每个选项卡都有一个 class 来显示内容（它是列表视图对象），当我在选项卡之间切换时，列表视图页面每次都会刷新，是tabbarview 正常吗？我不希望每次在选项卡之间切换时它都会刷新。

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

    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

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

更新：

使用 AutomaticKeepAliveClientMixin 可以解决此问题，您可以在此 article.

中了解更多信息

Answer 2

MahMoos 是对的，但是最好在这里举个例子...

使用 AutomaticKeepAliveClientMixin
覆盖 wantKeepAlive 属性和 return 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 3

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

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) { 

 }
}

Flutter tabview刷新问题

Flutter tabview refresh issue

tabs

tabview

dart

flutter