在底部导航栏中创建两个自定义按钮，以使用页面视图控制四个页面

Question

我想使用底部导航栏上的两个箭头来控制四个页面，在这两个箭头按钮的中间我有一个计数器来显示页面的 ID。就像下图：

我正在使用模块化路由来更改页面，但我不知道如何只使用两个按钮来做到这一点，也不知道如何将计数器放在这两个按钮的中间纽扣。有什么建议吗？

class _CreateAccountPageState
  extends ModularState<CreateAccountPage, CreateAccountController> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: PageView(
              controller: controller.pageViewController,
              children: [
                RouterOutlet(),
                RouterOutlet(),
                RouterOutlet(),
                RouterOutlet()
              ],
            ),
            bottomNavigationBar: AnimatedBuilder(
              animation: controller.pageViewController,
              builder: (context, snapshot) {
                return BottomNavigationBar(
                    showSelectedLabels: false,
                    showUnselectedLabels: false,
                    elevation: 0,
                    backgroundColor: Colors.white,
                    currentIndex: controller.pageViewController.page?.round() ?? 0,
                    onTap: (id) {
                      if (id == 0) {
                        Modular.to.navigate('/createaccount/pageStep1');
                      } else if (id == 1) {
                        Modular.to.navigate('/createaccount/pageStep2');
                      } else if (id == 2) {
                        Modular.to.navigate('/createaccount/pageStep3');
                      } else if (id == 3) {
                        Modular.to.navigate('/createaccount/pageStep4');
                      }
                    },
                    items: [
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: 'Page1',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.person),
                        label: 'Page2',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: 'Page3',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.person),
                        label: 'Page4',
                      )
                    ]
    
                    /*ElevatedButton(
              onPressed: () => Modular.to.navigate("/login"),
              child: Text("Voltar"))*/
                    );
              },
            ));
      }

Answer 1

我认为您正在寻找的是入职屏幕。我建议您看一下这个库 here，它是专门为名为 introduction_screen 的入职创建的。您可以自定义按钮和文本，如示例中所示。阅读文档以获取更多信息。

Answer 2

这是输出，希望你能设计剩下的：

小部件

import 'package:flutter/material.dart';

class CreateAccountPage extends StatefulWidget {
  CreateAccountPage({Key? key}) : super(key: key);

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

class _CreateAccountPageState extends State<CreateAccountPage> {
  PageController controller = PageController(initialPage: 0);

  int currentPage = 0;

  final pages = List.generate(
    4,
    (index) => Container(
      alignment: Alignment.center,
      color: index.isEven ? Colors.cyanAccent : Colors.yellowAccent,
      child: Text(
        "${index + 1}",
        style: TextStyle(fontSize: 44),
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
          controller: controller,
          children: [...pages],
          onPageChanged: (value) {
            setState(() {
              currentPage = value;
            });
          },
        ),
        bottomNavigationBar: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                onPressed: () {
                  setState(() {
                    controller.previousPage(
                        duration: Duration(milliseconds: 400),
                        curve: Curves.easeInOut);
                  });
                },
                icon: Icon(Icons.arrow_left),
              ),
              Text(
                "${currentPage + 1}/${pages.length}",
              ),
              IconButton(
                onPressed: () {
                  controller.nextPage(
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeInOut);
                },
                icon: Icon(Icons.arrow_right),
              )
            ],
          ),
        ));
  }
}

在底部导航栏中创建两个自定义按钮，以使用页面视图控制四个页面

Create two custom buttons inside Bottom Navigation Bar to control four pages using page view

modular

dart

flutter