首页 > 解决方案 > Flutter:PageController 不保留页面,尽管 keepPage:true

问题描述

重现步骤:向左滑动,切换到红色Tab,然后Tab再次切换到紫色。

什么是:在执行了重现的步骤后,PageView第一个Tab的 又回到了蓝页。

应该是什么:执行步骤重现后,PageView第一个Tab的仍然在绿页。

我在这里想念什么?

import "package:flutter/material.dart";
import "package:flutter/services.dart";

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

class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      SystemChrome.setEnabledSystemUIOverlays([]);
      return MaterialApp(
        home: MyHome()
      );
    }
}

class MyHomeState extends State<MyHome> with TickerProviderStateMixin {
  TabController tabController;
  @override
    void initState() {
      tabController = tabController?? TabController(
        vsync: this,
        length: 2
      );
      super.initState();
    }
  @override
    void dispose() {
      tabController.dispose();
      super.dispose();
    }
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Column(
          children: [
            TabBar(
              controller: tabController,
              tabs: [
                Container(
                  color: Colors.purple,
                  width: 100.0,
                  height: 50.0
                ),
                Container(
                  color: Colors.pink,
                  width: 100.0,
                  height: 50.0
                )
              ]
            ),
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  MyPageView(),
                  MyPageView(),
                ],
              )
            )
          ]
        )
      );
    }
}
class MyHome extends StatefulWidget {
  @override
    State<StatefulWidget> createState() {
      return MyHomeState();
    }
}

class MyPageViewState extends State<MyPageView> {
  PageController pageController;
  @override
    void initState() {
      pageController = pageController?? PageController();
      super.initState();
    }
    @override
      void dispose() {
        pageController.dispose();
        super.dispose();
      }
  @override
    Widget build(BuildContext context) {
      return PageView(
        controller: pageController,
        children: [
          Container(
            color: Colors.blue
          ),
          Container(
            color: Colors.green
          )
        ]
      );
    }
}
class MyPageView extends StatefulWidget {
  @override
    State<StatefulWidget> createState() {
      return MyPageViewState();
    }
}

标签: dartflutterpageviews

解决方案


这是问题解决了AutomaticKeepAliveMixin。我以前用过这个,但由于对错误状态的混淆。它显然必须与包含您想要的状态的类混合在一起keep alive


推荐阅读