Flutter CupertinoNavigationBar iOS 风格导航栏的组件

devtools/2025/2/23 4:49:11/

CupertinoNavigationBar 是 Flutter 中用于创建具有 iOS 风格导航栏的组件，它提供了类似 iOS 应用中导航栏的外观和交互效果。下面将详细介绍它的相关信息和具体用法。

特点

iOS 风格：具有 iOS 系统原生导航栏的外观和动画效果，包括标题样式、按钮交互等。
简单易用：可以方便地设置标题、左右两侧的操作按钮等。

构造函数及常用参数

CupertinoNavigationBar({Key? key,Widget? leading,Widget? automaticallyImplyLeading = true,String? middle,Widget? trailing,double? border = const BorderSide(color: CupertinoDynamicColor.withBrightness(color: Color(0x4D000000), darkColor: Color(0x29FFFFFF))),Color? backgroundColor,double? transitionBetweenRoutes = true,bool? automaticallyImplyMiddle = true,
})

leading：导航栏左侧的组件，通常用于放置返回按钮等。
automaticallyImplyLeading：是否自动根据导航栈情况显示返回按钮，默认为 true。
middle：导航栏中间的标题，通常是一个字符串。
trailing：导航栏右侧的组件，通常用于放置操作按钮等。
border：导航栏底部的边框，默认为一条浅灰色的线。
backgroundColor：导航栏的背景颜色。
transitionBetweenRoutes：是否在路由切换时使用过渡动画，默认为 true。
automaticallyImplyMiddle：是否自动显示中间的标题，默认为 true。

具体用法示例

以下是一个简单的示例，展示了如何使用 CupertinoNavigationBar：

import 'package:flutter/cupertino.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const CupertinoApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(leading: CupertinoButton(padding: EdgeInsets.zero,child: const Icon(CupertinoIcons.back),onPressed: () {// 处理返回逻辑Navigator.pop(context);},),middle: const Text('我的主页'),trailing: CupertinoButton(padding: EdgeInsets.zero,child: const Icon(CupertinoIcons.search),onPressed: () {// 处理搜索逻辑print('点击了搜索按钮');},),),child: Center(child: const Text('这是主页内容'),),);}
}