Cupertino Design组件在Flutter中的深度使用
2023-11-236.9k 阅读
Cupertino Design 简介
Cupertino Design 是苹果公司为 iOS、iPadOS、watchOS 和 macOS 设备所采用的设计语言。这种设计语言强调简洁、直观与沉浸式的用户体验。在 Flutter 中，Cupertino 组件库允许开发者构建出符合 Cupertino Design 规范的应用，从而为 iOS 用户带来原生般的体验。
在 Flutter 中使用 Cupertino 组件库
要在 Flutter 应用中使用 Cupertino 组件，首先要确保导入了 package:flutter/cupertino.dart 库。例如：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Cupertino App'),
),
child: Center(
child: Text('Hello, Cupertino!'),
),
),
);
}
}
在上述代码中，我们创建了一个简单的 Cupertino 应用。CupertinoApp 是整个应用的根，它负责管理路由、主题等。CupertinoPageScaffold 提供了一个基本的页面结构，CupertinoNavigationBar 则是导航栏。
Cupertino 导航栏
CupertinoNavigationBar
CupertinoNavigationBar 是 Cupertino 风格的导航栏。它有 leading、middle 和 trailing 属性，分别用于放置导航栏左侧、中间和右侧的内容。
CupertinoNavigationBar(
leading: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.back),
onPressed: () {
// 返回上一页逻辑
},
),
middle: Text('页面标题'),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.search),
onPressed: () {
// 搜索逻辑
},
),
)
在这个例子中，leading 放置了一个返回按钮，middle 是页面标题，trailing 是一个搜索按钮。
导航栏样式定制
可以通过 CupertinoNavigationBarData 来定制导航栏的样式。例如，修改背景颜色和文本颜色：
CupertinoApp(
theme: CupertinoThemeData(
navigationBarTheme: CupertinoNavigationBarThemeData(
backgroundColor: CupertinoColors.activeBlue,
middleTextStyle: TextStyle(
color: CupertinoColors.white,
fontSize: 20,
),
),
),
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('定制样式的导航栏'),
),
child: Center(
child: Text('Hello'),
),
),
)
这里我们通过 CupertinoThemeData 中的 navigationBarTheme 来设置导航栏的背景色为蓝色，中间文本颜色为白色。
Cupertino 按钮
CupertinoButton
CupertinoButton 是 Cupertino 风格的按钮。它有多种构造函数，比如 CupertinoButton.filled 创建填充颜色的按钮，CupertinoButton.borderless 创建无边界按钮。
CupertinoButton.filled(
child: Text('填充按钮'),
onPressed: () {
print('填充按钮被点击');
},
)
CupertinoButton.borderless(
child: Text('无边界按钮'),
onPressed: () {
print('无边界按钮被点击');
},
)
按钮样式定制
可以通过 padding、color 等属性来定制按钮样式。例如：
CupertinoButton.filled(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
color: CupertinoColors.systemGreen,
child: Text('定制样式的填充按钮'),
onPressed: () {
print('定制样式的填充按钮被点击');
},
)
这里我们设置了按钮的内边距和颜色。
Cupertino 列表
CupertinoListTile
CupertinoListTile 是 Cupertino 风格的列表项。它可以包含标题、副标题、前导图标和尾随图标等。
CupertinoListTile(
leading: Icon(CupertinoIcons.person),
title: Text('用户'),
subtitle: Text('查看用户信息'),
trailing: Icon(CupertinoIcons.forward),
onTap: () {
// 点击列表项逻辑
},
)
分组列表
可以使用 CupertinoGroupedList 来创建分组列表。例如：
CupertinoGroupedList<Group, String>(
elements: groups,
groupBy: (element) => element.groupName,
itemBuilder: (context, element) {
return CupertinoListTile(
title: Text(element.itemName),
onTap: () {
// 点击列表项逻辑
},
);
},
groupHeaderBuilder: (context, groupName) {
return CupertinoListTile(
title: Text(groupName),
isHeader: true,
);
},
)
这里 groups 是一个包含 Group 对象的列表，Group 类包含 groupName 和 itemName 等属性。CupertinoGroupedList 通过 groupBy 方法对列表项进行分组，并通过 groupHeaderBuilder 构建分组标题。
Cupertino 模态框
CupertinoActionSheet
CupertinoActionSheet 是 Cupertino 风格的模态框，通常用于显示一系列操作选项。
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
title: Text('操作'),
actions: [
CupertinoActionSheetAction(
child: Text('选项 1'),
onPressed: () {
Navigator.pop(context);
// 执行选项 1 的逻辑
},
),
CupertinoActionSheetAction(
child: Text('选项 2'),
onPressed: () {
Navigator.pop(context);
// 执行选项 2 的逻辑
},
),
],
cancelButton: CupertinoActionSheetAction(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
),
)
在上述代码中，showCupertinoModalPopup 用于显示模态框。CupertinoActionSheet 的 actions 数组包含了各个操作选项，cancelButton 是取消按钮。
CupertinoAlertDialog
CupertinoAlertDialog 是 Cupertino 风格的警告对话框。
showCupertinoDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('警告'),
content: Text('确定要执行此操作吗？'),
actions: [
CupertinoDialogAction(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text('确定'),
onPressed: () {
Navigator.pop(context);
// 执行确定操作的逻辑
},
),
],
),
)
这里 showCupertinoDialog 用于显示对话框，CupertinoAlertDialog 的 actions 包含了取消和确定按钮。
Cupertino 日期和时间选择器
CupertinoDatePicker
CupertinoDatePicker 是 Cupertino 风格的日期选择器。
class DatePickerPage extends StatefulWidget {
@override
_DatePickerPageState createState() => _DatePickerPageState();
}
class _DatePickerPageState extends State<DatePickerPage> {
DateTime _selectedDate = DateTime.now();
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('日期选择器'),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('选择的日期: ${_selectedDate.toIso8601String()}'),
CupertinoDatePicker(
initialDateTime: _selectedDate,
onDateTimeChanged: (dateTime) {
setState(() {
_selectedDate = dateTime;
});
},
minimumDate: DateTime.now().subtract(Duration(days: 365)),
maximumDate: DateTime.now().add(Duration(days: 365)),
),
],
),
);
}
}
在这个例子中，我们创建了一个日期选择器页面。CupertinoDatePicker 的 initialDateTime 设置初始日期，onDateTimeChanged 回调函数在日期改变时更新状态。
CupertinoTimePicker
CupertinoTimePicker 是 Cupertino 风格的时间选择器。
class TimePickerPage extends StatefulWidget {
@override
_TimePickerPageState createState() => _TimePickerPageState();
}
class _TimePickerPageState extends State<TimePickerPage> {
TimeOfDay _selectedTime = TimeOfDay.now();
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('时间选择器'),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('选择的时间: ${_selectedTime.format(context)}'),
CupertinoTimePicker(
initialTime: _selectedTime,
onDateTimeChanged: (time) {
setState(() {
_selectedTime = time;
});
},
),
],
),
);
}
}
这里我们创建了一个时间选择器页面。CupertinoTimePicker 的 initialTime 设置初始时间，onDateTimeChanged 回调函数在时间改变时更新状态。
Cupertino 进度指示器
CupertinoActivityIndicator
CupertinoActivityIndicator 是 Cupertino 风格的加载指示器。
Center(
child: CupertinoActivityIndicator(),
)
这将在屏幕中心显示一个旋转的加载指示器。可以通过 radius 属性来调整指示器的大小。
Center(
child: CupertinoActivityIndicator(
radius: 20,
),
)
CupertinoProgressIndicator
CupertinoProgressIndicator 是 Cupertino 风格的进度条。
class ProgressPage extends StatefulWidget {
@override
_ProgressPageState createState() => _ProgressPageState();
}
class _ProgressPageState extends State<ProgressPage> {
double _progress = 0.0;
@override
void initState() {
super.initState();
Future.delayed(Duration(seconds: 5), () {
setState(() {
_progress = 1.0;
});
});
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('进度条'),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoProgressIndicator(
value: _progress,
),
Text('进度: ${(_progress * 100).toStringAsFixed(0)}%'),
],
),
),
);
}
}
在这个例子中，我们模拟了一个异步操作，在 5 秒后将进度条的 value 设置为 1.0，表示完成。
Cupertino 开关
CupertinoSwitch
CupertinoSwitch 是 Cupertino 风格的开关组件。
class SwitchPage extends StatefulWidget {
@override
_SwitchPageState createState() => _SwitchPageState();
}
class _SwitchPageState extends State<SwitchPage> {
bool _isSwitched = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('开关'),
),
child: Center(
child: CupertinoSwitch(
value: _isSwitched,
onChanged: (value) {
setState(() {
_isSwitched = value;
});
},
),
),
);
}
}
这里 CupertinoSwitch 的 value 属性表示开关的当前状态，onChanged 回调函数在开关状态改变时更新状态。
Cupertino 文本输入框
CupertinoTextField
CupertinoTextField 是 Cupertino 风格的文本输入框。
class TextFieldPage extends StatefulWidget {
@override
_TextFieldPageState createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State<TextFieldPage> {
String _text = '';
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('文本输入框'),
),
child: Center(
child: CupertinoTextField(
placeholder: '请输入文本',
onChanged: (text) {
setState(() {
_text = text;
});
},
),
),
);
}
}
CupertinoTextField 的 placeholder 属性设置输入框的提示文本，onChanged 回调函数在文本改变时更新状态。
与 Material Design 的对比与选择
- 视觉风格
- Cupertino Design：强调简洁、圆润和精致的视觉效果，颜色搭配通常较为柔和，符合苹果设备的整体风格。例如，按钮和导航栏的样式都有独特的圆角和光泽感。
- Material Design：具有鲜明的色彩、大胆的图形和强烈的光影效果。它采用了“卡片式”布局，强调空间层次和操作反馈。
- 用户体验
- Cupertino Design：注重原生体验，对于 iOS 用户来说，使用 Cupertino 风格的应用会感到非常熟悉和舒适。其交互方式，如滑动返回等，都与 iOS 系统的操作习惯紧密结合。
- Material Design：提供了一套跨平台的统一设计语言，在 Android 设备上有很好的原生支持，同时也能适配其他平台。它强调直观的操作和丰富的动画反馈，以引导用户进行交互。
- 选择依据
- 如果目标用户主要是 iOS 用户，且希望提供原生般的体验，那么 Cupertino Design 是较好的选择。例如，开发一款针对 iPhone 用户的生产力工具或社交应用，采用 Cupertino 组件能更好地融入 iOS 生态。
- 如果应用需要跨平台，或者目标用户群体较为广泛，Material Design 可能更合适。它能在不同平台上保持相对一致的外观和体验，减少开发和维护成本。
优化与性能考虑
- 资源加载
- 在使用 Cupertino 组件时，要注意资源的加载。例如，图片资源在不同分辨率的 iOS 设备上可能需要进行优化。可以使用
AssetImage并结合ImageCache来管理图片加载，以避免重复加载相同的图片资源。 - 对于字体资源，如果应用使用了自定义字体，确保字体文件的大小适中，避免因字体文件过大导致应用启动时间过长。可以通过工具对字体文件进行裁剪，只保留应用中实际使用的字符。
- 在使用 Cupertino 组件时，要注意资源的加载。例如，图片资源在不同分辨率的 iOS 设备上可能需要进行优化。可以使用
- 组件复用
- 尽量复用 Cupertino 组件。例如，在列表中使用
CupertinoListTile时，如果列表项的结构和样式基本相同，可以将其封装成一个可复用的组件。这样不仅可以减少代码冗余，还能提高渲染性能。 - 对于导航栏等频繁使用的组件，也可以进行封装，通过传递不同的参数来定制其标题、按钮等内容，避免在每个页面都重复创建相同结构的导航栏。
- 尽量复用 Cupertino 组件。例如，在列表中使用
- 动画性能
- Cupertino 组件中的一些动画，如模态框的弹出和关闭动画，是默认实现的。但如果应用中有自定义的动画需求，要注意动画的性能。尽量使用 Flutter 提供的高效动画库，如
flutter/animation.dart中的AnimatedBuilder、AnimatedContainer等。 - 避免在动画中进行大量的计算或复杂的布局操作，因为这可能会导致帧率下降，影响用户体验。可以通过
TickerProviderStateMixin来管理动画的状态，确保动画的流畅性。
- Cupertino 组件中的一些动画，如模态框的弹出和关闭动画，是默认实现的。但如果应用中有自定义的动画需求，要注意动画的性能。尽量使用 Flutter 提供的高效动画库，如
国际化支持
- 文本国际化
- 对于 Cupertino 组件中的文本，如按钮文本、导航栏标题等，要支持国际化。可以使用 Flutter 的
flutter_localizations库。首先，在pubspec.yaml文件中添加依赖：
flutter_localizations: sdk: flutter- 然后，在
CupertinoApp中配置本地化：
CupertinoApp( localizationsDelegates: [ GlobalCupertinoLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ Locale('en', ''), Locale('zh', 'CN'), ], home: MyHomePage(), )- 接着，使用
CupertinoLocalizations来获取本地化的文本。例如，在按钮中：
CupertinoButton.filled( child: Text(CupertinoLocalizations.of(context).buttonLabel), onPressed: () { // 按钮点击逻辑 }, ) - 对于 Cupertino 组件中的文本，如按钮文本、导航栏标题等，要支持国际化。可以使用 Flutter 的
- 日期和时间格式
- 当使用
CupertinoDatePicker和CupertinoTimePicker时，日期和时间的显示格式也需要根据不同的语言和地区进行调整。可以通过DateFormat和TimeOfDayFormat结合本地化设置来实现。 - 例如：
这里通过CupertinoDatePicker( initialDateTime: _selectedDate, onDateTimeChanged: (dateTime) { setState(() { _selectedDate = dateTime; }); }, minimumDate: DateTime.now().subtract(Duration(days: 365)), maximumDate: DateTime.now().add(Duration(days: 365)), dateOrder: DatePickerDateOrder.dmy, locale: Locale('en', 'GB'), )locale属性设置了日期选择器的语言环境为英式英语，日期顺序为日 - 月 - 年。 - 当使用
实际应用案例分析
- 社交应用
- 假设我们正在开发一款类似于 Instagram 的社交应用，面向 iOS 用户。在应用的首页，使用
CupertinoNavigationBar作为导航栏，中间显示应用名称，右侧放置一个搜索按钮和一个发布按钮。 - 动态列表可以使用
CupertinoGroupedList来分组展示不同类型的动态，如关注用户的动态、热门动态等。每个动态项使用CupertinoListTile进行展示，包含用户头像、用户名、动态内容和互动按钮（点赞、评论等）。 - 当用户点击发布按钮时，弹出
CupertinoActionSheet，提供发布照片、视频、文字动态等选项。
- 假设我们正在开发一款类似于 Instagram 的社交应用，面向 iOS 用户。在应用的首页，使用
- 生产力应用
- 以一款任务管理应用为例，使用
CupertinoDatePicker和CupertinoTimePicker来设置任务的截止日期和提醒时间。在任务列表页面，使用CupertinoListTile展示每个任务的标题、描述和完成状态。 - 当用户点击某个任务时，进入任务详情页面，通过
CupertinoNavigationBar进行页面导航。在详情页面，可以使用CupertinoTextField来编辑任务内容，使用CupertinoSwitch来切换任务的重要性标记。
- 以一款任务管理应用为例，使用
通过以上对 Cupertino Design 组件在 Flutter 中的深度使用介绍，开发者可以更好地利用这些组件构建出符合 iOS 风格的高质量应用，为用户带来优秀的使用体验。在实际开发中，需要根据应用的需求和目标用户群体，合理选择和定制 Cupertino 组件，同时注意优化性能和提供良好的国际化支持。