Flutter引导页实现自动跳转或替换指示器为跳转按钮

以下是修改后的完整代码，可满足你提出的两个需求：

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class OnBoardMain extends StatefulWidget {
  const OnBoardMain({super.key});

  @override
  State<OnBoardMain> createState() => _OnBoardMainState();
}

class _OnBoardMainState extends State<OnBoardMain> {
  final _controller = PageController();
  int _currentPageIndex = 0;
  Timer? _autoJumpTimer;

  @override
  void initState() {
    super.initState();
    // 监听页面切换事件
    _controller.addListener(() {
      setState(() {
        _currentPageIndex = _controller.page?.round() ?? 0;
      });
      
      // 进入最后一页时启动自动跳转定时器
      if (_currentPageIndex == 2) {
        _autoJumpTimer = Timer(const Duration(seconds: 5), _jumpToHome);
      } else {
        // 离开最后一页时取消定时器
        _autoJumpTimer?.cancel();
      }
    });
  }

  // 跳转至首页的核心方法
  void _jumpToHome() {
    // 替换为你的首页路由逻辑，这里以命名路由为例
    Navigator.pushReplacementNamed(context, '/home');
    // 若不用命名路由，可替换为：
    // Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const HomePage()));
  }

  @override
  void dispose() {
    // 销毁控制器与定时器，避免内存泄漏
    _controller.dispose();
    _autoJumpTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              children: const [
                OnBoardScreen(),
                OnBoardScreen2(),
                OnBoardScreen3(),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 50),
            // 根据当前页面动态切换底部组件
            child: _currentPageIndex == 2 
                ? ElevatedButton(
                    onPressed: _jumpToHome,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.black,
                      foregroundColor: Colors.white,
                      padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 12),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                    child: const Text('立即进入首页'),
                  )
                : SmoothPageIndicator(
                    controller: _controller,
                    count: 3,
                    effect: const ExpandingDotsEffect(
                      activeDotColor: Colors.black,
                      dotColor: Colors.white,
                      dotHeight: 8,
                      dotWidth: 15,
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}

// 示例引导页组件，可替换为你实际的页面实现
class OnBoardScreen extends StatelessWidget {
  const OnBoardScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, child: const Center(child: Text('引导页1')));
  }
}

class OnBoardScreen2 extends StatelessWidget {
  const OnBoardScreen2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.green, child: const Center(child: Text('引导页2')));
  }
}

class OnBoardScreen3 extends StatelessWidget {
  const OnBoardScreen3({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.orange, child: const Center(child: Text('引导页3')));
  }
}

关键改动说明： #

• 转为StatefulWidget：需要维护页面索引、定时器等状态，因此替换原StatelessWidget为StatefulWidget
• 页面状态监听：通过PageController的监听器实时获取当前页面索引，更新UI状态
• 自动跳转逻辑：进入最后一页时启动5秒定时器，到期自动跳转；若用户滑回前页，立即取消定时器
• 底部组件动态切换：根据当前页面索引，最后一页显示跳转按钮，其余页面保留原指示器样式
• 资源清理：在组件销毁时清理页面控制器和定时器，避免内存泄漏

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