dart Flutter:PageController does not keep page despite keepPage:真

wrrgggsh  于 2023-05-11  发布在  Flutter
关注(0)|答案(2)|浏览(135)

复制步骤:向左滑动,切换到红色Tab,然后再次切换到紫色Tab
什么是:执行步骤后再现,第一个TabPageView再次在蓝页。
应该是:在执行步骤以再现之后,第一个TabPageView仍然在绿色页。
我错过了什么?

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();
    }
}
tag5nh1u

tag5nh1u1#

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

6xfqseft

6xfqseft2#

我遇到了这个问题,找到了一个更简单的方法来做到这一点,那就是在statefulwidget类之外创建一个变量,比如int index = 0,这样当创建该小部件时,甚至在创建状态之前就应该有getter和setter,所以当使用Navigator()调用该类时,页面的索引是不变的。参见下面的示例

import 'package:flutter/material.dart';

int value = 0;

class MainpageScreen extends StatefulWidget {
  static const routeName = '/main';
  int getPage() {
    return value;
  }

  void setPage(int page) {
    value = page;
  }

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

class _MainpageScreenState extends State<MainpageScreen> {
  PageController _pageController;
  List<Widget> pages = [
    //...
  ];
  @override
  void initState() {
    _pageController = PageController(
      keepPage: true,
      initialPage: widget.getPage(),
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemCount: 5,
        onPageChanged: (index) => setState(() {
          widget.setPage(index);
          _pageController.animateToPage(index,
              duration: Duration(milliseconds: 300), curve: Curves.ease);
        }),
        itemBuilder: (ctx, index) => pages[index],
        controller: _pageController,
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: widget.getPage(),
          items: [
            //...
          ],
          onTap: (index) => setState(() {
                widget.setPage(index);
                _pageController.jumpToPage(index);
              })),
    );
  }
}

相关问题