前置规则（你图片末尾说明）： 任意页面 / 自定义组件的 build() 中，有且只能有 1 个根布局容器；复杂界面可在根布局内部嵌套其他布局容器

1. 垂直布局 Column

概念

容器名：Column 子组件从上到下垂直依次排列，最基础常用布局，属于线性布局。

• 主轴：竖直方向
• 交叉轴：水平方向

@Entry
@Component
struct CardStyleDemo{
  build() {
    Column({space:50}){
      Column({space:20}){
        Text("个人信息的卡片")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Text("姓名: 哈哈")
          .fontSize(18)
        Text("专业: 计算机应用技术")
          .fontSize(18)
      }

2. 水平布局 Row

概念

容器名：Row 子组件从左到右水平依次排列，线性布局。

• 主轴：水平方向
• 交叉轴：竖直方向

Row(){
  Button('登录')
    .width(150)
    .height(50)
    .backgroundColor(0xf8f8f8)
    .fontSize(18)
    .fontColor(Color.White)
    .border({width:3,color:Color.Black})

3. 相对布局 RelativeContainer

概念

容器名：RelativeContainer 子组件不按顺序排列，通过 alignRules 规则，以某个组件 / 容器边界为锚点，上下左右相对定位，适合不规则页面排版。 子组件必须设置 id 才能互相锚定。

4. 层叠布局 Stack

概念

容器名：Stack Z 轴堆叠布局，子组件按编写顺序层层叠加，后写的组件默认覆盖在上方；可设置内部对齐方式实现悬浮、遮罩、头像角标效果。

5. 弹性布局 Flex

概念

容器名：Flex 增强版线性布局，支持自动换行、子元素拉伸 / 压缩占比、灵活分配剩余空间，适配多尺寸屏幕，和前端 CSS Flex 逻辑高度一致。

鸿蒙 ArkUI 常用基础组件详解（概念 + 可运行 ArkTS 代码）

一、Image 图片组件

作用

展示本地 / 网络图片，支持缩放、圆角、裁剪等样式设置，是页面最常用素材展示组件。

Row({space:20}){
  Image($r('app.media.liangzi'))
    .width(120)
    .height(120)
    .borderRadius(60)

二、Text 文本组件 / TextInput 输入框组件

作用

• Text：展示静态文字，设置字号、颜色、字重、换行等样式
• TextInput：接收用户手动输入内容，可做账号、密码录入

• Column({space:15}){
    Text('鸿蒙系统开发者：良子')
      .fontSize(20)
    Text('计算机应用工程系')
      .fontSize(20)

三、Button 按钮组件

作用

可点击交互控件，绑定点击事件实现页面跳转、数据提交、弹窗触发等逻辑，支持填充、描边、文本型样式。

Row({space:15}){
  Button('编辑资料')
    .fontSize(20)
    .width(150)
    .height(50)
    .borderRadius(8)

四、Radio 单选框组件

作用

同一分组内只能选中一个选项，常用于性别选择、单一选项投票等场景，依靠name属性分组。

Text('第一题')
Radio({value:'Radio1',group:'radioGroup'})
  .checked(false)
Radio({value:'Radio2',group:'radioGroup'})
  .checked(true)
Radio({value:'Radio3',group:'radioGroup'})
  .checked(false)
Radio({value:'Radio4',group:'radioGroup'})
  .checked(false)

五、Tabs 选项卡组件

作用

实现顶部 / 底部标签栏切换多页面内容，比如首页、分类、我的切换，由Tabs容器 + TabContent页面组成。

build() {
  Tabs(){
    TabContent(){
      Column({space:30}){
        Text('欢迎来到河北软件职业技术学院')
          .fontSize(22)
          .fontWeight(FontWeight.Bolder)

六、Swiper 轮播图组件

作用

自动 / 手动横向滑动切换多张图片，首页广告、活动横幅最常用组件，可设置自动轮播、指示器、切换时长

\

build() {
  Column() {
    Swiper() {
      ForEach(this.bannerList, (item: Resource) => {
        Image(item)
          .width('98%')
          .height('100%')
          .objectFit(ImageFit.Cover)

七、Video 视频播放组件

作用

播放本地视频、网络视频资源，自带播放、暂停、进度条控制器，支持自定义控制逻辑。