鸿蒙布局与组件
在鸿蒙ArkTS开发中，页面UI全部依靠布局容器与基础组件实现。本文汇总八大高频核心组件：5大基础布局、2大滚动布局、1大轮播组件，覆盖日常99%页面开发场景，知识点精炼、代码可直接运行，适合新手入门与复习。一、基础五大布局（静态排版核心）1. Column 垂直布局核心作用：子组件从上到下垂直排列，是页面最基础的纵向布局，默认靠左摆放、无法滚动。核心属性：justifyContent控制垂直对齐，alignItems控制水平对齐。Column(){
Text("内容1")
Text("内容2")
}
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(ItemAlign.Center)适用场景：详情页、文本内容、表单竖向排版。2. Row 水平布局核心作用：子组件从左到右横向排列，和Column互补，用于横向规整排版。核心属性：justifyContent控制水平对齐，alignItems控制垂直对齐。Row(){
Text("左")
Text("中")
Text("右")
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)适用场景：导航栏、按钮组、横向功能选项。3. Stack 层叠布局核心作用：组件层级叠加，后编写的组件覆盖在先组件上方，实现图层效果。Stack(){
Text("底层背景").width(200).height(200).backgroundColor(Color.Gray)
Text("悬浮文字").fontSize(20)
}4. Flex 弹性布局核心作用：增强版Row，支持自动换行，适配不同屏幕尺寸，实现自适应流式布局。关键参数：wrap: FlexWrap.Wrap 开启自动换行。Flex({ wrap: FlexWrap.Wrap }){
Text("格子1").width('30%').height(80).border(1)
Text("格子2").width('30%').height(80).border(1)
}内置 __container__ 代表父容器本身。RelativeContainer(){
Text("A").id("a").width(100).height(100)
.alignRules({
top:{anchor:"__container__",align:VerticalAlign.Top},
left:{anchor:"__container__",align:HorizontalAlign.Start}
})
}
.height(300)适用场景：新闻、通讯录、设置列表、长文本滚动页面。7. Grid 网格布局核心作用：规整二维网格布局，固定列数、自动均分，专门实现九宫格样式，支持滚动。核心配置：columnsTemplate 设置列数，fr代表等分比例。Grid(){
GridItem(){ Text("1") }
GridItem(){ Text("2") }
}
.columnsTemplate("1fr 1fr 1fr")
.columnsGap(10).rowsGap(10)适用场景：九宫格菜单、相册、商品网格、计算器按键。Flex与Grid区别：Flex列数自适应、可换行；Grid列数固定、排版更规整。三、Swiper 轮播组件（常用功能组件）核心作用：实现页面轮播、滑动切换，自带指示器、自动播放、循环滑动，是首页Banner、引导页必备组件。常用属性：indicator指示器、loop循环、autoPlay自动播放、interval切换时长。Swiper(){
Text("轮播页面1").width('100%').height(200).backgroundColor('#f5f5f5')
Text("轮播页面2").width('100%').height(200).backgroundColor('#e0f7fa')
}
.width('90%').height(200)
.indicator(true)
.loop(true)
.autoPlay(true)