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

TDesign：NavBar 导航栏

article 2024/12/23 5:11:20

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(
  // 如果你想监听默认的返回事件，请添加onBack
  onBack: (){
    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('点击了设置');
    },
  ),
],