鸿蒙（ArkTS/ArkUI）五大布局详解 + 可运行基础代码

前置规则你图片末尾说明任意页面 / 自定义组件的build()中有且只能有 1 个根布局容器复杂界面可在根布局内部嵌套其他布局容器1. 垂直布局 Column概念容器名Column子组件从上到下垂直依次排列最基础常用布局属于线性布局。主轴竖直方向交叉轴水平方向Entry Component struct CardStyleDemo{ build() { Column({space:50}){ Column({space:20}){ Text(个人信息的卡片) .fontSize(24) .fontWeight(FontWeight.Bold) Text(姓名: 哈哈) .fontSize(18) Text(专业: 计算机应用技术) .fontSize(18) }2. 水平布局 Row概念容器名Row子组件从左到右水平依次排列线性布局。主轴水平方向交叉轴竖直方向Row(){ Button(登录) .width(150) .height(50) .backgroundColor(0xf8f8f8) .fontSize(18) .fontColor(Color.White) .border({width:3,color:Color.Black})3. 相对布局 RelativeContainer概念容器名RelativeContainer子组件不按顺序排列通过alignRules规则以某个组件 / 容器边界为锚点上下左右相对定位适合不规则页面排版。 子组件必须设置id才能互相锚定。4. 层叠布局 Stack概念容器名StackZ 轴堆叠布局子组件按编写顺序层层叠加后写的组件默认覆盖在上方可设置内部对齐方式实现悬浮、遮罩、头像角标效果。5. 弹性布局 Flex概念容器名Flex增强版线性布局支持自动换行、子元素拉伸 / 压缩占比、灵活分配剩余空间适配多尺寸屏幕和前端 CSS Flex 逻辑高度一致。鸿蒙 ArkUI 常用基础组件详解概念 可运行 ArkTS 代码一、Image 图片组件作用展示本地 / 网络图片支持缩放、圆角、裁剪等样式设置是页面最常用素材展示组件。Row({space:20}){ Image($r(app.media.liangzi)) .width(120) .height(120) .borderRadius(60)二、Text 文本组件 / TextInput 输入框组件作用Text展示静态文字设置字号、颜色、字重、换行等样式TextInput接收用户手动输入内容可做账号、密码录入Column({space:15}){ Text(鸿蒙系统开发者良子) .fontSize(20) Text(计算机应用工程系) .fontSize(20)三、Button 按钮组件作用可点击交互控件绑定点击事件实现页面跳转、数据提交、弹窗触发等逻辑支持填充、描边、文本型样式。Row({space:15}){ Button(编辑资料) .fontSize(20) .width(150) .height(50) .borderRadius(8)四、Radio 单选框组件作用同一分组内只能选中一个选项常用于性别选择、单一选项投票等场景依靠name属性分组。Text(第一题) Radio({value:Radio1,group:radioGroup}) .checked(false) Radio({value:Radio2,group:radioGroup}) .checked(true) Radio({value:Radio3,group:radioGroup}) .checked(false) Radio({value:Radio4,group:radioGroup}) .checked(false)五、Tabs 选项卡组件作用实现顶部 / 底部标签栏切换多页面内容比如首页、分类、我的切换由Tabs容器 TabContent页面组成。build() { Tabs(){ TabContent(){ Column({space:30}){ Text(欢迎来到河北软件职业技术学院) .fontSize(22) .fontWeight(FontWeight.Bolder)六、Swiper 轮播图组件作用自动 / 手动横向滑动切换多张图片首页广告、活动横幅最常用组件可设置自动轮播、指示器、切换时长\build() { Column() { Swiper() { ForEach(this.bannerList, (item: Resource) { Image(item) .width(98%) .height(100%) .objectFit(ImageFit.Cover)七、Video 视频播放组件作用播放本地视频、网络视频资源自带播放、暂停、进度条控制器支持自定义控制逻辑。