07、FluterCupertino

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,),
      ),
    );
  }
}