Skip to content
On this page

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类型描述
titleWidget | String标题
leftTextWidget | String | null左侧文本
leftArrowWidget | IconData | true左侧箭头
leftWidget自定义左侧
onLeftTapFunction()左侧点击回调
rightTextWidget | String | null右侧文本
rightArrowWidget | IconData | true右侧箭头
rightWidget自定义右侧
onRightTapFunction()右侧点击回调
noBorderbool无下边框