Flutter Vant UI

Appearance

On this page

Tab 标签页 ​

代码演示 ​

基本用法 ​

dart
Tabs(active: "标签 1", children: [
  Tab("标签 1", child: tabBox.Container(child: const Text("标签 1"))),
  Tab("标签 2", child: tabBox.Container(child: const Text("标签 2"))),
  Tab("标签 3", child: tabBox.Container(child: const Text("标签 3"))),
  Tab("标签 4", child: tabBox.Container(child: const Text("标签 4"))),
]),

收缩布局 ​

dart
Tabs(active: "标签 1", children: [
  Tab("标签 1", child: tabBox.Container(child: const Text("标签 1"))),
  Tab("标签 2", child: tabBox.Container(child: const Text("标签 2"))),
  Tab("标签 3", child: tabBox.Container(child: const Text("标签 3"))),
  Tab("标签 4", child: tabBox.Container(child: const Text("标签 4"))),
  Tab("标签 5", child: tabBox.Container(child: const Text("标签 5"))),
  Tab("标签 6", child: tabBox.Container(child: const Text("标签 6"))),
  Tab("标签 7", child: tabBox.Container(child: const Text("标签 7"))),
  Tab("标签 8", child: tabBox.Container(child: const Text("标签 8"))),
]),

自定义标签 ​

dart
WithModel("1", (model) {
  final title = Row(mainAxisSize: MainAxisSize.min, children: const [
    Icon(VanIcons.more_o),
    SizedBox(width: 5),
    Text("标签")
  ]);
  return Tabs(active: model.value, children: [
    Tab(
      "1",
      title: title,
      child: tabBox.Container(child: const Text("标签 1")),
    ),
    Tab(
      "2",
      title: title,
      child: tabBox.Container(child: const Text("标签 2")),
    ),
  ]);
}),

切换动画 ​

dart
Tabs(active: "标签 1", animated: true, children: [
  Tab("标签 1", child: tabBox.Container(child: const Text("标签 1"))),
  Tab("标签 2", child: tabBox.Container(child: const Text("标签 2"))),
  Tab("标签 3", child: tabBox.Container(child: const Text("标签 3"))),
  Tab("标签 4", child: tabBox.Container(child: const Text("标签 4"))),
]),

手势滑动 ​

dart
Tabs(active: "标签 1", swipeable: true, children: [
  Tab("标签 1", child: tabBox.Container(child: const Text("标签 1"))),
  Tab("标签 2", child: tabBox.Container(child: const Text("标签 2"))),
  Tab("标签 3", child: tabBox.Container(child: const Text("标签 3"))),
  Tab("标签 4", child: tabBox.Container(child: const Text("标签 4"))),
]),

滚动导航 ​

dart
Builder(builder: (context) {
  const len = 6;
  final tabs = List.generate(len, (i) => Tab("标签 $i"));
  final tabContents = List.generate(
    len,
    (i) => TailBox().px(10).as((s) {
      return s.Container(child: Text("标签 $i 区域"));
    }),
  );
  const contentExtent = 80.0;
  final tabsKey = GlobalKey<TabsState>();
  tabsState() => tabsKey.currentState;
  return WithModel(ScrollController(), (model) {
    final contentScroller = model.value;
    return Tabs(
      key: tabsKey,
      children: tabs,
      onChange: (e) => tabsState()?.animateToIndex(
        e.index,
        animateToImpl: (index, duration, curve) {
          contentScroller.animateTo(
            e.index * contentExtent,
            duration: duration,
            curve: curve,
          );
        },
      ),
      builder: (_) => WithModel(ScrollController(), (model) {
        return NotificationListener<ScrollNotification>(
          onNotification: (e) {
            final scrollIndex =
                (e.metrics.pixels / contentExtent).floor();
            tabsState()?.handleScrollToActiveIndexEvent(scrollIndex);
            return false;
          },
          child: Container(
            color: VanConfig.ofTheme(context).background2,
            height: 100,
            child: ListView(
              controller: contentScroller,
              itemExtent: contentExtent,
              children: tabContents,
            ),
          ),
        );
      }),
    );
  });
}),

API ​

Props类型描述
shrinkTabsbool收缩标签
activedynamic当前标签，将与标签名称匹配
childrenList<Tab>标签列表
onChangeFunction({name, index})标签切换触发
expandsbool布满高度
keepAlivebool渲染所有标签
animatedbool使用切换动画
swipeablebool允许手势切换
builderWidget Function(TabState state)自定义绘制