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

运行效果如下

相关推荐
笑尘pyrotechnic8 小时前
DocC的简单使用
ios·objective-c
谈吐大方的鹏sir9 小时前
SwiftUI-Text组件学习
ios
你听得到119 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
不自律的笨鸟10 小时前
iOS 26,双版本更新来了
ios·iphone
RaidenLiu14 小时前
Flutter Shader预热技术解析与实践指南
flutter·前端框架
归辞...15 小时前
「iOS」————消息传递和消息转发
ios
他们都不看好你,偏偏你最不争气1 天前
iOS —— 天气预报仿写总结
ios
ITfeib1 天前
Flutter基础
flutter
RaidenLiu1 天前
RepaintBoundary是什么?怎么用?
flutter
白玉cfc1 天前
【iOS】网易云仿写
ui·ios·objective-c