Cupertino 组件
Cupertino 组件是 Flutter 提供的 iOS 风格组件，用于创建原生的 iOS 应用体验。
提示：使用 Cupertino 组件需要导入 `package:flutter/cupertino.dart`。
渲染效果预览
标题
内容
CupertinoPageScaffold
CupertinoPageScaffold 是 iOS 风格的页面布局组件。
CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('标题'),
),
child: Center(
child: Text('内容'),
),
)渲染效果预览
标题
CupertinoNavigationBar
CupertinoNavigationBar 是 iOS 风格的导航栏。
CupertinoNavigationBar(
middle: Text('标题'),
leading: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.back),
onPressed: () {
Navigator.pop(context);
},
),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.settings),
onPressed: () {
// 打开设置
},
),
)渲染效果预览
页面内容区域
CupertinoButton
CupertinoButton 是 iOS 风格的按钮。
CupertinoButton(
child: Text('点击我'),
color: CupertinoColors.systemBlue,
onPressed: () {
// 处理点击
},
)
// 填充按钮
CupertinoButton.filled(
child: Text('填充按钮'),
onPressed: () {},
)
// 文本按钮
CupertinoButton(
child: Text('文本按钮'),
onPressed: () {},
)渲染效果预览
CupertinoDialog
CupertinoDialog 是 iOS 风格的对话框。
showCupertinoDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('提示'),
content: Text('这是一个 iOS 风格的对话框'),
actions: [
CupertinoDialogAction(
child: Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text('确定'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
)渲染效果预览
提示
这是一个 iOS 风格的对话框
CupertinoAlertDialog
CupertinoAlertDialog 是 iOS 风格的警告对话框。
showCupertinoDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('警告'),
content: Text('确定要删除此项目吗？'),
actions: [
CupertinoDialogAction(
child: Text('取消'),
onPressed: () => Navigator.pop(context),
),
CupertinoDialogAction(
isDestructiveAction: true,
child: Text('删除'),
onPressed: () {
// 执行删除操作
Navigator.pop(context);
},
),
],
),
)渲染效果预览
警告
确定要删除此项目吗？
CupertinoPageScaffold
CupertinoPageScaffold 提供 iOS 风格的页面结构。
CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('我的页面'),
),
child: SafeArea(
child: Column(
children: [
Center(
child: Text('页面内容'),
),
],
),
),
)渲染效果预览
我的页面
页面内容
CupertinoPicker
CupertinoPicker 是 iOS 风格的选择器。
FixedExtentScrollController _scrollController =
FixedExtentScrollController(initialItem: 0);
CupertinoPicker(
scrollController: _scrollController,
itemExtent: 32.0,
onSelectedItemChanged: (int index) {
print('选择了: $index');
},
children: List.generate(100, (int index) {
return Center(
child: Text('项目 $index'),
);
}),
) 渲染效果预览
项目 4
项目 5
项目 6
项目 7
项目 8
Cupertino 组件特点：
- 遵循 iOS 设计规范
- 提供原生 iOS 体验
- 与 Material 组件可以混用
- 支持深色模式
- 动态字体大小