鸿蒙布局和组件

fgxdh

205人浏览 · 2026-06-22 15:52:17

fgxdh · 2026-06-22 15:52:17 发布

布局

1. 垂直布局

所有内部组件从上到下依次排成一列，适合做页面主体、表单、纵向列表内容，是页面最常用的基础布局。

@Entry
@Component
struct ArkTsDemo //文件名字{
//1.arkTS数据层，定义了页面所需要的数据
userName:string = '张健';
major:string = '计算机应用技术';
studyYear = '2024-04班';

//2.视图层，可以build中显示出来
build() {
Column({space:20}){ //控制字间的距离
Text('本人介绍')
.fontSize(30)

.fontColor(Color.Black)
.fontWeight(FontWeight.Bold)

Text(`本人姓名：${this.userName}`)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Red)

Text(`本人专业：${this.major}`)
.fontSize(21)

Text(`本人班级：${this.studyYear}`)
.fontSize(20)
}
.width('100%') //高度比例
.height('100%') //宽度比例
.backgroundColor(Color.Orange) //颜色
.justifyContent(FlexAlign.Center) //居中对齐
}
}

2. 水平布局

所有内部组件从左到右排成一行，空间不足时组件会被截断，不能自动换行，适合单行按钮、一行图文、顶部导航栏。

@Entry
@Component
struct RowBaseDemo{
  build() {
    Column(){
      Row({space:30}){   //{space:30}是内容之间的距离（也可以加在最外面的Column里）
        Text('首页').fontSize(20)
        Text('课程').fontSize(20)
        Text('消息').fontSize(20)
        Text('我的').fontSize(20)
      }
      .width('100%')
      .height('10%')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .backgroundColor(0x00f5f5)

      Column({space:10}){
        Text('个人信息中心')
          .fontSize(30)
          .fontWeight(FontWeight.Bolder)
          .margin(20)
        Text('张健').fontSize(25)
        Text('专业：计算机应用技术').fontSize(25)
        Text('年纪：24级').fontSize(25)
        Text('学号：240*******').fontSize(25)
      }
      .width('100%')
      .height('40%')
      .backgroundColor('0x00f5f5')
      .justifyContent(FlexAlign.Center)  //垂直居中
      .alignItems(HorizontalAlign.Center)  //水平居中
    }
    .width('100%') //高度比例
    .height('100%') //宽度比例
  }
}

3. 相对布局

不依靠排列顺序，通过设置锚点，让组件相对容器、其他控件自由摆放，上下左右位置都能自定义，适合元素分散、排版不规则的复杂界面。

Entry
@Component
struct RelativeDemo1 {
build() {
RelativeContainer() {
// 标题
Text('相对布局页面设计')
.fontSize(40)
.fontWeight(FontWeight.Bolder)
.id('title')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.margin(15)
.backgroundColor(Color.Red)

// 按钮行（唯一id：btnRow）
Row(){
Button('基础按钮')
.width(150)
.height(80)
.fontSize(18)
.margin(10)
Button('基础按钮')
.width(150)
.height(80)
.fontSize(18)
.margin(10)
}
.id('btnRow')
.height('35%')
alignRules({
// 垂直定位：top / bottom / middle(垂直居中)
top: { anchor: '参照组件id', align: 垂直对齐方式 },
// 水平定位：left / right / middle(水平居中)
middle: { anchor: '参照组件id', align: 水平对齐方式 } })
.margin(20)

Text('这个组件依赖于button')
.fontSize(26)
.fontColor(Color.Red)
.id('descText')
.alignRules({
top: { anchor: 'btnRow', align: VerticalAlign.Bottom },
middle: { anchor: 'btnRow', align: HorizontalAlign.Center }
})

}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}

4. 层叠布局

组件分层叠加，后放置的控件会盖在前面控件上方，可单独调整每个子组件在层内的上下左右位置，适合图片加水印、卡片角标、弹窗遮罩。

