Skip to content
On this page

TabBar 标签栏

代码演示

基本用法

dart
TabBar(
  value: model.value,
  onChange: (value) => model.value = value,
  children: const [
    TabBarItem(value: 0, text: "Home", icon: VanIcons.home_o),
    TabBarItem(value: 1, text: "Search", icon: VanIcons.search),
    TabBarItem(value: 2, text: "DM", icon: VanIcons.friends_o),
    TabBarItem(value: 3, text: "Me", icon: VanIcons.user_o),
  ],
),

带徽标

dart
TabBar(
  value: model.value,
  onChange: (value) => model.value = value,
  children: const [
    TabBarItem(
      value: 0,
      text: "Home",
      icon: VanIcons.home_o,
    ),
    TabBarItem(
      value: 1,
      text: "Search",
      icon: VanIcons.search,
      dot: true,
    ),
    TabBarItem(
      value: 2,
      text: "DM",
      icon: VanIcons.friends_o,
      badge: "3",
    ),
    TabBarItem(
      value: 3,
      text: "Setting",
      icon: VanIcons.setting_o,
      badge: 20,
    ),
  ],
),

自定义图标绘制

dart
TabBar(
  value: model.value,
  onChange: (value) => model.value = value,
  children: [
    TabBarItem(
      value: 0,
      text: "Custom",
      badge: 3,
      drawIcon: (selected) => Image.network(
        selected
            ? "https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
            : "https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png",
      ),
    ),
    const TabBarItem(value: 1, text: "Search", icon: VanIcons.search),
    const TabBarItem(value: 2, text: "DM", icon: VanIcons.friends_o),
  ],
),

高亮颜色

dart
TabBar(
  value: model.value,
  onChange: (value) => model.value = value,
  activeColor: const Color(0xFFee0a24),
  children: const [
    TabBarItem(value: 0, text: "Home", icon: VanIcons.home_o),
    TabBarItem(value: 1, text: "Search", icon: VanIcons.search),
    TabBarItem(value: 2, text: "DM", icon: VanIcons.friends_o),
    TabBarItem(value: 3, text: "More", icon: VanIcons.setting_o),
  ],
),

仅图标

dart
TabBar(
  value: model.value,
  onChange: (value) => model.value = value,
  children: const [
    TabBarItem(value: 0, icon: VanIcons.home_o),
    TabBarItem(value: 1, icon: VanIcons.search),
    TabBarItem(value: 2, icon: VanIcons.friends_o),
    TabBarItem(value: 3, icon: VanIcons.setting_o, dot: true),
  ],
),

API

Props类型描述
valuedynamic当前选中
onChangeFunction(dynamic)选中变化触发
activeColorColor选中颜色
childrenList<TabBarItem>子项