当前位置：首页 > news >正文

TDesign：NavBar 导航栏

news 2025/7/1 12:58:10

NavBar 导航栏

左图，右标

在这里插入图片描述

appBar: TDNavBar(padding: EdgeInsets.only(left: 0,right: 30.w), // 重写左右内边距centerTitle:false, // 不显示标题height: 45, // 高度titleWidget: TDImage( // 左图assetUrl: 'assets/img/logo.png',width: 147.w,height: 41.w,),backgroundColor:  const Color(0xffE93323), // 背景screenAdaptation: true, // 默认true，适配手机状态栏高度useDefaultBack: false, // 显示左侧返回按键rightBarItems: [TDNavBarItem(icon: TDIcons.scan, iconSize: 32,iconColor: Colors.white,action: (){print('点击了扫描1');},),TDNavBarItem(icon: TDIcons.scan, iconSize: 32,iconColor: Colors.white,action: (){print('点击了扫描2');},),]
),

默认二级页

在这里插入图片描述

appBar: TDNavBar(// 如果你想监听默认的返回事件，请添加onBackonBack: (){print('点击了返回');},height: 45,title: '我的',titleFontWeight: FontWeight.w600,backgroundColor: Colors.white,screenAdaptation: true,useDefaultBack: true,rightBarItems: [TDNavBarItem(icon: TDIcons.more,iconSize: 24,action: () {print('点击了');},),]
),

右侧自定义widget

在这里插入图片描述

rightBarItems: [TDNavBarItem(padding: const EdgeInsets.only(right: 10),  // 设置padding可调整2个图标之间的距离iconWidget: const TDImage(assetUrl: 'assets/img/mine-18.png',width: 24,height: 24,),action: (){print('点击了设置');},),
],