Flutter Cupertino风格组件

1. 概述

Cupertino风格组件即IOS风格组件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前组件库还没有Material Design风格组件丰富。

2 CupertinoActivityIndicator组件

IOS风格loading指示器。

常用属性

属性名	类型	默认值	说明
radius	double	10.0	加载图形的半径
animating	bool	true	是否播放加载动画

3 CupertinoAlertDialog

与Material Design风格的AlertDialog类似。

常见属性

属性名	类型	说明
actions	List<Widget>	对话框底部操作按钮。如确定、取消。
title	Widget	对话框标题，通常是一个文本
content	Widget	对话框内容部分，通常为提示内容

4 CupertinoButton

IOS风格按钮。

常用属性

属性名	类型	默认值	说明
color	Color	-	按钮颜色
disableColor	Color	ThemeData.disabledColor	按钮禁用状态颜色
onPressed	VoidCallback	-	按钮按下时回调函数
child	Widget	-	按钮的child通常为Text文本，显示按钮名字
enable	bool	true	是否为禁用状态

5 Cupertino导航组件

5.1 CupertinoTabScaffold

选项卡组件，将选项卡按钮与选项卡视图绑定。

常用属性

属性名	类型	说明
tabBar	CupertinoTabBar	选项卡按钮，通常由图标和文本组成
tabBuilder	IndexedWidgetBuilder	选项卡视图构造器

5.2 CupertinoTabBar

选项卡按钮，通常由BottomNavigationBarItem组成包含图标加文本。

常用属性

属性名	类型	说明
items	List<BottomNavigationBarItem>	选项卡按钮集合
backgroundColor	Color	选项卡按钮背景色
activeColor	Color	选中按钮前景色
iconSize	double	选项卡图标大小

5.3 CupertinoTabView

选项卡视图。

常用属性

属性名	类型	说明
builder	WidgetBuilder	选项卡视图构造器
routes	Map<String, WidgetBuilder>	选项卡视图路由

5.4 CupertinoPageScaffold

页面的基本布局结构。包含内容和导航栏。

常用属性

属性名	类型	说明
backgroudColor	Color	页面背景色
navigationBar	ObstructingPreferredSizeWidget	顶部导航栏按钮。包含左中右三个子组件
child	Widget	页面的主要内容

5.5 CupertinoNavigationBar

导航栏结构组件。

常用属性

属性名	类型	说明
middle	Widget	导航栏中间组件，通常为页面标题
trailing	Widget	导航栏右边组件，通常为菜单按钮
leading	Widget	导航栏左边组件，通常为返回按钮

6 示例

6.1 示例1-CupertinoButton

import 'dart:math';

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: 'MaterialApp',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CupertinoButton(
          child: Text('CupertinoButton'),
          color: Color(0xff0000ff),
          onPressed: () {},
        ),
      ),
    );
  }
}

效果显示：

6.2 示例2-CupertinoAlertDialog

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: 'MaterialApp',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CupertinoAlertDialog(
            title: Text('标题'),
          content: Text('aaaa'),
          actions: <Widget>[
            CupertinoDialogAction(
              child: Text('确定'),
            ),
            CupertinoDialogAction(
              child: Text('取消'),
            ),
          ],
        ),
      ),
    );
  }
}

6.3 示例3-CupertinoActivityIndicator

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: 'MaterialApp',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(
//              strokeWidth: ,
                ),
            SizedBox(
              height: 50.0,
            ),
            CupertinoActivityIndicator(
              radius: 15.0,
            ),
          ],
        ),
      ),
    );
  }
}

效果显示：

6.4 示例4

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: 'MaterialApp',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('主页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('消息'),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          builder: (context) {
            switch (index) {
              case 0:
                return MyHome();
                break;
              case 1:
                return MyMessage();
                break;
            }
          },
        );
      },
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(

        middle: Text('主页'),
        leading: Icon(CupertinoIcons.back),
        trailing: Icon(CupertinoIcons.search),
      ),
      child: Center(
        child: Text('主页'),
      ),
    );
  }
}

class MyMessage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('消息'),
        leading: Icon(CupertinoIcons.back),
        trailing: Icon(CupertinoIcons.search),
      ),
      child: Center(
        child: Text('消息'),
      ),
    );
  }
}

效果显示：