ArkUI实战演练03-常用组件与布局实战

小伙伴们，上次做项目的时候，想给元服务加个网络图片展示，结果发现直接加载报错，查了半天才知道要配权限，还被IDE警告了好几次......踩坑之后赶紧把这篇实战笔记整理出来，今天就跟大家聊聊ArkUI里常用组件和布局的那些事儿。

核心概念

ArkUI是声明式UI框架，说白了就是用代码描述界面长啥样，不用手动操作DOM。基础组件有文本（Text）、图片（Image）、按钮（Button）这些老熟人。布局容器控制子组件怎么摆，常用的有Column（纵向排）、Row（横向排），还有更灵活的Flex弹性布局。别看概念多，用熟了其实就是"搭积木"。

环境准备

开发环境还是DevEco Studio。我用的是6.0.0 Release版，搭配HarmonyOS SDK 6.0.0(20)，官方建议用这个版本起步，省得遇到奇怪兼容问题。 $截图: DevEco Studio版本信息$

核心实现

基础组件声明

上代码！在ArkTS文件里，用@Entry和@Component装饰一个结构体就能创建页面。组件声明要用闭包语法，看下面这个例子：

typescript 复制代码

@Entry
@Component
struct MyPage {
  build() {
    Column() {
      Text('Hello')
      Image($r('app.media.icon'))
      Button('点击')
    }
  }
}

小提示 ：刚开始写的时候容易忘记build()方法里的花括号，编译器不会直接报错但你预览就是空白，别问我怎么知道的......

布局容器

Column ：子组件垂直排列，通过alignItems和justifyContent调整对齐。比如想让所有子组件居中，直接.alignItems(HorizontalAlign.Center)。
Row：水平排列，属性和Column一样，就是方向不同。
Flex ：弹性布局，通过flexDirection控制主轴方向，wrap控制换行。这个API设计得挺奇怪的，但用久了就习惯了，记得wrap默认是FlexWrap.NoWrap，超出会溢出哦。

属性设置与事件绑定

每个组件都支持链式调用，就像这样：

typescript 复制代码

Text('示例')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .onClick(() => {
    console.info('点击')
  })

事件绑定都以on开头，比如onClick、onAppear。注意：属性设置必须在build()方法里链式调用，不能在外部修改，否则编译器会报"组件属性只能通过链式调用设置"。第一次踩这个坑我还以为代码写错了，后来才知道这是规矩。

布局编排技巧

用space属性给容器内组件加固定间距，比如：

typescript 复制代码

Column({ space: 10 }) {
  // 子组件
}

还可以用layoutWeight分配剩余空间比例，这个特别实用，比如实现左右比例分割：

typescript 复制代码

Row() {
  Text('左').layoutWeight(1)
  Text('右').layoutWeight(2)
}

小提示 ：layoutWeight只对Row/Column/Flex容器内的直接子组件有效，嵌套太多层级会失效，设计布局时最好控制一下嵌套深度。

注意事项

组件属性必须在build()方法内链式调用，不能在外部修改，上面说过了，再强调一遍。
Image组件加载本地图片用$r('app.media.xxx')或$rawfile('xxx.png')，网络图片需要申请ohos.permission.INTERNET权限。元服务限制更严格，只有带"元服务API"标记的接口才能用，查阅API参考文档时要留意。
不同设备对组件支持有差异，比如手表上有些组件没有，建议在API参考里按设备筛选，不然真机调试时突然崩了就很懵。 $截图: API参考按设备筛选功能$

常见问题

Q：Text组件如何实现多行省略？

A：设置maxLines限制最大行数，同时配合textOverflow({ overflow: TextOverflow.Ellipsis })，比如：

typescript 复制代码

Text('很长的一段文字......')
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

这样超出两行就会显示省略号。

Q：Button的点击事件如何传递参数？

A：在onClick闭包里直接用外部变量就行，或者通过@State装饰器管理状态，比如：

typescript 复制代码

@State count: number = 0
Button('点击').onClick(() => {
  this.count++
})

之前我们聊过ArkTS基础语法，这一篇算实战落地。下篇准备深入讲讲列表组件和数据渲染，到时候再分享踩坑经验。有问题欢迎评论区交流，觉得有用点个赞哦~