 @Entry
@Component
struct StackBase{
  build() {
    Stack(){  //层叠
      Text()
        .width(220)
        .height(220)
        .backgroundColor(Color.Orange) //外边框的颜色
        .borderRadius(30)  //边框弧度

      Text('你好')
        .fontSize(40)  //字体大小
        .fontColor(Color.Red)  //字体颜色
        .width(120)
        .height(120)
        .backgroundColor(Color.Black)  //内边框的颜色
        .borderRadius(30)
        .padding({left:15,right:0,top:0,bottom:0}) //给当前组件设置单侧内边距，仅左侧留出 15px 空白，上、右、下三边内边距为 0。
    }
    .width('100%')
    .height('100%')
  }
}

5. 弹性布局

整合水平、垂直布局能力，支持切换横竖排列，超出容器宽度能自动换行，还能分配剩余空间自适应屏幕，适合标签流式排版、多列自适应布局。

ntry
@Component
struct FlexDemo2{
build() {
Flex({wrap:FlexWrap.Wrap}){ //控制 Flex 容器内子元素空间不足时是否自动换行
Text("鸿蒙基础").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
Text("ArkTS语法").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
Text("ArkTS布局").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
Text("组件开发").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
Text("页面跳转").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
Text("数据存储").padding(15).backgroundColor(0xe8f4ff).borderRadius(5).fontSize(16).margin(1)
}
.width('100%')
.padding(10) // 上下左右全部10
}
}

简易区分

只需要单列上下排列 → 垂直布局
只需要单行左右排列、不需要换行 → 水平布局
组件需要分层覆盖（图 + 文字 / 角标）→ 层叠布局
标签多、需要自动换行自适应 → 弹性布局
控件分散、需要自由定位、不受排列顺序限制 → 相对布局

组件

1. 轮播图

功能：滑动容器组件，多用于首页广告横幅、商品图集、启动引导页
核心能力：支持手指左右滑动切换图片；可开启自动轮播、循环往复播放；底部自带小圆点指示器，标记当前展示第几张图；能自定义轮播切换时长、是否自动播放。

2. 视频

功能：专门承载视频播放的媒体组件，可加载本地视频、线上网络视频
核心能力：自带播放控制面板，包含暂停 / 播放按钮、进度拖动条、全屏按钮；可设置打开页面自动播放、静音播放，自由控制视频宽高与画面填充样式。

3. 图片

功能：基础媒体展示组件，用来显示图标、海报、头像、背景图等各类静态图像
核心能力：支持本地素材、网络图片、矢量 SVG 图；可设置圆角、拉伸铺满 / 自适应留白等画面缩放规则，调整图片透明度、边框样式。

4. 选项卡

功能：页面切换导航组件，常见底部菜单栏、顶部分类标签
核心能力：由标签栏和对应页面组成，点击不同标签，快速切换对应独立内容页面；标签栏可放在页面顶部或底部，能自定义标签文字、选中高亮样式。

5. 文本 / 输入框

文本 Text

仅用于展示固定文字，页面标题、说明文字、商品描述、标签文案都用它；可调整字体大小、颜色、加粗、对齐方式。

6.按钮 Button

点击交互控件，提交、跳转、触发功能操作。

7.单选框 Radio

多选一选择器，性别、单一选项场景使用。

8.Toggle 开关

布尔状态切换控件，设置页开关、启用 / 关闭功能开关。

鸿蒙登录页跳转博客首页

一、整体实现思路
新建两个页面：登录页面、博客首页，两个页面都遵循单一根布局规则，内部嵌套文本、输入框、按钮等组件。
在路由配置文件中登记两个页面，系统才能识别页面、支持页面互相跳转。
登录页实现账号密码输入、登录校验逻辑，校验成功后调用路由跳转 API，切换到博客首页；校验失败弹出提示。
博客首页可搭配返回按钮，实现回到登录页的功能。
二、页面布局与组件

1. 登录页面
根布局：垂直布局 Column，所有控件纵向排列
使用组件：

Text：页面标题 “博客系统登录”
TextInput：账号输入框、密码输入框
Button：登录交互按钮

2. 博客首页
根布局：垂直布局 Column
使用组件：

Text：首页标题、欢迎文案
Button：返回登录页按钮

三、跳转核心逻辑说明
页面入栈跳转
登录成功打开首页，登录页面会保留在页面栈里，在首页点击返回就能回到登录页，适合需要可退回的场景。
页面替换跳转
登录后直接销毁登录页面，首页无法退回登录界面，适合登录完成后不允许再回到登录页的场景。
四、附加功能：登录账号传递到首页跳转时可以附带账号信息，博客首页读取传递过来的用户名，展示当前登录用户，实现页面间数据传递。五、关键注意事项
每个页面有且只能有一个根布局，输入框、按钮等组件全部嵌套在根布局内，布局可以多层嵌套。
所有页面必须提前在路由配置文件注册，否则跳转功能失效。
跳转前需要做表单校验：判断账号、密码输入框是否为空，内容是否匹配，校验通过才执行页面跳转。