1. 基本介紹

CupertinoPageScaffold 與 Scaffold 其實(shí)很像，只不過(guò)是 iOS 風(fēng)格的帶導(dǎo)航條頁(yè)面。

CupertinoPageScaffold.png

2. 示例代碼

代碼下載地址。如果對(duì)你有幫助的話記得給個(gè)關(guān)注，代碼會(huì)根據(jù)我的 Flutter 專題不斷更新。

3. CupertinoPageScaffold 屬性介紹

4. CupertinoPageScaffold 詳解

CupertinoPageScaffold 的自定義注意體現(xiàn)在 NavigationBar 中，之前有寫過(guò)，這里不多敘述了。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 <FMCupertinoPageScaffoldVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: _cupertinoNavigationBar(), // 導(dǎo)航條
      backgroundColor: Colors.cyan, // 背景色
      // 子控件
      child: ListView(
        children: [

        ],
      ),
    );
  }

  CupertinoNavigationBar _cupertinoNavigationBar(){
    return CupertinoNavigationBar(
      // leading: Icon(Icons.arrow_back), // 左側(cè)組件
      automaticallyImplyLeading: true, // 是否添加默認(rèn) leading，默認(rèn)為 true。當(dāng) leading 為空會(huì)默認(rèn)添加一個(gè)返回按鈕
      automaticallyImplyMiddle: true, // 是否添加默認(rèn) middle，默認(rèn)為 true，如果 middle 為空，且當(dāng)前 route 為 CupertinoPageRoute，會(huì)默認(rèn)填充 route.title
      previousPageTitle: "back", // 當(dāng) leading 為空，且 automaticallyImplyLeading == true，會(huì)出現(xiàn)在默認(rèn)返回箭頭右邊的文字
      middle: Text("CupertinoPageScaffold"), // 中間標(biāo)題組件
      trailing: Icon(Icons.add), // 右側(cè)組件
      // 邊框
      border: Border(
        bottom: BorderSide(
            color: Colors.red,
            width: 1
        ),
      ),
      backgroundColor: Colors.blue.shade100, // 背景色
      brightness: Brightness.light, // 上方電量，事件，Wifi 等狀態(tài)欄顏色
      // 內(nèi)邊距，用來(lái)調(diào)節(jié)所有子組件上下左右偏移
      padding: EdgeInsetsDirectional.only(
          start: 15,
          bottom: 0,
          end: 15
      ),
      // leading 和 trailing 的默認(rèn)顏色
      actionsForegroundColor: Colors.red,
    );
  }
}

CupertinoPageScaffold.png

5. 技術(shù)小結(jié)

CupertinoPageScaffold 就幾個(gè)屬性，需要自定義的基本只有導(dǎo)航條，看這里 -> Flutter入門（50）：Flutter 組件之 CupertinoNavigationBar 詳解