Flutter for OpenHarmony 引导页萌系实战指南：给新用户一份软乎乎的欢迎礼✨
一开始设计的时候，卡片之间的间距没调好，滑动切换的时候会有 “卡顿感”，后来用PageView的pageSnapping属性，卡片就能稳稳停住，翻页体验一下子就丝滑多啦！这次给鸿蒙 App 装上的软乎乎引导页，不仅帮新用户快速了解了 App 的功能，还让他们第一次打开 App 就感受到了温暖～看着用户滑动翻页的样子，就像收到了一份带着小卡片的欢迎礼，超治愈！为了让引导页更像翻画册，我用PageVi
Flutter for OpenHarmony 引导页萌系实战指南：给新用户一份软乎乎的欢迎礼✨
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
一、开篇：给鸿蒙 App 加上软乎乎的新用户欢迎礼🎁
哈喽～这次我给 Flutter 鸿蒙 App 装上了一个软乎乎的引导页！就像给新用户递上一份带着小卡片的欢迎礼，滑动就能了解 App 的可爱功能，最后一键进入主界面，用起来超暖心～
这次的小项目里，我搞定了三件大事：
设计了粉粉的多页引导卡片，每一页都像一张软萌小海报
实现了流畅的滑动切换效果，翻页像在翻一本可爱的小画册
加了跳过和完成按钮，用户可以按自己的节奏看完引导，超贴心～
接下来就和我一起看看，怎么给鸿蒙 App 加上这个软乎乎的新用户欢迎礼吧～
二、第一步：设计软乎乎的引导卡片，像翻一本可爱小画册🎨
引导页的关键就是让新用户一眼爱上 App！我设计了 3 张引导卡片，每一页都有可爱的图标、软萌的标题和暖心的说明文字，配色也和 App 整体风格统一，像翻一本会动的小画册～
踩过的小坑：
一开始设计的时候，卡片之间的间距没调好，滑动切换的时候会有 “卡顿感”，后来用PageView的pageSnapping属性，卡片就能稳稳停住，翻页体验一下子就丝滑多啦！还有鸿蒙设备上文字偶尔会溢出，我给文字加了maxLines和溢出省略号，再也不会破坏软乎乎的排版啦～
引导页 UI 核心代码
dart
import 'package:flutter/material.dart';
// 引导页卡片组件
class GuideCard extends StatelessWidget {
final String icon;
final String title;
final String desc;
const GuideCard({
super.key,
required this.icon,
required this.title,
required this.desc,
});
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 软乎乎的图标（这里用Icon模拟，也可以换成本地图片）
Icon(
Icons.star,
size: 120,
color: Colors.pink[200],
),
const SizedBox(height: 30),
Text(
title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const SizedBox(height: 16),
Text(
desc,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
);
}
}
三、第二步：实现滑动切换，像翻画册一样丝滑💡
为了让引导页更像翻画册，我用PageView实现了滑动切换效果，还加了底部的小圆点指示器，用户滑动的时候，指示器会跟着动，像在标记自己看到哪一页啦～
滑动切换与指示器代码
dart
class CuteGuidePage extends StatefulWidget {
const CuteGuidePage({super.key});
State<CuteGuidePage> createState() => _CuteGuidePageState();
}
class _CuteGuidePageState extends State<CuteGuidePage> {
final PageController _controller = PageController();
int _currentPage = 0;
// 引导页数据
final List<Map<String, String>> guideData = [
{
'icon': 'star',
'title': '欢迎来到软乎乎App',
'desc': '这里有超多可爱的功能，陪你度过每一天～',
},
{
'icon': 'favorite',
'title': '收藏你喜欢的一切',
'desc': '看到喜欢的内容，一键收藏，再也不怕找不到啦～',
},
{
'icon': 'chat',
'title': '和小伙伴轻松聊天',
'desc': '软乎乎的聊天室，和朋友分享日常超方便～',
},
];
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: PageView.builder(
controller: _controller,
onPageChanged: (index) {
setState(() => _currentPage = index);
},
itemCount: guideData.length,
itemBuilder: (context, index) {
return GuideCard(
icon: guideData[index]['icon']!,
title: guideData[index]['title']!,
desc: guideData[index]['desc']!,
);
},
),
),
// 底部指示器+按钮
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 跳过按钮
TextButton(
onPressed: () => _goToHome(),
child: const Text('跳过', style: TextStyle(color: Colors.grey)),
),
// 指示器
Row(
children: List.generate(
guideData.length,
(index) => Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
width: _currentPage == index ? 12 : 8,
height: 8,
decoration: BoxDecoration(
color: _currentPage == index ? Colors.pink : Colors.grey[300],
borderRadius: BorderRadius.circular(4),
),
),
),
),
// 下一页/完成按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.pink[200],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
onPressed: () {
if (_currentPage < guideData.length - 1) {
_controller.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
} else {
_goToHome();
}
},
child: Text(_currentPage == guideData.length - 1 ? '开始使用' : '下一页'),
),
],
),
),
],
),
);
}
// 跳转到主界面
void _goToHome() {
// 这里可以保存引导页已完成的状态，下次启动不再显示
Navigator.pushReplacementNamed(context, '/home');
}
}
四、第三步：适配鸿蒙细节，让引导页更贴心🎀
在鸿蒙真机上测试的时候，我发现了几个小细节，调整后引导页的体验更软乎乎啦～
- 适配不同屏幕尺寸
鸿蒙设备的屏幕尺寸差异挺大，一开始用固定高度的卡片，在小屏幕上会挤在一起。后来我给卡片用了Expanded和百分比布局，不管什么尺寸的鸿蒙设备，引导页都能乖乖适配，不会被裁剪～ - 控制滑动灵敏度
有些用户滑动引导页的时候，不小心滑一下就翻了两页，体验不太好。我给PageView加了physics: const PageScrollPhysics()，控制滑动灵敏度，用户轻轻滑一下只会翻一页，翻页体验更稳啦～ - 首次启动判断
为了不让老用户每次打开 App 都看到引导页，我用shared_preferences保存了用户是否已完成引导的状态，只有首次启动才会显示引导页，贴心又不打扰～
dart
// 在main.dart中判断是否显示引导页
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
final prefs = await SharedPreferences.getInstance();
final isFirstLaunch = prefs.getBool('is_first_launch') ?? true;
runApp(MyApp(isFirstLaunch: isFirstLaunch));
}
// 在引导页完成时保存状态
void _goToHome() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setBool('is_first_launch', false);
Navigator.pushReplacementNamed(context, '/home');
}
五、真机体验：软乎乎的引导页在鸿蒙设备上跑起来啦🎉
我把这个软乎乎的引导页装到鸿蒙真机上试了试，效果超棒：
滑动切换像翻画册一样丝滑，小圆点指示器会跟着动，超可爱
跳过和完成按钮位置很合理，用户可以按自己的节奏看完引导
不同尺寸的鸿蒙设备上，引导卡片都能乖乖适配，不会被裁剪
首次启动显示引导页，之后直接进入主界面，不打扰老用户～
这是我的运行截图：
六、复盘小技巧：让引导页在鸿蒙上更乖💡
折腾下来，我也总结了几个让引导页变乖的小技巧：
用 PageView 实现滑动切换，加个指示器，用户一眼就知道自己看到哪一页啦
跳过按钮一定要加，给不想看引导的用户留条快捷通道
用 shared_preferences 保存首次启动状态，老用户不会被重复引导打扰
真机测试比模拟器靠谱，鸿蒙设备上的滑动体验和适配效果只有真机才看得出来～
七、结尾：给新用户的软乎乎欢迎礼谁不爱呀～
这次给鸿蒙 App 装上的软乎乎引导页，不仅帮新用户快速了解了 App 的功能，还让他们第一次打开 App 就感受到了温暖～看着用户滑动翻页的样子，就像收到了一份带着小卡片的欢迎礼，超治愈！
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
1
0- 0
已为社区贡献29条内容
所有评论(0)