Flutter实现PageView.builder滑至最后一项时显示指定Widget

核心是通过PageController监听页面滚动状态，实时更新当前页面索引，以此控制Done按钮的显示/隐藏，以下是完整实现方案：

1. 定义成员变量 #

在你的State类中声明控制器、当前页面索引和列表数据：

late PageController _pageController;
int _currentPageIndex = 0;
// 替换成你的实际列表项
final List<Widget> _pageItems = [
  Container(color: Colors.red, child: const Center(child: Text('Item 1'))),
  Container(color: Colors.blue, child: const Center(child: Text('Item 2'))),
  Container(color: Colors.green, child: const Center(child: Text('Item 3'))),
];
// 判断是否为最后一页的快捷属性
bool get _isLastPage => _currentPageIndex == _pageItems.length - 1;

2. 初始化控制器并添加监听 #

在initState中初始化控制器，监听页面变化并更新当前索引：

@override
void initState() {
  super.initState();
  _pageController = PageController();
  _pageController.addListener(() {
    // 取当前页面的整数索引
    final newIndex = _pageController.page?.round() ?? 0;
    if (newIndex != _currentPageIndex) {
      setState(() {
        _currentPageIndex = newIndex;
      });
    }
  });
}

3. 销毁控制器避免内存泄漏 #

在dispose方法中释放控制器资源：

@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}

4. 构建页面布局 #

将PageView和Done按钮组合，用Visibility控制按钮显示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Expanded(
          child: PageView.builder(
            controller: _pageController,
            itemCount: _pageItems.length,
            itemBuilder: (context, index) => _pageItems[index],
          ),
        ),
        // Done按钮区域
        Visibility(
          visible: _isLastPage,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(double.infinity, 50),
              ),
              onPressed: () {
                // 这里写点击Done后的逻辑
                print('Done clicked!');
              },
              child: const Text('Done', style: TextStyle(fontSize: 18)),
            ),
          ),
        ),
      ],
    ),
  );
}

为什么之前的实现可能失败？ #

• 没有使用PageController监听页面变化：仅在itemBuilder中判断索引无法触发UI更新，因为滑动页面时不会自动调用setState。
• 可见性条件未实时更新：如果仅靠静态判断，页面滑动后状态不会同步，导致按钮显示异常。

内容的提问来源于stack exchange，提问作者hazem saad