Flutter 用 PageView 仿抖音滑动页面，太炫酷了吧

it7899

已于 2025-04-11 16:33:54 修改

阅读量1k

点赞数 16

分类专栏： flutter 文章标签： flutter

于 2025-04-11 10:16:51 首次发布

本文链接：https://blog.csdn.net/it7899/article/details/147090852

版权

flutter 专栏收录该内容

12 篇文章

订阅专栏

在 Flutter 开发中，PageView是一个强大的组件，它可以实现页面间的滑动切换效果，常用于创建轮播图、引导页等功能。本文将详细介绍如何使用PageView实现仿抖音滑动切换页面以及轮播图效果，并结合实际代码示例进行讲解。

一、PageView 基本介绍
PageView是 Flutter 框架中用于实现页面滑动切换的组件，它继承自ScrollView，可以在水平或垂直方向上滑动显示多个子页面。PageView提供了流畅的滑动体验，并且支持各种手势操作，如滑动、缩放等。

在使用PageView时，主要涉及到以下几个关键属性和方法：

children：用于定义PageView中的子页面列表，可以是任意的 Flutter 组件。
controller：PageController类型，用于控制PageView的滚动位置、动画等。可以通过它实现手动切换页面、监听页面滚动等功能。
onPageChanged：一个回调函数，当页面滚动到新的位置时会被调用，通过它可以获取当前显示的页面索引。

flutter中文网

flutter

二、仿抖音滑动切换页面实现
（一）创建项目
首先，使用 Flutter 命令行工具创建一个新的 Flutter 项目：

flutter create page_view_demo
cd page_view_demo
（二）编写页面布局
在lib目录下的main.dart文件中，编写仿抖音滑动切换页面的布局。这里简单创建几个包含不同内容的页面作为示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
children: [
_buildPage('页面1', Colors.blue),
_buildPage('页面2', Colors.green),
_buildPage('页面3', Colors.red),
],
),
),
);
}

Widget _buildPage(String title, Color color) {
return Container(
color: color,
child: Center(
child: Text(
title,
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
);
}
}

在上述代码中：

创建了一个MyApp类，继承自StatelessWidget，作为应用的入口。
在Scaffold的body中使用PageView组件，并在children属性中添加了三个不同颜色和文本的页面。
_buildPage方法用于创建每个页面的基本布局，包含一个有背景颜色的Container和居中显示的文本。
（三）添加滑动切换效果
此时运行项目，已经可以看到页面之间的滑动切换效果。但如果想要实现更复杂的功能，比如监听页面切换事件，可以通过PageController和onPageChanged来实现：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
final PageController _pageController = PageController();
int _currentPage = 0;

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

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: [
_buildPage('页面1', Colors.blue),
_buildPage('页面2', Colors.green),
_buildPage('页面3', Colors.red),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentPage,
onTap: (int index) {
_pageController.animateToPage(
index,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '首页',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '搜索',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '个人中心',
),
],
),
),
);
}

Widget _buildPage(String title, Color color) {
return Container(
color: color,
child: Center(
child: Text(
title,
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
);
}
}

在这段代码中：

将MyApp改为StatefulWidget，以便管理页面状态。
创建了一个PageController实例_pageController，并将其赋值给PageView的controller属性。
使用onPageChanged回调函数，在页面切换时更新_currentPage变量，并通过setState方法通知 Flutter 框架进行界面更新。
在底部添加了一个BottomNavigationBar，通过点击底部导航栏的选项，可以使用_pageController.animateToPage方法实现页面的平滑切换。
三、实现轮播图效果
（一）准备图片资源
在项目的assets目录下创建一个images文件夹，并将需要展示的图片放入其中。然后在pubspec.yaml文件中配置图片资源路径：

flutter:
assets:
- assets/images/
（二）编写轮播图代码
修改main.dart文件，实现轮播图效果：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
final PageController _pageController = PageController(viewportFraction: 0.8);
int _currentIndex = 0;
final List<String> _imageList = [
'assets/images/image1.jpg',
'assets/images/image2.jpg',
'assets/images/image3.jpg',
];

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

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
SizedBox(height: 20),
Expanded(
child: PageView.builder(
controller: _pageController,
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
itemCount: _imageList.length,
itemBuilder: (BuildContext context, int index) {
return _buildImageItem(_imageList[index]);
},
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildDots(),
),
SizedBox(height: 20),
],
),
),
);
}

Widget _buildImageItem(String imagePath) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
);
}

List<Widget> _buildDots() {
List<Widget> dots = [];
for (int i = 0; i < _imageList.length; i++) {
dots.add(
Container(
width: 8,
height: 8,
margin: EdgeInsets.symmetric(horizontal: 4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentIndex == i? Colors.blue : Colors.grey,
),
),
);
}
return dots;
}
}

代码解释：

创建了一个PageController实例，并设置viewportFraction属性为 0.8，使每个页面在屏幕上显示时只占据 80% 的宽度，营造出轮播图的效果。
使用PageView.builder来构建轮播图，通过itemBuilder方法根据图片列表生成每个图片页面。
在页面下方添加了指示点，通过_buildDots方法根据图片数量生成对应的指示点，并根据当前显示的页面索引来改变指示点的颜色。
四、总结
通过以上步骤，我们在 Flutter 中成功实现了仿抖音滑动切换页面和轮播图效果。PageView组件为我们提供了便捷的方式来创建这类交互效果，在实际项目中，可以根据需求进一步扩展和优化这些功能，如添加自动轮播、无限循环、更丰富的页面切换动画等。希望本文的内容对大家在 Flutter 开发中使用PageView有所帮助。