Flutter：如何使用 RaisedButton 在 PageView 中导航或使用按钮移动 pageViewController

Question

我想创建一个页面视图部分，我们可以在其中通过按下唯一的凸起按钮在其子页面之间导航。

每个按钮将导航到不同的页面。

我怎样才能做到这一点？

Answer 1

你试过使用 PageViewController 的 jumpToPage 吗？

https://api.flutter.dev/flutter/widgets/PageController/jumpToPage.html

您可以在 PageView 的父级上有一个 PageViewController，这样您就可以在每个页面上传递它。

Answer 2

你必须有这个控制器：


  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

在此之后，您可以定义您的 PageView 小部件。现在凸起的按钮可以有这个来控制

                        onPressed: () {
                          if (_pageController.hasClients) {
                            _pageController.animateToPage(
                              1,
                              duration: const Duration(milliseconds: 400),
                              curve: Curves.easeInOut,
                            );
                          }
                        },

你要注意页面的索引。

Answer 3

您可以使用此代码满足您的要求，

我写的是复制 Tabbar 的方式

首先是像标签一样的按钮栏：

Container(
  width: MediaQuery.of(context).size.width * 0.9,
  height: MediaQuery.of(context).size.height * 0.1,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      RaisedButton(
        onTap: () {
          setState(() {
            select1 = true;
          });
          pageController.animateToPage(0,
              duration: Duration(milliseconds: 500),
              curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("First"),
        ),
      ),
      RaisedButton(
        onTap: () {
          setState(() {
            select2 = true;
          });
          pageController.animateToPage(1,
            duration: Duration(milliseconds: 500),
            curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("Second")
        ),
      ),
      RaisedButton(
        onTap: () {
          setState(() {
            select3 = true;
          });
          pageController.animateToPage(2,
            duration: Duration(milliseconds: 500),
            curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("Third")
        ),
      ),
    ]
  )
),

这是页面数组：

Container(
  height: MediaQuery.of(context).size.height * 0.8,
  child: PageView(
    controller: pageController,
    onPageChanged: (index) {
      setState(() {
        pageChanged = index;
        if(pageChanged == 0)
          select1 = true;
        else if(pageChanged == 1)
          select2 = true;
        else if(pageChanged == 2)
          select3 = true;
      });
      print("Page Changed is: $pageChanged");
    },
    children: <Widget>[
      Container(child: FirstPage()),
      Container(child: SecondPage()),
      Container(child: ThirdPage()),
    ],
  ),
)

Flutter：如何使用 RaisedButton 在 PageView 中导航或使用按钮移动 pageViewController

Flutter: How to navigate in PageView with a RaisedButton or move pageViewController with button

android

flutter

button

dart

pageviews

您可以使用此代码满足您的要求，

我写的是复制 Tabbar 的方式