Question

重现步骤：向左滑动，切换为红色Tab，然后再次切换为紫色Tab。

什么是：执行复制步骤之后，第一个PageView的{{1}}再次出现在蓝页上。

应该是什么：执行复制步骤之后，第一个Tab的{{1}}仍在绿色页面上。

我在这里想念什么？

PageView

Answer 1

此问题已通过AutomaticKeepAliveMixin解决。我以前用过，但是由于对错误状态的混淆。显然，它必须与包含要keep alive的状态的类混在一起。

Answer 2

我遇到了这个问题，找到了一个更简单的方法，那就是创建一个变量，例如在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);
              })),
    );
  }
}

Flutter：尽管keepPage：true，PageController仍不保留页面

2 个答案: