TrionesDev Antd Flutter

Appearance

AppBar 导航栏 ​

AppBar 是页面顶部导航栏组件，通常包含返回按钮、页面标题和操作按钮。

何时使用 ​

  • 位于页面顶部，用于页面间导航
  • 需要提供返回操作的页面
  • 需要在顶部展示操作按钮的页面
  • 需要展示页面标题和副标题的场景

代码演示 ​

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 ​

参数说明类型默认值
backIcon返回图标Widget?null
back返回图标后面的内容(Widget)Widget?null
backText显示返回图标的文本String?null
showBack是否显示返回图标booltrue
onBack返回时回调Function?null
leading左侧返回图标后面的内容Widget?null
title标题Widget?null
titleText显示标题的文本String?null
actions右侧操作按钮List<Widget>?null
toolbarHeight顶部导航栏高度double?null
bottom底部内容PreferredSizeWidget?null
centerTitle是否居中显示bool?true
backgroundColor背景颜色Color?null
decoration装饰BoxDecoration?null
systemUiOverlayStyle系统状态栏样式SystemUiOverlayStyle?null