Super Cupertino Navigation Bar
Flutter 扩展
Super Cupertino Navigation Bar
自定义您的 iOS 风格导航栏，提升您项目的用户体验。
作为一名欣赏 Cupertino 精致设计的开发者，您不想将这个自定义包添加到您的开发应用中吗？Super Cupertino Navigation Bar 帮助您创建一个 iOS 风格的导航栏，同时允许您添加搜索字段并自定义头像。
| 浮动的标题 | 固定的标题 | 仅标题 |
|---|---|---|
 |
 |
 |
| 普通导航栏浮动 | 普通导航栏固定 | |
 |
 |
这是从一开始就必需的，我刚刚完成了它。
为什么你应该使用 Super Cupertino Navigation Bar？
-
iOS 风格导航栏：为您的 iOS 用户提供更熟悉体验。Super Cupertino Navigation Bar 反映了 iOS 设备的原生外观和感觉。
-
搜索字段：帮助用户更快、更轻松地在您的应用中查找内容。提供用户搜索能力。
-
头像自定义：让用户能够个性化他们的个人资料。自定义头像的添加是识别和定制用户的绝佳方式。
-
完美兼容：与 Cupertino 库无缝集成。它与您的 Flutter 应用的其他组件和谐工作。
-
过渡动画：使用此扩展，您可以实现页面路由上的所有过渡动画。
好的！让我们深入探讨！
示例。尽情享用！
目录
入门
添加依赖
dependencies:
super_cupertino_navigation_bar: ^1.0.0
导入包
import 'package:super_cupertino_navigation_bar/super_cupertino_navigation_bar.dart';
易于使用
SuperCupertinoNavigationBar 小部件在其内部包含 CustomScrollView 小部件，因此您应该将子项放在 slivers 键下，其类型为 List。
CupertinoPageScaffold( //inside CupertinoPageScaffold
child: SuperCupertinoNavigationBar(
largeTitleType: AppBarType.LargeTitleWithFloatedSearch, // Set desired AppBarType
avatarModel: AvatarModel(
avatarUrl: null,
avatarIsVisible: true, // Avatar is hidden as default, if you want to set visible, simply set true
onTap: () => print("some event"),
),
largeTitle: const Text('Home'),
searchFieldDecoration: SearchFieldDecoration(
hideSearchBarOnInit: true,
searchFieldBehaviour: SearchFieldBehaviour.ShowResultScreenAfterFieldInput, // There are 3 SearchFieldBehaviour
),
slivers: [
// Any Sliver here
],
),
);
SuperCupertinoNavigationBar 属性
| 属性 | 类型 | 说明 |
|---|---|---|
| largeTitle | Widget | 提供 Text 小部件以获得正确的过渡动画 |
| leading | Widget | 您可以在导航栏左上方添加所需的小部件 |
| automaticallyImplyLeading | 布尔值 | 用于在导航到路由后的第二个屏幕上移除返回按钮 |
| automaticallyImplyTitle | 布尔值 | 如果为 true 且 [largeTitle] 为 null，则自动填充一个 Text() 小部件，其中包含当前路由的标题 |
| alwaysShowMiddle | 布尔值 | 如果您只想在展开状态下显示 [largeTitle] 并在折叠状态下显示 [middle]，则应将此值设置为 false |
| physics | ScrollPhysics | SuperCupertinoNavigationBar 包含 CustomScrollView。Physic 用于设置 CustomScrollView 的 physics |
| previousPageTitle | 字符串 | 手动指定上一个路由的标题，当自动暗示后退按钮时 |
| middle | Widget | 放置在导航栏中间的小部件。通常是标题或分段控件。 |
| trailing | Widget | 放置在导航栏末尾的小部件。通常是页面上的附加操作，如搜索或编辑功能。 |
| border | Border | 小部件内容将对齐的方向 |
| backgroundColor | 颜色 | 导航栏的背景颜色。如果包含透明度，则选项卡栏会自动对内容产生模糊效果。如果为 null，则默认为 CupertinoTheme 的 scaffoldBackgroundColor。 |
| collapsedBackgroundColor | 颜色 | 折叠导航栏的背景颜色。如果包含透明度，则选项卡栏会自动对内容产生模糊效果。如果为 null，则默认为 CupertinoTheme 的 barBackgroundColor。 |
| brightness | Brightness | 指定 backgroundColor 的亮度。设置此值会更改系统状态栏的样式。 |
| padding | EdgeInsetsDirectional | 导航栏内容的填充。默认值：垂直方向，高度与导航栏本身减去状态栏的高度相同。水平方向，填充为 16 像素 |
| transitionBetweenRoutes | 布尔值 | 设置为 true 以在导航栏之间进行过渡 |
| heroTag | Object | 如果 transitionBetweenRoutes 为 true，则为导航栏的 Hero 小部件设置标签 |
| stretch | 布尔值 | 这指定了当发生负滚动时的导航栏行为。如果为 true，它会随着滚动内容一起移动。但它在滚动时将是静态的。 |
| slivers | List[Widget] | SuperCupertinoNavigationBar 包含 CustomScrollView，所以请将所有子项放在此处作为 Sliver Widget，例如 SliverToBoxAdapter 等。 |
| scrollController | ScrollController | SuperCupertinoNavigationBar 有自己的 scrollController，但如果您想自定义添加 scrollController，可以在此处设置。这将用作主要的 scrollController |
| appBarType | AppBarType (Enum) | AppBarType 是一个枚举，它将 Appbar 设置为大标题或普通导航栏，以及是否包含搜索栏。
值： LargeTitleWithPinnedSearch, LargeTitleWithFloatedSearch, LargeTitleWithoutSearch, NormalNavbarWithPinnedSearch, NormalNavbarWithFloatedSearch |
| searchFieldDecoration | SearchFieldDecoration (Model) | 这是 Search Field Model，您可以在下面找到更多信息 |
| avatarModel | AvatarModel (Model) | 这是 Avatar Model，您可以在下面找到更多信息 |
AppBarType 枚举
AppBarType 值如下；
enum AppBarType {
LargeTitleWithPinnedSearch,
LargeTitleWithFloatedSearch,
LargeTitleWithoutSearch,
NormalNavbarWithPinnedSearch,
NormalNavbarWithFloatedSearch,
}
SearchFieldDecoration 属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 控制器 | TextEditingController | SearchField TextEditingController |
| onChanged | ValueChanged[String] | onChange 时获取文本值并执行某些事件 |
| onSubmitted | ValueChanged[String] | onSubmit 时获取文本值并执行某些事件 |
| placeholderText | 字符串 | Search Field 占位符文本值 |
| 装饰 | BoxDecoration | 样式化您的搜索字段 |
| keyboardType | TextInputType | 选择 TextInputType |
| padding | EdgeInsetsGeometry | 仅适用水平内边距 |
| prefixIconColor | 颜色 | |
| placeholderColor | 颜色 | |
| prefixInsets | EdgeInsetsGeometry | 前缀图标周围的内边距 |
| prefixIcon | Widget | 选择所需的图标，默认是 Icon(CupertinoIcons.search) |
| suffixInsets | EdgeInsetsGeometry | 后缀图标周围的内边距 |
| suffixIcon | Icon | 选择所需的图标，默认是 Icon(CupertinoIcons.xmark_circle_fill) |
| onSuffixTap | VoidCallback | 不返回任何值。仅清除搜索字段，您可以执行某些事件 |
| onCancelTap | VoidCallback | 不返回任何值。仅清除搜索字段并取消搜索操作。您也可以执行某些事件 |
| paddingLeft | 双精度 | |
| paddingRight | 双精度 | |
| cancelButtonName | 字符串 | |
| cancelButtonStyle | TextStyle | |
| cursorColor | 颜色 | |
| onFocused | ValueChanged[bool] | 在搜索字段聚焦时触发所需的事件 |
| hideSearchBarOnInit | 布尔值 | 这仅适用于 LargeTitleWithFloatedSearch 和 NormalNavbarWithFloatedSearch |
| searchFieldBehaviour | SearchFieldBehaviour (Enum) | 这指定了结果屏幕的行为。可以设置 3 种行为
ShowResultScreenAfterFieldInput, ShowResultScreenAfterFieldFocused, NeverShowResultScreen。 |
| searchResultHeader | SearchResultHeader (Widget) | 这只是一个模型，需要设置高度和子项属性 |
| searchResultChildren | List[Widget] | 这会根据 SearchFieldBehaviour 显示。您可以在执行所需操作（如 onChanged、onSubmitted 等）后在此处设置子项。 |
SearchFieldBehaviour 枚举
SearchFieldBehaviour 值如下；
enum SearchFieldBehaviour {
ShowResultScreenAfterFieldInput,
ShowResultScreenAfterFieldFocused,
NeverShowResultScreen,
}
让我们看看预期的行为；
| ShowResultScreenAfterFieldInput | ShowResultScreenAfterFieldFocused | NeverShowResultScreen |
|---|---|---|
 |
 |
 |
