冠军资讯
代码一只喵在鸿蒙应用开发中，灵活运用 UI 布局容器是构建美观、响应式界面的关键。Row、Column 和 Stack 是鸿蒙 ArkUI 提供的三种基础布局容器，理解并熟练掌握它们的使用，能帮助开发者轻松实现各种复杂的 UI 布局。
问题场景重现：复杂布局的挑战
设想一个场景：我们需要在屏幕上同时展示一个头像、一段文字描述和一个操作按钮，并且要求头像和文字描述水平排列，按钮位于它们的下方。如果使用绝对定位或固定坐标的方式来实现，在不同屏幕尺寸的设备上，UI 元素的显示效果很可能错乱，难以适配。这就是需要布局容器来解决的问题。
Row、Column 和 Stack 的底层原理
- Row（横向布局）：Row 容器将其子组件按照水平方向排列。可以通过设置
justifyContent属性来控制子组件在主轴（水平方向）上的对齐方式，如居左、居右、居中、均匀分布等。alignItems属性则控制子组件在交叉轴（垂直方向）上的对齐方式，如顶部对齐、底部对齐、垂直居中等。 - Column（纵向布局）：Column 容器将其子组件按照垂直方向排列。
justifyContent和alignItems属性的作用与 Row 类似，只是主轴和交叉轴的方向相反。 - Stack（堆叠布局）：Stack 容器允许将多个子组件堆叠在一起，后添加的组件会覆盖在先添加的组件之上。可以通过
alignment属性来控制子组件在 Stack 容器中的对齐方式。
代码解决方案：构建一个示例布局
下面是一个使用 Row 和 Column 容器构建上述场景的示例代码：
import display from '@ohos.display';
@Entry
@Component
struct MyComponent {
build() {
Column() {
Row() {
Image('public/images/avatar.png') // 头像图片
.width(50)
.height(50);
Text('这是一段文字描述') // 文字描述
.fontSize(16)
.margin({ left: 10 });
}
.justifyContent(FlexAlign.Start) // 水平方向左对齐
.alignItems(VerticalAlign.Center); // 垂直方向居中
Button('操作按钮') // 操作按钮
.margin({ top: 10 })
.width('80%') // 宽度占据父容器的80%
.onClick(() => {
console.log('按钮被点击了');
});
}
.width('100%')
.height('100%')
.padding(20)
.justifyContent(FlexAlign.Start) // 垂直方向从顶部开始排列
}
}
这个例子首先使用 Column 容器将头像+文字和按钮垂直排列。然后，在 Column 容器内部，使用 Row 容器将头像和文字水平排列。通过调整 justifyContent 和 alignItems 属性，可以灵活地控制子组件的对齐方式。 实际项目开发中，可以结合 ArkTS 提供的各种组件，使用百分比布局 解决不同屏幕的适配问题。同时在涉及复杂计算时，可以考虑使用线程池，避免阻塞 UI 线程。
实战避坑经验总结
- 避免过度嵌套：过多的容器嵌套会增加 UI 渲染的复杂度，影响性能。尽量保持布局的简洁。
- 灵活运用属性：
justifyContent、alignItems和alignment属性是布局容器的关键。熟练掌握它们的用法，可以实现各种复杂的对齐效果。 - 注意容器的尺寸：确保容器的尺寸设置正确，否则可能会导致子组件显示不完整或错位。
- 性能优化：对于复杂的 UI 界面，可以使用懒加载、组件复用等技术来优化性能。
- 善用开发者工具：鸿蒙 DevEco Studio 提供了强大的开发者工具，可以帮助开发者调试 UI 布局，快速发现问题。
掌握 Row、Column 和 Stack 这三种基础布局容器，是鸿蒙 UI 开发的基石。通过不断实践和总结，开发者可以构建出更加美观、稳定和高效的鸿蒙应用。
在鸿蒙应用开发中，遇到性能瓶颈时，除了优化UI布局，还可以考虑对一些耗时操作进行优化。例如，可以使用Worker线程来执行一些后台任务，避免阻塞主线程。另外，还可以使用ImageCache来缓存图片，提高图片的加载速度。
在网络请求方面，可以选择使用fetch API 或者第三方的网络库，例如axios。同时，需要注意处理网络请求的异常情况，避免应用崩溃。对于一些需要频繁访问的数据，可以考虑使用LocalStorage或者Database进行本地缓存。
例如：对于用户登录后，服务器会返回token，可以使用 LocalStorage.setItem('token', token)存储token，后续请求在请求头中带上token。
import localStorage from '@ohos.storage.localstorage';
//保存
localStorage.setItem('token',token)
//获取
localStorage.getItem('token')
//删除
localStorage.removeItem('token')
//清空
localStorage.clear()
