问题

在Flutter中使用PageView与点指示器，每当滑动页面时，需要像NinjaCart应用程序中一样更改按钮。

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

答案1

得分: 25

以下是翻译后的代码部分：

// 这是一个单点小部件
 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 小部件
 PageView.builder(
     controller: _pageController,
     onPageChanged: (int page) {
         setState(() {
             selectedindex = page;
         });
     },
     itemCount: YourListHere.length,

<details>
<summary>英文:</summary>

Here is a Single dot widget

```dart
 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),
          ),
        ),
      );
    }

Build the dots group widget by length of the list view

 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 Widget

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

答案2

得分: 8

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

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

只需使用 TabController.index = i 来设置高亮显示哪个点。

答案3

得分: 3

你可以知道你的 PageView 在哪个页面，如果你为它提供一个控制器并添加一个监听器到该控制器。然后，你可以有一个变量，它始终保存着你的 PageView 的当前页面，并且你可以根据这个值来改变其他的 Widgets：

声明部分

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

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

Widget部分

PageView(
  controller: _pageController,
  ...
)

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

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

PageView(
  controller: _pageController,
  ...
),