Flutter 颤振多页视图和控制器

我有两个浏览页面：

• pageview0有3个页面：1、2、3
• pageview1有3页：A、B、C

一次只显示一个页面视图，当我按下AppBar上的“切换”按钮时，我想在它们之间切换

我想要的是：

如果我在pageview0 page2并按下开关按钮， 然后我想看看pageview1 A页

但是下面的代码显示了pageview1第B页（具有相同索引的页面）。 我还尝试使用两个页面控制器而不是一个，但行为是一样的。 当有多个页面浏览并在它们之间切换时，如何控制要显示的页面

我的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> pageview0 = ["1", "2", "3"];
  List<String> pageview1 = ["A", "B", "C"];
  int pageViewIndex = 0;

  // Try single controller.
  PageController controller;
  // Try multiple controller.
  List<PageController> controllers;

  @override
  void initState() {
    super.initState();
    controller = PageController(initialPage: 0);  // pageview0 and pageview1
    controllers = [];
    controllers.add(PageController(initialPage: 0));  // pageview0
    controllers.add(PageController(initialPage: 0));  // pageview1
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.navigate_next), onPressed: () {
            setState(() {
              if (pageViewIndex == 0) pageViewIndex = 1;
              else pageViewIndex = 0;
            });
          },)
        ],
      ),
      body: PageView.builder(
        itemBuilder: (context, page) {
          if (pageViewIndex == 0) return Center(child: Text(pageview0[page]));
          else return Center(child: Text(pageview1[page]));
        },
        itemCount: 3,

        // single controller
//        controller: controller,

        // Multiple controller
        controller: (pageViewIndex == 0)? controllers[0] : controllers[1],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回资料app（主页：MyHomePage（））；
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列表页面视图0=[“1”、“2”、“3”]；
列表页面视图1=[“A”、“B”、“C”]；
int pageViewIndex=0；
//试试单控制器。
页面控制器；
//尝试多控制器。
列出控制器；
@凌驾
void initState（）{
super.initState（）；
控制器=页面控制器（初始页面：0）；//页面视图0和页面视图1
控制器=[]；
controllers.add（PageController（initialPage:0））；//pageview0
controllers.add（PageController（initialPage:0））；//pageview1
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
行动：[
图标按钮（图标：常量图标（图标。导航下一步），ON按下：（）{
设置状态（）{
如果（pageViewIndex==0）pageViewIndex=1；
else pageViewIndex=0；
});
},)
],
),
正文：PageView.builder(
itemBuilder：（上下文，第页）{
如果（pageViewIndex==0）返回中心（子项：文本（pageview0[page]）；
else返回中心（子项：文本（pageview1[第页]）；
},
物品计数：3，
//单控制器
//控制器：控制器，
//多控制器
控制器：（pageViewIndex==0）？控制器[0]：控制器[1]，
),
);
}
}

根据Taufik的评论，我改为IndexedStack，效果很好

以下是新代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> pageview0 = ["1", "2", "3"];
  List<String> pageview1 = ["A", "B", "C"];
  int pageViewIndex = 0;

  // Try single controller.
  PageController controller;
  // Try multiple controller.
  List<PageController> controllers;

  @override
  void initState() {
    super.initState();
    controller = PageController(initialPage: 0);  // pageview0 and pageview1
    controllers = [];
    controllers.add(PageController(initialPage: 0));  // pageview0
    controllers.add(PageController(initialPage: 0));  // pageview1
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.navigate_next), onPressed: () {
            setState(() {
              if (pageViewIndex == 0) pageViewIndex = 1;
              else pageViewIndex = 0;
            });
          },)
        ],
      ),
      body: IndexedStack(
        index: pageViewIndex,
        children: <Widget> [
          PageView.builder(
            itemBuilder: (context, page) {
              return Center(child: Text(pageview0[page]));
            },
            itemCount: 3,
            controller: controllers[0],
          ),
          PageView.builder(
            itemBuilder: (context, page) {
              return Center(child: Text(pageview1[page]));
            },
            itemCount: 3,
            controller: controllers[1],
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回资料app（主页：MyHomePage（））；
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列表页面视图0=[“1”、“2”、“3”]；
列表页面视图1=[“A”、“B”、“C”]；
int pageViewIndex=0；
//试试单控制器。
页面控制器；
//尝试多控制器。
列出控制器；
@凌驾
void initState（）{
super.initState（）；
控制器=页面控制器（初始页面：0）；//页面视图0和页面视图1
控制器=[]；
controllers.add（PageController（initialPage:0））；//pageview0
controllers.add（PageController（initialPage:0））；//pageview1
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
行动：[
图标按钮（图标：常量图标（图标。导航下一步），ON按下：（）{
设置状态（）{
如果（pageViewIndex==0）pageViewIndex=1；
else pageViewIndex=0；
});
},)
],
),
正文：IndexedStack(
索引：pageViewIndex，
儿童：[
PageView.builder(
itemBuilder：（上下文，第页）{
返回中心（子项：文本（pageview0[第页]）；
},
物品计数：3，
控制器：控制器[0]，
),
PageView.builder(
itemBuilder：（上下文，第页）{
返回中心（子项：文本（pageview1[第页]）；
},
物品计数：3，
控制器：控制器[1]，
),
],
),
);
}
}

也许你真正需要的只是一个

索引堆栈

：，你可以在这里看到如何使用它：