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

运行效果如下

相关推荐
程序员老刘2 小时前
2025年Flutter状态管理新趋势:AI友好度成为技术选型第一标准
flutter·ai编程·客户端
jh_cao6 小时前
(3)SwiftUI 的状态之上:数据流与架构(MVVM in SwiftUI)
ios·架构·swiftui
AGG_Chan6 小时前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
方君宇8 小时前
iOS App小组件(Widget)设置透明背景
ios
墨客希8 小时前
通俗易懂的理解Vue.js
vue.js·flutter
恋猫de小郭8 小时前
React 和 React Native 不再直接归属 Meta,React 基金会成立
android·前端·ios
—Qeyser9 小时前
Flutter bottomNavigationBar 底部导航栏
flutter
ZFJ_张福杰9 小时前
【Flutter】APP的数据安全(基于Flutter 交易所APP的总结)
flutter·web3·区块链·app·交易所
HarderCoder1 天前
Swift 中的基本运算符:从加减乘除到逻辑与或非
ios·swift