Flutter CupertinoNavigationBar iOS 风格导航栏的组件

早起的年轻人2025-02-22 17:55

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

运行效果如下