SearchResultHeader
在搜索字段操作后，结果屏幕将出现，在此屏幕上，搜索栏下方您可以放置任何您想要的小部件！看看图片
| 示例 1 Apple Music | 示例 2 Apple Music |
|---|---|
 |
 |
const SearchResultHeader({
super.key,
required this.height,
required this.child,
});
AvatarModel 属性
您可以像 Apple Applications 一样设置头像。查看所需模型属性；
| 属性 | 类型 | 说明 |
|---|---|---|
| avatarUrl | 字符串 | 在此处写入 Image.asset(url) 的 url 字符串 |
| avatarIsVisible | 布尔值 | 默认值为 false |
| onTap | VoidCallback | Callback，设置 onTap 事件 |
| avatarIconColor | 颜色 | 头像图标的默认颜色是 CupertinoColors.link |
| icon | IconData | 您可以更改默认图标，即 CupertinoIcons.profile_circled |
AvatarModel({
this.avatarUrl,
this.avatarIsVisible = false,
this.onTap,
this.avatarIconColor = CupertinoColors.link,
this.icon = CupertinoIcons.profile_circled,
});
一些注意事项
- 如果您想使用默认导航栏，可以简单地这样使用；
CupertinoPageScaffold(
navigationBar: DefaultCupertinoNavigationBar( // same as CupertinoNavigationBar but little differencies
backgroundColor: CupertinoColors.systemGrey.withOpacity(0.5),
middle: const Text('CupertinoNavigationBar Sample'),
)
);
- 不使用默认导航栏，您可以简单地使用此值来使用 SuperCupertinoNavigationBar 而不使用 largeTitle；
CupertinoPageScaffold( //inside CupertinoPageScaffold
child: SuperCupertinoNavigationBar(
largeTitleType: AppBarType.NormalNavbarWithoutSearch, // This will make appbar like CupertinoNavigationBar
middle: Text("Home")
slivers: [
// Any Sliver here
],
),
);
在这些情况下，您应该注意您将使用自定义滚动视图和 sliver 小部件。
贡献和提供反馈
如果您希望为该项目做出贡献，请查看我的 GitHub 仓库并报告任何问题或错误。您可以帮助我进一步改进项目！
许可证
此包根据 MIT 许可证授权。有关详细信息，请查看 LICENSE 文件。
