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 详解

你可能感兴趣的:(Flutter入门(52):Flutter 组件之 CupertinoPageScaffold 详解)