鸿蒙（七个布局）

Liu.854

227人浏览 · 2026-06-03 18:05:33

Liu.854 · 2026-06-03 18:05:33 发布

@Entry
@Component
struct lianxi4{
  build(){
    Tabs() {
      TabContent() {
        Text('欢迎来到新三-520宿舍，下面介绍一下宿舍信息').fontSize(24)
      }
      .tabBar('首页')

      TabContent() {
        Column() {
          Text('这是宿舍同学信息').fontSize(24)
          Swiper() {
            Text('姓名：刘！！，       学号：851861511').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：申@@，       学号：585525680').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：潘￥￥，       学号：1581829').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：田**，       学号：8222222251').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：石%%，       学号：9582268482').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：沈…………，       学号：9645572').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：王&&，       学号：882256125').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：邱？？，        学号：9218522').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
          }
          .width('100%')
          .height(180)
          .indicator(true)
          .autoPlay(true)
          .interval(200)
        }
        .padding(10)
      }
      .tabBar('推荐')

      TabContent(){
        Column(){
          Text('这是宿舍信息的相对布局').fontSize(24).margin({bottom:20})
          RelativeContainer(){
            //第一行左
            Text('刘')
              .id('box1')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'__container__',align:VerticalAlign.Top},
                left:{anchor:'__container__',align:HorizontalAlign.Start}
              })

            Text('鬼')
              .id('box2')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box1',align:VerticalAlign.Top},
                left:{anchor:'box1',align:HorizontalAlign.End}
              })
              .margin({left:20})

            Text('桌子')
              .id('box3')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box1',align:VerticalAlign.Bottom},
                left:{anchor:'box1',align:HorizontalAlign.Start}
              })
              .margin({top:20})

            Text('桌子')
              .id('box4')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box3',align:VerticalAlign.Top},
                left:{anchor:'box3',align:HorizontalAlign.End}
              })
              .margin({left:20})

            Text('田')
              .id('box5')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box3',align:VerticalAlign.Bottom},
                left:{anchor:'box3',align:HorizontalAlign.Start}
              })
              .margin({top:20})


            Text('军爷')
              .id('box6')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box5',align:VerticalAlign.Top},
                left:{anchor:'box5',align:HorizontalAlign.End}
              })
              .margin({left:20})

          }
          .width('100%')
          .height(500)
          .padding({left:25})
        }
      }
      .tabBar('发现')
      TabContent(){
        Text('我的页面').fontSize(24)
      }
      .tabBar('我的')
    }
    .barPosition(BarPosition.End)
  }
}

一、Column 垂直布局

核心属性

构造参数 space：控制容器内子组件垂直方向的间距；
justifyContent：管控组件垂直方向整体排布，包含顶部对齐、垂直居中、底部对齐、两端均分四种模式；
alignItems：管控组件水平方向对齐方式，支持左对齐、居中对齐；
width、height、padding：设置容器宽高与内部留白。

布局特点

所有子组件自上而下单列垂直排列，组件不会自动换行，是静态竖向容器。

适用场景

登录页面、注册表单、信息详情页、竖向内容排版页面，本次账号注册、登录页面外层主容器均使用该布局。

二、Row 水平布局

核心属性

构造参数 space：控制容器内子组件水平方向间距；
alignItems：管控组件垂直方向对齐，实现上下居中、顶部对齐；
justifyContent：管控组件水平方向整体排布；
width、height、padding：设置容器尺寸与内边距。

布局特点

子组件从左至右单行水平排列，容器宽度不足时组件不会自动换行。

适用场景

标签搭配输入框单行模块、底部横向按钮组、顶部导航栏、横向功能选项，项目中用户名、密码输入行全部嵌套 Row 布局。

三、Stack 层叠布局

核心属性

组件书写顺序直接决定层级，先编写的组件处于底层，后编写的组件覆盖在上层；
justifyContent、alignItems：统一控制所有叠加组件的对齐位置；
width、height：设置容器整体尺寸。

布局特点

支持多层组件重叠摆放，实现覆盖、遮罩视觉效果，无固定横竖排列规则。

适用场景

图片叠加文字水印、头像添加角标、弹窗半透明遮罩、轮播图、卡片悬浮文字。

四、Flex 弹性布局

核心属性

wrap 换行属性：开启 Wrap 模式后，组件超出容器宽度自动换行；NoWrap 模式等同于 Row 布局不换行；
space 间距配置：可同时设置横向、纵向双向间距；
width、padding：限制容器宽度与内边距。

布局特点

自适应屏幕宽度，组件数量不固定时自动换行流式排布，具备弹性自适应能力。

适用场景

商品分类标签、首页零散功能小图标、搜索推荐标签、不规则流式卡片。

五、Grid 网格布局

核心属性

columnsTemplate：定义列数与每列宽度等分比例，fr 代表均分单位；
rowsTemplate：定义每行高度等分比例；
columnsGap、rowsGap：分别设置列与行之间的间隙；
子组件必须包裹 GridItem 容器，作为网格单元格载体。

布局特点

严格按照固定行列均分容器，排版规整，所有格子尺寸统一，形成标准宫格效果。

适用场景

首页功能九宫格菜单、相册图片、支付功能图标、手机应用桌面。

六、List 滚动列表布局

核心属性

构造参数 space：控制列表条目垂直间距；
ListItem：列表单行专属容器，所有列表内容必须包裹在内；
divider：设置条目之间的分割线，自定义线条粗细与颜色；
容器高度不足时自动生成垂直滚动条。

布局特点

自带滚动优化机制，专门处理大量重复数据，相比多层 Column 嵌套性能更优，支持长页面滑动。

适用场景

聊天消息列表、商品展示列表、通讯录、新闻资讯、大批量重复数据页面。

七、RelativeContainer 相对布局

核心属性

id 标识：每一个子组件必须设置唯一 ID，作为定位参照标识；
alignRules 定位规则：支持参照父容器、其他组件进行定位，可约束左、右、上、下、水平居中、垂直居中方位；
margin：组件定位完成后，设置偏移距离。

布局特点

无固定横竖排列限制，可自由将组件放置在容器任意位置，组件之间能够互相参照定位，自由度最高。

适用场景

自由排版页面、悬浮按钮、弹窗控件、不规则自定义页面。

七大布局整体总结（实训报告专用段落）

ArkUI 开发框架提供 Column、Row、Stack、Flex、Grid、List、RelativeContainer 七种核心布局容器，分别适配不同页面排版需求：Column 垂直布局用于竖向表单页面；Row 水平布局实现单行横向内容；Stack 层叠布局完成叠加遮罩效果；Flex 弹性布局实现自适应换行流式排版；Grid 网格布局制作规整等分宫格；List 列表布局高效承载大批量可滚动数据；RelativeContainer 相对布局实现自由自定义定位。实际开发中支持多种布局互相嵌套，通过多层组合完成复杂页面搭建，可根据页面内容排布逻辑选择对应布局容器。