NavBar 导航栏
代码演示
基本用法
默认自动发现路由返回,可使用 leftArrow: false 取消
dart
const NavBar(title: "Title"),
渲染左侧文本和图标
dart
const NavBar(title: "Title", leftText: "Back", leftArrow: true),
渲染右侧文本和图标
dart
const NavBar(
title: "Title",
leftText: "Back",
leftArrow: true,
rightArrow: VanIcons.search,
),
完全自定义一侧内容
dart
NavBar(
title: "Title",
leftArrow: true,
right: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [
NavBarBtn(px: 10, icon: VanIcons.search),
NavBarBtn(px: 10, icon: VanIcons.more_o),
],
),
),
API
Props | 类型 | 描述 |
---|---|---|
title | Widget | String | 标题 |
leftText | Widget | String | null | 左侧文本 |
leftArrow | Widget | IconData | true | 左侧箭头 |
left | Widget | 自定义左侧 |
onLeftTap | Function() | 左侧点击回调 |
rightText | Widget | String | null | 右侧文本 |
rightArrow | Widget | IconData | true | 右侧箭头 |
right | Widget | 自定义右侧 |
onRightTap | Function() | 右侧点击回调 |
noBorder | bool | 无下边框 |