在带有点指示器的颤动中使用 PageView，在滑动每个页面时也需要更改按钮，就像在 ninjacart 应用程序中一样

Question

在带有点指示器的颤动中使用 PageView，在滑动每个页面时也需要更改按钮，就像在 NinjaCart 应用程序中一样。

例如第 2 页按钮是“下一步”，第三页按钮是“捕获”

Answer 1

TabPageSelector是一个显示分页点的小部件。

https://api.flutter.dev/flutter/material/TabPageSelector-class.html

只需用于TabController.index = i设置突出显示哪个点即可。

Answer 2

这是一个Signle点小部件

Widget _indicator(bool isActive) {
  return Container(
    height: 10,
    child: AnimatedContainer(

      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 4.0),
      height: isActive
          ? 10:8.0,
      width: isActive
          ? 12:8.0,
      decoration: BoxDecoration(
        boxShadow: [
          isActive
              ? BoxShadow(
            color: Color(0XFF2FB7B2).withOpacity(0.72),
            blurRadius: 4.0,
            spreadRadius: 1.0,
            offset: Offset(
              0.0,
              0.0,
            ),
          )
              : BoxShadow(
            color: Colors.transparent,
          )
        ],
        shape: BoxShape.circle,
        color: isActive ? Color(0XFF6BC4C9) : Color(0XFFEAEAEA),
      ),
    ),
  );
}

按列表视图的长度构建点分组小部件

List<Widget> _buildPageIndicator() {
      List<Widget> list = [];
      for (int i = 0; i < YourListHere.length; i++) {
        list.add(i == selectedindex ? _indicator(true) : _indicator(false));
      }
      return list;
    }

页面视图小部件

PageView.builder(
 
 controller: _pageController,
 onPageChanged: (int page) {
setState(() {
selectedindex = page;
 });
 },
 itemCount: YourListHere.length,

Answer 3

PageView如果您给它一个控制器并向该控制器添加一个侦听器，您就可以知道您所在的页面。然后，您可以拥有一个始终包含当前页面的变量PageView，并且您可以Widgets根据该值更改其他页面：

声明

PageController _pageController = PageController();
double currentPage = 0;

@override
void initState() {
  _pageController.addListener((){
    setState(() {
      currentPage = _pageController.page;
    });
  });
  super.initState();
}

小部件

PageView(
  controller: _pageController,
  ...
),