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

运行效果如下

相关推荐
Magnetic_h4 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
00后程序员张6 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
前端小超超6 小时前
capacitor配置ios应用图标不同尺寸
ios·蓝桥杯·cocoa
2501_915106327 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
kymjs张涛10 小时前
零一开源|前沿技术周刊 #16
ios·apple·hacker news
2301_8210465210 小时前
Python与Go结合
ios·iphone
他们都不看好你,偏偏你最不争气11 小时前
【iOS】AFNetworking
开发语言·macos·ios·objective-c
zhanggui13 小时前
iOS Debug Symbols
ios·xcode·debug symbox
ALLIN14 小时前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei14 小时前
Flutter 国际化
flutter