Flutter引导页开发问题：SmoothPageIndicator、可选网格与非滑动PageView

1. SmoothPageIndicator仅高亮当前页面 #

默认部分SmoothPageIndicator的effect会高亮所有已访问页面，切换effect类型或调整参数即可实现仅标记当前页面：

方案一：使用WormEffect（推荐） #

WormEffect仅动态高亮当前页面的指示器，效果直观：

SmoothPageIndicator(
  controller: _pageController, // 与PageView绑定同一PageController
  count: 3, // 总页面数
  effect: WormEffect(
    activeDotColor: Colors.blue, // 当前页指示器颜色
    dotColor: Colors.grey.shade300, // 未激活指示器颜色
    dotHeight: 8,
    dotWidth: 8,
  ),
)

方案二：调整ExpandingDotsEffect参数 #

若偏好扩展圆点样式，可通过设置paintStyle取消已访问点的颜色残留：

SmoothPageIndicator(
  controller: _pageController,
  count: 3,
  effect: ExpandingDotsEffect(
    activeDotColor: Colors.blue,
    dotColor: Colors.grey.shade300,
    paintStyle: PaintingStyle.fill,
    expansionFactor: 2,
    trailingDotColor: Colors.grey.shade300, // 统一未激活点颜色
  ),
)

注意：确保_pageController与PageView完全绑定，初始页面设置正确。

2. 多选网格选项的状态区分 #

通过维护选中状态集合，结合UI样式切换实现选中/未选中区分：

步骤1：定义状态变量 #

在State类中声明存储选中项的集合：

Set<int> _selectedOptionIds = {}; // 存储选中选项的索引或ID

步骤2：构建多选网格 #

使用GridView生成选项，通过GestureDetector监听点击事件切换选中状态，并动态调整UI：

GridView.count(
  crossAxisCount: 3, // 每行3个选项
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  children: List.generate(9, (index) {
    bool isSelected = _selectedOptionIds.contains(index);
    return GestureDetector(
      onTap: () {
        setState(() {
          isSelected 
              ? _selectedOptionIds.remove(index) 
              : _selectedOptionIds.add(index);
        });
      },
      child: Container(
        decoration: BoxDecoration(
          color: isSelected ? Colors.blue.shade100 : Colors.grey.shade100,
          border: Border.all(
            color: isSelected ? Colors.blue : Colors.grey.shade300,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(8),
        ),
        alignment: Alignment.center,
        child: Text(
          "选项 ${index+1}",
          style: TextStyle(
            color: isSelected ? Colors.blue : Colors.black87,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  }),
)

可根据需求替换索引为选项ID，或自定义选中状态的样式（如添加对勾图标）。

3. 禁用PageView滑动，仅通过按钮切换 #

直接设置PageView的physics属性为NeverScrollableScrollPhysics()即可禁用滑动，配合PageController实现按钮控制：

步骤1：配置PageView #

PageView(
  controller: _pageController,
  physics: NeverScrollableScrollPhysics(), // 完全禁用滑动
  children: [
    // 引导页1
    PersonalInfoPage1(),
    // 引导页2
    OptionSelectionPage(),
    // 引导页3
    ConfirmPage(),
  ],
)

步骤2：实现底部切换按钮 #

通过PageController的nextPage/previousPage方法切换页面，并根据当前页面状态禁用无效按钮：

Padding(
  padding: EdgeInsets.all(16),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      TextButton(
        onPressed: _pageController.page! > 0 
            ? () {
                _pageController.previousPage(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
              }
            : null, // 第一页时禁用上一页按钮
        child: Text("上一页"),
      ),
      TextButton(
        onPressed: _pageController.page! < 2 
            ? () {
                _pageController.nextPage(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
              }
            : null, // 最后一页时禁用下一页按钮
        child: Text("下一页"),
      ),
    ],
  ),
)

若需直接跳转指定页面，可使用_pageController.jumpToPage(2)方法。

内容的提问来源于stack exchange，提问作者IniOluwa Longe