当前位置：首页 > news >正文

Harmony之路：UI构建之基石——ArkUI声明式组件与布局

news 2026/5/11 23:12:42

一、引入：从命令式到声明式的思维转变

在传统命令式UI开发中，我们需要一步步告诉系统如何创建和更新UI元素，而ArkUI的声明式开发范式让我们只需描述"UI应该是什么样子"，系统会自动处理渲染和更新。这种转变不仅提升了开发效率，更让代码逻辑更加清晰易懂。

二、讲解：三大核心布局容器实战

1. Column垂直布局——纵向排列的基石

Column是垂直方向排列的容器组件，主轴为垂直方向，交叉轴为水平方向。它是构建列表、表单等垂直结构界面的首选。

基础用法示例：

@Entry
@Component
struct ColumnExample {build() {Column({ space: 20 }) {  // 设置子元素垂直间距20vpText('标题').fontSize(24).fontWeight(FontWeight.Bold)Text('副标题').fontSize(16).fontColor(Color.Gray)Button('确认按钮').width('80%').height(40).backgroundColor(Color.Blue).onClick(() => {console.log('按钮被点击')})}.width('100%').height('100%').padding(20).justifyContent(FlexAlign.Center)  // 主轴居中对齐.alignItems(HorizontalAlign.Center) // 交叉轴居中对齐}
}

关键属性详解：

space：子元素在主轴方向的间距，支持数字或百分比
justifyContent：主轴对齐方式（FlexAlign.Start/Center/End/SpaceBetween/SpaceAround/SpaceEvenly）
alignItems：交叉轴对齐方式（HorizontalAlign.Start/Center/End）

2. Row水平布局——横向排列的利器

Row是水平方向排列的容器组件，主轴为水平方向，交叉轴为垂直方向。适用于导航栏、按钮组等横向布局场景。

实战示例：底部导航栏

@Entry
@Component
struct BottomNavigation {@State currentIndex: number = 0build() {Column() {// 内容区域Column() {Text('页面内容').fontSize(20)}.layoutWeight(1)  // 占据剩余空间// 底部导航Row({ space: 0 }) {ForEach([0, 1, 2], (index) => {Column() {Image(this.currentIndex === index ? $r('app.media.icon_selected') : $r('app.media.icon_normal')).width(24).height(24)Text(['首页', '发现', '我的'][index]).fontSize(12).fontColor(this.currentIndex === index ? Color.Blue : Color.Gray)}.width('33%').height(60).onClick(() => {this.currentIndex = index})})}.width('100%').backgroundColor(Color.White).border({ width: 1, color: Color.Gray })}.width('100%').height('100%')}
}

布局权重技巧：

使用layoutWeight属性可以让子组件按比例分配剩余空间，这是实现自适应布局的关键。

3. Stack层叠布局——叠加效果的艺术

Stack允许子元素在Z轴方向堆叠，后添加的元素会覆盖在前面的元素上，适用于弹窗、悬浮按钮等场景。

弹窗实现示例：

@Entry
@Component
struct StackExample {@State isShowDialog: boolean = falsebuild() {Stack() {// 主页面内容Column() {Text('主页面').fontSize(24)Button('显示弹窗').onClick(() => {this.isShowDialog = true})}.width('100%').height('100%')// 弹窗层（条件渲染）if (this.isShowDialog) {Column() {Text('这是一个弹窗').fontSize(20)Button('关闭').onClick(() => {this.isShowDialog = false})}.width(300).height(200).backgroundColor(Color.White).cornerRadius(10).position({ x: '50%', y: '50%' }).margin({ left: -150, top: -100 })  // 居中定位.zIndex(100)  // 设置层级}}.width('100%').height('100%')}
}

核心特性：