ArkUI布局简介
ArkUI支持多种布局方式，包括但不限于Column、Row、Stack、Flex等。这些布局方式能够满足不同的UI设计需求，帮助开发者高效地创建复杂的界面。
1. Column布局
Column布局用于垂直排列子组件，适用于需要纵向排列元素的场景。它在创建列表、表单等界面时非常实用。
@Entry
@Component
struct test1 {
build() {
Column() {
ColumnExample()
}
}
}
@Component
struct ColumnExample {
build() {
Column() {
Text('Item 1').fontSize(24)
Text('Item 2').fontSize(24).margin({ top: 10 })
Text('Item 3').fontSize(24).margin({ top: 10 })
}
.width('100%')
.height('100%')
// 左对齐
.alignItems(HorizontalAlign.Start)
}
}
效果
2. Row布局
Row布局用于水平排列子组件，适用于需要横向排列元素的场景。它在创建工具栏、菜单栏等界面时非常实用。
@Entry
@Component
struct test1 {
build() {
Column() {
RowExample()
}
}
}
@Component
struct RowExample {
build() {
Row() {
Text('Item 1').fontSize(24)
Text('Item 2').fontSize(24).margin({ left: 10 })
Text('Item 3').fontSize(24).margin({ left: 10 })
}
.width('100%')
.height('100%')
// 上对齐
.alignItems(VerticalAlign.Top)
.justifyContent(FlexAlign.Center)
}
}
3. Stack布局
Stack布局用于将子组件堆叠在一起，后添加的组件会覆盖在前一个组件之上。适用于需要重叠元素的场景，如背景图和前景内容的叠加。
@Entry
@Component
struct test1 {
build() {
Column() {
StackExample()
}
}
}
@Component
struct StackExample {
build() {
Stack() {
Image($r('app.media.w700d1q75cms'))
.width('100%')
.height('100%')
Text('Overlay Text')
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bolder)
}
.width('100%')
.height('100%')
}
}
效果
4. Flex布局
Flex布局是一种高级布局方式，允许在主轴和交叉轴上灵活排列子组件。适用于复杂的UI布局需求，尤其在需要响应式设计时非常有效。
@Entry
@Component
struct test1 {
build() {
Column() {
FlexExample()
}
}
}
@Component
struct FlexExample {
build() {
Flex({
// 横轴为主轴
direction: FlexDirection.Row,
wrap: FlexWrap.Wrap,
justifyContent: FlexAlign.SpaceBetween
}) {
ForEach ([1,2,3],(item:number) => {
Text(item + '')
.fontSize(24)
.margin({ bottom: 10 })
.width('70vp')
.height('100vp')
.backgroundColor(Color.Brown)
.textAlign(TextAlign.Center)
.margin(5)
})
}
.width('100%')
.height('100%')
.padding(20)
}
}
效果
5. Grid布局
Grid布局用于将子组件按照网格排列，适用于需要创建复杂表格或网格结构的场景。
@Entry
@Component
struct test1 {
build() {
Column() {
GridExample()
}
}
}
@Component
struct GridExample {
build() {
Grid() {
ForEach ([1,2,3,4,5,6,7,8,9],(item:number) => {
GridItem() {
Text(item + '')
.fontSize(24)
.margin({ bottom: 10 })
.textAlign(TextAlign.Center)
.margin(5)
}
.backgroundColor(Color.Brown)
.margin(10)
})
}
.width('100%')
.height('100%')
// 三行 高度为 2:1:1
.rowsTemplate('2fr 1fr 1fr')
// 三列 宽度为 1:2:1
.columnsTemplate('1fr 2fr 1fr')
}
}
效果
6. List布局
List布局用于创建可滚动的列表，适用于需要展示大量数据的场景。
@Entry
@Component
struct test1 {
build() {
Column() {
ListExample()
}
}
}
@Component
struct ListExample {
items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
build() {
List() {
ForEach ([1,2,3,4,5,6,7,8,9],(item:number) => {
ListItem() {
Text(item + '')
.fontSize(24)
.margin(10)
}
.width('100%')
.height('100vp')
.border({
width:2,
color: Color.Pink,
style: BorderStyle.Solid
})
.margin({top:10,bottom:10})
})
}.width('100%').height('100%').padding(20)
}
}
效果
7. Swiper布局
Swiper布局用于创建滑动视图，适用于需要展示轮播图或滑动内容的场景。
@Entry
@Component
struct test1 {
build() {
Column() {
SwiperExample()
}
}
}
@Component
struct SwiperExample {
build() {
Column() {
Swiper() {
ForEach([1,2,3,4],(i:number) => {
Text(`Slide ${i}`)
.fontSize(24)
.textAlign(TextAlign.Center)
})
}
.width('100%')
.height('30%')
.border({
width:2,
color: Color.Orange,
style: BorderStyle.Dashed
})
}
.padding(20)
}
}
效果
8. Tabs布局
Tabs布局用于创建选项卡界面，适用于需要在多个视图之间切换的场景。
import HomePage from '../views/homePage'
import MinePage from '../views/minePage'
@Entry
@Component
struct test1 {
build() {
Column() {
TabsExample()
}
}
}
@Component
struct TabsExample {
build() {
Tabs({ barPosition: BarPosition.End }) {
TabContent(){
HomePage()
}.tabBar('首页')
TabContent(){
MinePage()
}.tabBar('我的')
}
.height('100%')
.width('100%')
.backgroundColor('#FFFFFF')
}
}
效果
ArkUI布局最佳实践
1. 合理选择布局方式
根据UI设计需求选择合适的布局方式。例如，列表或表格结构可以使用Column或Row布局，复杂的页面布局可以使用Flex布局。选择合适的布局方式不仅能简化开发工作，还能提升应用的性能和用户体验。
2. 使用间距和对齐属性
通过合理设置margin、padding、alignItems、justifyContent等属性，可以有效控制组件间的间距和对齐方式，提升界面美观度。例如，在创建一个按钮组时，可以使用margin属性为每个按钮添加适当的间距，使其看起来更加整齐。
3. 优化性能
避免在布局中嵌套过多的层级，以提升界面的渲染性能。对于复杂的布局，可以考虑分解成多个简单的布局来实现。例如，将一个复杂的页面拆分为多个独立的组件，每个组件负责一个特定的布局部分。
4. 响应式设计
在布局中考虑不同设备尺寸的适配，使用百分比或弹性单位设置宽高，确保界面在不同屏幕上都能良好显示。例如，在一个响应式布局中，可以使用Flex布局结合媒体查询，根据屏幕大小动态调整布局。
Entry
@Component
struct test1 {
build() {
Column() {
ResponsiveExample()
}
}
}
@Component
struct ResponsiveExample {
build() {
Column() {
Text('Responsive Item').fontSize('24vp').margin({ bottom: '5%' })
Text('Another Item').fontSize('24vp')
}
.width('80%')
.height('80%')
.backgroundColor(Color.Green)
.justifyContent(FlexAlign.Center)
.margin('10%')
}
}
效果
5. 使用组件化开发
通过将常用的布局模式封装成组件，可以提高代码的复用性和维护性。例如，可以将一个常用的卡片布局封装成Card组件，在多个页面中重复使用。
@Entry
@Component
struct test1 {
build() {
Column() {
Card()
}
}
}
@Component
struct Card {
build() {
Column() {
Text('Card Title').fontSize(20).fontWeight(FontWeight.Bold)
Text('Card Content').fontSize(16).margin({ top: 8 })
}
.padding(16)
.margin(8)
.border({ width: 1, color: '#ccc' })
.borderRadius(8)
}
}
效果
最后
小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：
鸿蒙（HarmonyOS NEXT）最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案
路线图适合人群：
IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术
2.视频学习资料+学习PDF文档
HarmonyOS Next 最新全套视频教程
纯血版鸿蒙全套学习资料（面试、文档、全套视频等）
总结
参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
