Cupertino风格
Cupertino风格组件即iOS风格组件1，主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。
本章所涉及的组件及内容有：
CupertinoActivityIndicator组件
CupertinoAlertDialog对话框组件
CupertinoButton按钮组件
Cupertino导航组件集（CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等）
CupertinoActivityIndicator
CupertinoActivityIndicator是一个iOS风格的loading指示器，通常用来做加载等待的效果展示。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| radius | double | 10.0 | 加载图形的半径值，值越大图形越大 |
| animating | bool | true | 是否播放加载动画，通常用来做动画控制处理，加载数据时为true，数据加载完成为false |
使用Cupertino风格组件需要导入Cupertino库，示例代码如下所示：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CupertinoActivityIndicator示例',
home: Scaffold(
appBar: AppBar(title: Text('CupertinoActivityIndicator示例'),),
body: Center(
child: CupertinoActivityIndicator(
radius: 60.0,// 值越大加载的图形越大
),
),
),
);
}
}
CupertinoAertDialog
CupertinoAlertDialog和Material Design风格的AlertDialog相似，内容部分可以用SingleChildScrollView包裹。操作按钮建议用CupertinoDialogAction组件。
| 属性名 | 类型 | 说明 |
|---|---|---|
| actions | List |
对话框底部操作按钮，例如确定、取消 |
| title | Widget | 通常是一个文本组件 |
| content | Widget | 内容部分，通常为对话框的提示内容 |
编写一个iOS风格的删除确认对话框示例，完整代码如下：、
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CupertinoAlertDialog示例',
home: Scaffold(
appBar: AppBar(title: Text('CupertinoAlertDialog示例'),),
body: Center(
child: CupertinoAlertDialog(
// 对话框标题
title: Text('提示'),
content: SingleChildScrollView(
// 对话框内容部分
child: ListBody(
children: [
Text('是否要删除'),
Text('一旦删除数据不可恢复')
],
),
),
actions: [
CupertinoDialogAction(
child: Text('确定'),
onPressed: (){},
),
CupertinoDialogAction(
child: Text('取消'),
onPressed: (){},
)
],
),
),
),
);
}
}
CupertinoButton
CupertinoButton展示iOS风格的按钮。它可以响应按下事件，并且按下时会带一个触摸的效果。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | Color | 组件的颜色 | |
| disabledColor | Color | ThemeData.disabledColor | 组件禁用颜色，默认为主题里的禁用颜色 |
| onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
| child | Widget | 按钮的Child通常为一个Text文本组件，用来显示按钮文本 | |
| enable | bool | true | 按钮是否为禁用状态 |
示例代码如下：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CupertinoButton示例',
home: Scaffold(
appBar: AppBar(title: Text('CupertinoButton示例'),),
body: Center(
child: CupertinoButton(
// 按钮label
child: Text('CupertinoButton'),
color: Colors.blue,
onPressed: (){},
),
),
),
);
}
}
Cupertino导航组件集
Cupertino导航相关的组件也非常丰富，由于它们之间有关联关系，所以这里把导航相关组件放置一起说明。
- CupertinoTabScaffold
选项卡组件，将选项卡及选项卡视图绑定在一起。常用属性如下：
| 属性名 | 类型 | 说明 |
|---|---|---|
| tabBar | CupertinoTabBar | 选项卡按钮，通常由图标加文本组成 |
| tabBuilder | IndexedWidgetBuilder | 选项卡视图构造器 |
- CupertinoTabBar
选项卡按钮，通常由BottomNavigationBarItem组成包含图标加文本。常用属性如下：
| 属性名 | 类型 | 说明 |
|---|---|---|
| items | List |
选项卡按钮数据集合，通常由图标加文本组成 |
| backgroundColor | Color | 选项卡按钮背景色 |
| activeColor | Color | 选中的选项卡按钮前景色 |
| iconSize | double | 选项卡图标大小 |
- CupertinoTabView
选项卡视图，常用属性如下所示：
| 属性名 | 类型 | 说明 |
|---|---|---|
| builder | WidgetBuilder | 选项卡视图构造器 |
| routes | Map<String,WidgetBuilder> | 选项卡视图路由 |
- CupertinoPageScaffold
页面的基本布局结构，包含内容和导航栏。常用属性如下所示：
| 属性名 | 类型 | 说明 |
|---|---|---|
| backgroundColor | Color | 页面背景色 |
| navigationBar | ObstructingPreferredSizeWidget | 顶部导航栏按钮，包含左中右三个子组件，比如：页面中的返回按钮 |
| child | Widget | 页面的主要内容 |
- CupertinoNavigationBar
| 属性名 | 类型 | 说明 |
|---|---|---|
| middle | Widget | 导航栏中间组件，通常为页面标题 |
| trailing | Widget | 导航栏右边组件，通常为菜单按钮 |
| leading | Widget | 导航栏左边组件，通常为返回按钮 |
综合案例的完整代码如下所示：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Cupertino导航组件集',
theme: ThemeData.light(), // 浅色主题
home: MyPage(),
);
}
}
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => new _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
// 最外层导航选项卡
return CupertinoTabScaffold(
// 底部选项卡
tabBar: CupertinoTabBar(
backgroundColor: CupertinoColors.lightBackgroundGray, // 选项卡背景色
items: [
// 选项卡项，包含图片及文字
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
title: Text('主页')
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.conversation_bubble),
title: Text('聊天')
)
],
),
tabBuilder: (context, index) {
// 选项卡绑定的视图
return CupertinoTabView(
builder: (context) {
switch (index) {
case 0:
return HomePage();
break;
case 1:
return ChatPage();
break;
default:
return Container();
}
},
);
},
);
}
}
// 主页
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
// 基本布局结构，包含内容和导航栏
navigationBar: CupertinoNavigationBar(
// 导航栏，只包含内容和导航栏
middle: Text('主页'),
),
child: Center(
child: Text('主页', style: Theme.of(context).textTheme.button,),
),
);
}
}
// 聊天页面
class ChatPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
// 导航栏，包含左中右三部分
middle: Text('聊天面板'), // 中间标题
trailing: Icon(CupertinoIcons.add), // 右侧按钮
leading: Icon(CupertinoIcons.back), // 左侧按钮
),
child: Center(
child: Text('聊天面板', style: Theme.of(context).textTheme.button,),
),
);
}
}