Flutter中DefaultTabController滑至最后标签时修改按钮的实现方案

问题核心是你当前用的StatelessWidget无法监听TabController的页面切换事件，滑动切换页面时不会触发UI更新。改成StatefulWidget并监听控制器的变化就能解决，具体修改如下：

完整修改代码 #

class SlidesWidget extends StatefulWidget {
  static List<Slide> slides = [
    const Slide(text: 'Welcome to ..'),
    const Slide(text: 'Ready to discover your city?')
  ];

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

class _SlidesWidgetState extends State<SlidesWidget> {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 等待Widget树构建完成后获取TabController，避免context为空
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _tabController = DefaultTabController.of(context)!;
      // 添加页面切换监听器
      _tabController.addListener(_onTabChanged);
    });
  }

  void _onTabChanged() {
    // 页面切换完成后触发UI更新
    if (!_tabController.indexIsChanging) {
      setState(() {});
    }
  }

  @override
  void dispose() {
    // 移除监听器，防止内存泄漏
    _tabController.removeListener(_onTabChanged);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 判断是否处于最后一页
    bool isLastPage = _tabController.index == widget.slides.length - 1;

    return DefaultTabController(
      length: widget.slides.length,
      child: Builder(
        builder: (BuildContext context) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: SafeArea(
            child: Column(
              children: [
                const TabPageSelector(
                  selectedColor: Colors.white,
                ),
                Expanded(
                  flex: 100,
                  child: TabBarView(
                    children: widget.slides,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: ElevatedButton(
                    onPressed: () {
                      if (!isLastPage) {
                        _tabController.index++;
                      } else {
                        // 最后一页的自定义操作，比如跳转首页、提交数据等
                        // Navigator.push(context, MaterialPageRoute(builder: (_) => HomePage()));
                      }
                    },
                    // 根据当前页面动态设置按钮文本
                    child: Text(isLastPage ? 'Get Started' : 'Next'),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键修改点说明 #

1. 转为StatefulWidget：只有有状态组件才能通过setState更新UI，响应页面切换事件。
2. 监听TabController：通过addListener监听页面切换，切换完成后调用setState触发UI重绘。
3. 动态判断页面状态：用isLastPage变量判断当前是否为最后一页，以此动态修改按钮文本和点击逻辑。
4. 内存泄漏防护：在dispose方法中移除监听器，避免组件销毁后控制器仍持有引用。

内容的提问来源于stack exchange，提问作者6pounder