HarmonyOS6 ArkTS Tabs 组件 TabBar 布局模式配置指南
在 HarmonyOS 开发中，Tabs 组件是构建多页面导航结构的基础。它由 TabBar（页签导航栏）和 TabContent（内容区）两部分组成。其中 TabBar 的布局方式直接决定了用户体验的流畅度与界面的美观性。
核心属性：barMode
控制 TabBar 布局规则的核心属性是 barMode。该属性接受 BarMode 枚举值，主要有两种模式可选：
- BarMode.Fixed：固定均分模式（默认值）
- BarMode.Scrollable：可滚动模式
这两种模式分别适用于不同的业务场景，理解它们的差异有助于我们在实际开发中做出更合适的选择。
固定均分模式：BarMode.Fixed
当我们将 barMode 设置为 Fixed 时，TabBar 会强制将所有页签平均分配宽度。
特性与限制
在这种模式下，每个页签的宽度完全一致，无论文字长短如何。如果页签数量过多导致总宽度超出屏幕，多余的页签会被挤压甚至截断，且无法横向滑动查看。这种布局稳定性高，但灵活性较差。
适用场景
- 底部导航栏：通常包含 3-5 个固定入口（如首页、分类、我的）。
- 页签数量较少且固定的场景。
- 对导航栏位置稳定性要求较高的界面。
代码示例
Tabs() {
// TabContent 定义...
}
.barMode(BarMode.Fixed)
可滚动模式：BarMode.Scrollable
若将 barMode 设为 Scrollable，则 TabBar 的布局逻辑会发生显著变化。
特性与优势
此时页签宽度不再强制均分，而是根据内容（文字或图标）的实际长度自适应。当所有页签的总宽度超过容器宽度时，用户可通过横向滑动查看所有隐藏页签。这极大地提升了内容的展示完整性。
适用场景
- 顶部分类导航：例如新闻频道、商品分类等，页签数量多且不固定。
- 页签文字长度差异较大的场景。
- 需要动态增减页签或内容可扩展的导航界面。
代码示例
Tabs() {
// TabContent 定义...
}
.barMode(BarMode.Scrollable)
完整实战示例
下面是一个完整的 ArkTS 组件示例，演示了如何通过按钮切换这两种模式，并观察页签的变化效果。注意代码中的交互逻辑，这里通过状态变量控制 barMode 的实时切换。
struct {
: = ;
: = .;
() {
() {
() {
().().().(.)
.(.).()
.( { . += ; })
.({ : , : })
().().().(.)
.(.).()
.( { . = ; })
.({ : })
}
() {
().().().()
.(.).()
.( { . = .; })
.({ : , : })
().().().()
.(.).()
.( { . = .; })
.({ : })
}
() {
() {
().().().(.)
}.()
() {
().().().(.)
}.()
() {
().().().(.)
}.()
}.().()
.(.)
.()
.()
}.().().()
}
}
