通过 Flutter 实现现代化、动态的自动轮播图：便捷演示教程

2023-12-20 11:36:58

当你的APP项目中需要添加轮播图元素时，你会怎么做？

掌握使用Flutter PageView 和 Timer 来实现自动轮播效果，不仅可以大大提高开发效率，还可以为你所开发的应用程序增添时尚感和吸引力。因此，千万不要错过这个绝佳机会，立即开始学习如何利用Flutter PageView 和 Timer 创建自动轮播图吧！

核心要点

Flutter PageView 可用于实现页面切换效果。
Timer 可用于实现自动切换页面功能。

Flutter PageView

定义PageView组件：

PageView(
  controller: controller,
  children: pages,
);

定义PageView控制器：

final PageController controller = PageController(viewportFraction: 0.8);

Timer

定义定时器：

Timer timer;

启动定时器：

timer = Timer.periodic(Duration(seconds: 5), (timer) {
  controller.nextPage(duration: Duration(milliseconds: 300), curve: Curves.ease);
});

结束定时器：

timer.cancel();

全部代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自动轮播图'),
        ),
        body: Center(
          child: PageView(
            controller: controller,
            children: pages,
          ),
        ),
      ),
    );
  }

  final PageController controller = PageController(viewportFraction: 0.8);
  final List<Widget> pages = [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ];

  Timer timer;

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(seconds: 5), (timer) {
      controller.nextPage(
          duration: Duration(milliseconds: 300), curve: Curves.ease);
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }
}