时间戳

首页 > 解决方案 > 如何在页面指示器中导航到下一页

flutter - 如何在页面指示器中导航到下一页

问题描述

我有一个功能可以从一个屏幕滑动到另一个屏幕，并在我创建的指示器栏中显示进度，以及一个带有“下一页”选项的提升按钮。
我的问题是如何使用 onTap 功能上的提升按钮导航到“下一页”。基本上，与用户向左滑动时的结果相同。

这是我到目前为止所取得的成就：

class xxxx extends State<xxxx> {
  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    var list = <Widget>[];
    for (var i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: isActive ? 24.0 : 16.0,
      decoration: BoxDecoration(
        color: isActive ? TheBaseColors.lightRed : Colors.grey,
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    Color background = Color(0xFF001d5d);
    return Scaffold(
      [...................]
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
              height: size.height * 0.10,
              color: background,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Row(children: _buildPageIndicator()),
                  //CHANGE BUTTON
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: TheBaseColors.lightRed,
                      padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                    onPressed: () {
                      pushNewScreen(
                        context,
                        screen: Routes.getWidgetForRoute(Routes.questions, context),
                        pageTransitionAnimation: PageTransitionAnimation.cupertino,
                      );
                    },
                    child: Text(
                      'Get started',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
            )
          : Container(
              height: size.height * 0.10,
              color: background,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Row(children: _buildPageIndicator()),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: TheBaseColors.lightRed,
                      padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                    onPressed: () {
                      pushNewScreen(
                        context,
                        screen: Routes.getWidgetForRoute(Routes.questions, context),
                        pageTransitionAnimation: PageTransitionAnimation.cupertino,
                      );
                    },
                    child: Text(
                      'Next',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
            ),
    );
  }
}

标签： flutter

解决方案

为此，您可以使用我使用页面控制器创建的这两个功能：

 void nextPage(){
    _pageController.animateToPage(_pageController.page.toInt() + 1,
      duration: Duration(milliseconds: 400),
      curve: Curves.easeIn
    );
  }

  void previousPage(){
    _pageController.animateToPage(_pageController.page.toInt() -1,
      duration: Duration(milliseconds: 400),
      curve: Curves.easeIn
    );
  }

您可以根据自己的要求更改这些。

推荐阅读