Flutter入门（52）：Flutter 组件之 CupertinoPageScaffold 详解

1. 基本介绍

CupertinoPageScaffold 与 Scaffold 其实很像，只不过是 iOS 风格的带导航条页面。

CupertinoPageScaffold.png

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. CupertinoPageScaffold 属性介绍

CupertinoPageScaffold 属性	介绍
navigationBar	导航条，Flutter入门（50）：Flutter 组件之 CupertinoNavigationBar 详解
backgroundColor	背景色
resizeToAvoidBottomInset	是否调整自身大小来避免底部嵌入，默认为 true。例如键盘弹起输入时防止输入框和键盘重叠遮挡。
child	@required 子控件

CupertinoNavigationBar 属性	介绍
leading	左侧组件
automaticallyImplyLeading	是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
automaticallyImplyMiddle	是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
previousPageTitle	当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
middle	中间标题组件
trailing	右侧组件
border	边框，默认为 _kDefaultNavBarBorder
backgroundColor	背景色
brightness	上方电量，事件，Wifi 等状态栏颜色
padding	内边距，用来调节所有子组件上下左右偏移
actionsForegroundColor	leading 和 trailing 的默认颜色
transitionBetweenRoutes	默认为 true
heroTag	默认为 _defaultHeroTag

4. CupertinoPageScaffold 详解

CupertinoPageScaffold 的自定义注意体现在 NavigationBar 中，之前有写过，这里不多叙述了。Flutter入门（50）：Flutter 组件之 CupertinoNavigationBar 详解

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FMCupertinoPageScaffoldVC extends StatefulWidget{
  @override
  FMCupertinoPageScaffoldrState createState() => FMCupertinoPageScaffoldrState();
}

class FMCupertinoPageScaffoldrState extends State  {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: _cupertinoNavigationBar(), // 导航条
      backgroundColor: Colors.cyan, // 背景色
      // 子控件
      child: ListView(
        children: [

        ],
      ),
    );
  }

  CupertinoNavigationBar _cupertinoNavigationBar(){
    return CupertinoNavigationBar(
      // leading: Icon(Icons.arrow_back), // 左侧组件
      automaticallyImplyLeading: true, // 是否添加默认 leading，默认为 true。当 leading 为空会默认添加一个返回按钮
      automaticallyImplyMiddle: true, // 是否添加默认 middle，默认为 true，如果 middle 为空，且当前 route 为 CupertinoPageRoute，会默认填充 route.title
      previousPageTitle: "back", // 当 leading 为空，且 automaticallyImplyLeading == true，会出现在默认返回箭头右边的文字
      middle: Text("CupertinoPageScaffold"), // 中间标题组件
      trailing: Icon(Icons.add), // 右侧组件
      // 边框
      border: Border(
        bottom: BorderSide(
            color: Colors.red,
            width: 1
        ),
      ),
      backgroundColor: Colors.blue.shade100, // 背景色
      brightness: Brightness.light, // 上方电量，事件，Wifi 等状态栏颜色
      // 内边距，用来调节所有子组件上下左右偏移
      padding: EdgeInsetsDirectional.only(
          start: 15,
          bottom: 0,
          end: 15
      ),
      // leading 和 trailing 的默认颜色
      actionsForegroundColor: Colors.red,
    );
  }
}

CupertinoPageScaffold.png

5. 技术小结

CupertinoPageScaffold 就几个属性，需要自定义的基本只有导航条，看这里 -> Flutter入门（50）：Flutter 组件之 CupertinoNavigationBar 详解