iOS风格的页面布局脚手架结构,可指定顶部的导航栏和页面背景色。

相关组件

CupertinoNavigationBar

CupertinoPageScaffold基本用法

  1. <br />【child】 : 内容 【Widget】<br />【backgroundColor】 : 背景色 【Color】<br />【navigationBar】 : 头部 【ObstructingPreferredSizeWidget】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589459213976-a1430d2c-27ab-4e22-9758-1b282b84bd3b.png#align=left&display=inline&height=586&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1172&originWidth=802&size=32080&status=done&style=none&width=401)
import 'package:flutter/cupertino.dart';
class CustomCupertinoPageScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 300,
      child: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          leading: Icon(CupertinoIcons.reply),
          trailing: Icon(CupertinoIcons.share),
          middle: Text('Flutter Unit'),
        ),
        backgroundColor: CupertinoColors.systemBackground,
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}