TrionesDev Antd Flutter

Appearance

TabBar 标签栏 ​

标签栏组件，通常用于应用底部导航。

何时使用 ​

当需要在应用底部提供主要页面间的导航时使用。

代码演示 ​

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/material.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<StatefulWidget> createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(title: Text("TabBar")),
      body: SingleChildScrollView(
        child: Column(
          children: [
            DemoBlock(
              title: "TabBar",
              child: Column(
                children: [
                  AntTabBar(
                    children: [
                      AntTabBarItem(
                        icon: Icon(Icons.home),
                        label: Text("首页"),
                        antKey: 'index',
                        activeColor: Color(0xff1677FF),
                        onPressed: (String id) {
                          print(id);
                        },
                      ),
                      AntTabBarItem(
                        icon: Icon(Icons.search),
                        label: Text("搜索"),
                        antKey: 'search',
                      ),
                    ],
                  ),
                ],
              ),
            ),
            DemoBlock(
              title: "TabBar",
              child: Column(
                children: [
                  AntTabBar(
                    children: [
                      AntTabBarItem(
                        icon: Icon(Icons.home),
                        activeIcon: Icon(Icons.account_box),
                        labelText: "首页",
                        antKey: 'index',
                        activeColor: Color(0xff1677FF),
                        onPressed: (String id) {
                          print(id);
                        },
                      ),
                      AntTabBarItem(
                        icon: Icon(Icons.search),
                        labelText: "搜索",
                        antKey: 'search',
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API ​

AntTabBar ​

标签栏的属性说明如下：

属性说明类型默认值
style样式StateStyle?null
decoration装饰BoxDecoration?null
padding边距EdgeInsetsGeometry?null
height高度double?54
color颜色Color?null
activeColor激活颜色Color?null
activeKey当前激活的tabKeyString?null
defaultActiveKey默认激活的tabKeyString?null
onChange切换回调Function(String key)?null
children子组件List<Widget>?null

AntTabBarItem ​

标签项的属性说明如下：

属性说明类型默认值
antKey标识（必填）String-
child子组件Widget?null
icon图标Widget?null
label标签Widget?null
onPressed点击事件Function(String key)?null
color颜色Color?null
activeColor激活颜色Color?null
stopPropagation是否阻止冒泡booltrue