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 | 类型 | 描述 |
---|---|---|
value | dynamic | 当前选中 |
onChange | Function(dynamic) | 选中变化触发 |
activeColor | Color | 选中颜色 |
children | List<TabBarItem> | 子项 |