标签页布局 - OpenHarmony PC端用Flutter适配

2402_89706816

1010人浏览 · 2025-12-01 21:20:38

2402_89706816 · 2025-12-01 21:20:38 发布

在这里插入图片描述
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

案例概述

本案例展示如何使用 TabBar + TabBarView + DefaultTabController 实现一个标准的标签页布局。标签页是复杂应用中非常常见的组织方式，可以将一个大模块拆分成多个子视图，例如“概览 / 列表 / 统计”等。

本例中：

顶部 AppBar 内集成 TabBar，显示三个标签；
主体区域使用 TabBarView 来展示三个子页面；
使用 DefaultTabController 自动管理当前选中的标签索引；
PC 端标题居中，整体结构适配大屏场景。

核心概念

1. DefaultTabController

DefaultTabController 是 Tab 体系的核心，它提供一个 TabController 给子树使用，使 TabBar 与 TabBarView 可以联动：

点击标签，会自动切换 TabBarView 中对应的子页面；
左右滑动页面，也会同步更新顶部标签的选中状态。

2. TabBar 与 TabBarView

TabBar 负责标签头部区域的 UI 展示；
TabBarView 负责根据当前选中标签显示对应的内容；
两者通过同一个 TabController 关联在一起。

代码详解

1. 页面整体结构

class TabLayoutPage extends StatelessWidget {
  const TabLayoutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isPC = screenWidth >= 1200;

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('案例8：标签页布局 - TabBar + TabBarView'),
          centerTitle: isPC,
          elevation: 2,
          bottom: const TabBar(
            tabs: [
              Tab(text: '概览'),
              Tab(text: '列表'),
              Tab(text: '统计'),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            _OverviewTab(),
            _ListTab(),
            _StatsTab(),
          ],
        ),
      ),
    );
  }
}

说明：

length: 3 对应三个标签和三个子页面；
AppBar.bottom 挂载 TabBar，让标签栏与标题条融为一体；
TabBarView 中的子 Widget 顺序必须与 TabBar 中的标签顺序一一对应。

2. 概览标签页 _OverviewTab

class _OverviewTab extends StatelessWidget {
  const _OverviewTab();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '标签页布局示例：在这里可以放概览内容',
        style: Theme.of(context).textTheme.titleMedium,
      ),
    );
  }
}

说明：

这是最简单的占位示例，使用 Center 将文字放在中间；
实际业务中，你可以在这里放置统计卡片、图表、关键指标等概览信息。

3. 列表标签页 _ListTab

class _ListTab extends StatelessWidget {
  const _ListTab();

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: 20,
      itemBuilder: (context, index) {
        return Card(
          margin: const EdgeInsets.only(bottom: 8),
          child: ListTile(
            leading: const Icon(Icons.label_outline),
            title: Text('标签项 ${index + 1}'),
          ),
        );
      },
    );
  }
}

说明：

使用 ListView.builder 构建一个简单示例列表，展示该标签可承载的内容类型；
Card + ListTile 的组合与案例6相似，只是嵌套在标签页中；
可以替换为实际的数据列表，例如某一类记录明细。

4. 统计标签页 _StatsTab

class _StatsTab extends StatelessWidget {
  const _StatsTab();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.insert_chart, size: 48, color: Theme.of(context).primaryColor),
          const SizedBox(height: 12),
          const Text('这里展示统计数据或图表'),
        ],
      ),
    );
  }
}

说明：

用图标 + 文本模拟一个统计视图区域；
实际项目中可以替换为图表组件（如折线图、柱状图等），或复杂的指标面板。

OpenHarmony PC 端适配要点

多视图在同一窗口内切换：
- 在 PC 端，用户习惯在同一个窗口内快速切换不同视图，标签页是理想选择；
- 可以避免频繁打开/关闭子窗口，降低操作复杂度。
标题居中与标签布局：
- 通过 centerTitle: isPC 提升桌面端视觉一致性；
- 标签文本可以根据 PC 界面适当加大或配合图标展示。
键盘与鼠标操作：
- Tab 体系可以结合键盘快捷键（如 Ctrl+Tab）或右键菜单进行扩展；
- 在 PC 端可考虑为标签添加悬停高亮效果，提高可点击性反馈。