Flutter CupertinoNavigationBar iOS 风格导航栏的组件

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

特点

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

构造函数及常用参数

dart 复制代码
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

dart 复制代码
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget 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('这是主页内容'),
      ),
    );
  }
}

运行效果如下

相关推荐
西西学代码3 小时前
Flutter---EQ均衡器
flutter
RollingPin5 小时前
iOS八股文之 RunLoop
ios·多线程·卡顿·ios面试·runloop·ios保活·ios八股文
2501_916007477 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
LinXunFeng7 小时前
Flutter webview 崩溃率上升怎么办?我的分析与解决方案
flutter·ios·webview
游戏开发爱好者89 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
西西学代码10 小时前
Flutter---GridView+自定义控件
flutter
Nick568311 小时前
Xcode16 避坑
ios
ii_best11 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器
2501_9159090611 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
hweiyu0011 小时前
苹果iOS开发零基础特训(视频教程)
ios