Flutter教学目录持续更新中

Github源代码持续更新中

1.介绍

• CupertinoPageScaffold：一个iOS风格的页面的基本布局结构。包含内容和导航栏
• CupertinoNavigationBar：iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。

2.CupertinoPageScaffold

• navigationBar：顶部导航栏
• backgroundColor：背景色
• resizeToAvoidBottomInset = true：键盘弹出页面是否被顶起
• child：

3.CupertinoNavigationBar

• leading：左边组件
• middle：中间组件
• trailing：右边组件
• border = _kDefaultNavBarBorder：边框
• backgroundColor：背景色
• brightness：
• padding：边距
• actionsForegroundColor：actions颜色

4.使用

1602163507(1).png

class _CupertinoPageScaffoldPageState extends State<CupertinoPageScaffoldPage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // leading: Icon(Icons.arrow_back),
        trailing: Icon(Icons.more_vert),
        backgroundColor: Colors.blue,
        padding: EdgeInsetsDirectional.zero,
        actionsForegroundColor: Colors.white,
        middle: Text('CupertinoPageScaffold'),
      ),
      backgroundColor: Colors.white,
      child: Center(
        child: Text(
          'CupertinoPageScaffold',
          style: TextStyle(
            color: Colors.black,
            decoration: TextDecoration.none,
          ),
        ),
      ),
    );
  }
}

5. Cupertino下text有黄色横线的问题

1602163577(1).png

有小伙伴问这个问题，这是因为在MaterialApp下使用Cupertino组件导致的，解决办法有两种：

• 将App改为CupertinoApp
• 改写Text-TextStyle-decoration-TextDecoration.none

下一节：Cupertino组件之CupertinoTabScaffold、CupertinoTabBar、CupertinoTabView

Flutter（42）：Cupertino组件之CupertinoTabScaffold、CupertinoTabBar、CupertinoTabView

Flutter教学目录持续更新中

Github源代码持续更新中