角标（Badge）可谓是“消息到啦”的万能利器，无论是未读数、最新标签，还是小红点提醒，都能轻松搞定。下面我们用轻松的方式，带你快速掌握 ArkUI 的 Badge 组件。 一、Badge 能力速览 数字角标：.count + .maxCount，自动 99+文本角标：.value 支持任意字符串小红点：空字符串或单空格即可位置可选：左侧、中间、右侧、右上…样式自由：大小、颜色、字体随心定 二、基

在多标签页场景下，ArkUI 提供了 Tabs 与 TabContent 两个组件，帮助你快速实现不同内容区的切换展示。每个标签对应一个 TabContent 子组件，Tabs 负责整体容器的布局与交互。 一、基础用法 @Entry @Component struct SimpleTabsDemo { private controller: TabsController = new TabsCon

在多终端应用中，侧边栏（Sidebar）是常见的导航或功能区展现形式。ArkUI 的 SideBarContainer 组件，能够让你在室内设计模式（Embed）和覆盖模式（Overlay）之间轻松切换，并提供丰富的控制按钮定制能力。 一、组件简介 interface SideBarContainerInterface { (type?: SideBarContainerType): SideBa

利用 GridContainer 构建响应式栅格布局 在移动端或大屏应用中，我们常常需要在不同宽度下保持内容的整齐排列。ArkUI 的 GridContainer 为我们提供了“栅格系统”能力，帮助你像在网页上一样，轻松实现 12 列、16 列或任意列数的响应式布局。 一、核心概念 列数（columns）：将整个容器分成多少列。常见有 12 列、16 列。断点类型（sizeType）：针对不同设备

今天来聊聊 ArkUI 的 Stack 容器——一个能让你把组件“摞”在一起、层层叠加的小能手。想做徽章叠加、弹窗遮罩，或者卡片投影？Stack 就能轻松搞定！ 一、Stack 是什么？ Stack 就像一叠透明塑料片，你可以把文字、图片、按钮一个接一个地放上去，后放的会自然覆盖在前面的上面。它的独门秘籍就是一个参数： Stack({ alignContent: Alignment.<位置&

在掌握了 Flex 的方向属性后，本篇将重点介绍如何通过 wrap 控制子组件是否换行，以及利用 justifyContent 在主轴方向上对其和分布。 一、换行控制（wrap） enum FlexWrap { NoWrap, // 不换行，超出隐藏 Wrap, // 正向换行 WrapReverse, // 反向换行 } NoWrap（默认）：所有子组件挤在一行/列内，超出容器会被截断或挤压。W

在 ArkUI 中，Flex 容器借鉴 Web 中的 Flexbox 概念，提供了一套非常灵活的、基于主轴（Main Axis）和纵轴（Cross Axis）的布局方案。本篇将介绍 Flex 的基础定义与方向属性，让你快速掌握如何控制子组件的排列方向。 一、什么是 Flex？ Flex 容器可以看作是一个多功能的、可配置的线性布局器。它既能水平布局，也能垂直布局；在超出容器时可换行；还能通过各种对

Flex 除了主轴上的排布控制外，还可以在纵轴（交叉轴）以及多行内容上进行对齐。本篇将重点讲解 alignItems（单行/列内纵轴对齐）与 alignContent（多行/列换行后纵轴分布）属性。 一、纵轴对齐（alignItems） declare class FlexAttribute { alignItems(value: ItemAlign): FlexAttribute; } enum

Blank 是一个专用于 Row 或 Column 容器中的占位组件，用来填充主轴方向上的剩余空间，使布局更加灵活、响应式。 1 定义 interface BlankInterface { (min?: number | string): BlankAttribute; } min（可选）：指定 Blank 在主轴方向上的最小占用尺寸（像素或百分比）。 2 属性 declare class Bla

Column 用于在竖直方向（主轴）上依次排列子组件，交叉轴为水平方向。 1 定义 interface ColumnInterface { (options?: { space?: string | number }): ColumnAttribute; } options.space：可选，设置子组件在主轴（竖直）方向上的间距，与 Row 中的 space 参数含义一致。 2 常用属性 decl