当前位置: 首页 > news >正文

HarmonyOS开发样式布局

个人简介

👨‍💻‍个人主页: 魔术师
📖学习方向: 主攻前端方向,正逐渐往全栈发展
🚴个人状态: 研发工程师,现效力于政务服务网事业
🇨🇳人生格言: “心有多大,舞台就有多大。”
📚推荐学习: 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注:仅供学习交流 严禁用于商业用途 ,若发现侵权内容请及时联系作者
📤更新进度:持续更新内容
🤙个人名片:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

HarmonyOS开发样式布局目录


文章目录

    • 个人简介
    • HarmonyOS开发样式布局目录
    • 样式布局
      • 1. 基础布局
      • [2. 堆叠布局(Stack)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5)
      • [3. 弹性布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5)
      • [4. 网格布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/grid-and-column-V5)
      • [5. 相对布局(RelativeContainer)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5)
      • [6. 滚动条说明(Scroll)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5)


样式布局

1. 基础布局

用途:用于实现垂直或水平排列的简单布局,适用于需要线性排列的场景(如导航栏、列表等)。

  • Column:纵向排列(从上到下)。
  • Row:横向排列(从左到右)。

关键属性

属性描述
space子组件之间的间距(单位:px)。
direction(Row/Column的父容器)设置主轴方向(Row为水平,Column为垂直)。
width/height容器的尺寸(支持百分比或固定值)。
  • 纵向布局(Column)案例:
    在这里插入图片描述

@Entry
@Component
struct Test{build() {Column(){// 纵向布局(Column)Column({ space: 20 }) {Row().width('100%').height(200).backgroundColor(Color.Pink)Row().width('100%').height(200).backgroundColor(Color.Blue)Row().width('100%').height(200).backgroundColor(Color.Yellow)}.width('100%').height('100%')// // 横向布局(Row)// Row({ space: 20 }) {//   Column().width(100).height('100%').backgroundColor(Color.Pink)//   Column().width(100).height('100%').backgroundColor(Color.Blue)//   Column().width(100).height('100%').backgroundColor(Color.Yellow)// }.width('100%').height('100%')}.width('100%').height('100%')}
}
  • 横向布局(Row)案例:

在这里插入图片描述


@Entry
@Component
struct Test{build() {Column(){// 横向布局(Row)Row({ space: 20 }) {Column().width(100).height('100%').backgroundColor(Color.Pink)Column().width(100).height('100%').backgroundColor(Color.Blue)Column().width(100).height('100%').backgroundColor(Color.Yellow)}.width('100%').height('100%')}.width('100%').height('100%')}
}

Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列
● 线性布局中永远不会产生换行
● 均不支持出现滚动条
● 横向排列的垂直居中,总行排列的水平居中
● 主轴-排列方向的轴
● 侧轴-排列方向垂直的轴

2. 堆叠布局(Stack)

用途:用于实现层叠效果,后添加的组件会覆盖前一个组件,适合需要重叠的复杂布局(如弹窗、图层叠加)。

关键属性

属性描述
alignContent设置子组件的对齐方式(如 Alignment.TopEnd)。
width/height容器的尺寸(必须显式设置)。

Stack的参数 可以设置子组件的排列方式alignContent

  • Top(顶部)

  • TopStart(左上角)

  • TopEnd(右上角)

  • Start(左侧)

  • End(右侧)

  • Center(中间)

  • Bottom(底部)

  • BottomStart(左下角)

  • BottomEnd(右下角)

  • 案例:
    在这里插入图片描述

@Entry
@Component
struct Test {build() {Row() {Stack() {Text('抖音').fontSize(50).fontWeight(FontWeight.Bold).fontColor('#ff2d83b3').translate({x:-2,y:2}).zIndex(1)Text('抖音').fontSize(50).fontWeight(FontWeight.Bold).fontColor('#ffe31fa9').translate({x:2,y:-2}).zIndex(2)Text('抖音').fontSize(50).fontWeight(FontWeight.Bold).fontColor('#ff030000').translate({x:0,y:0}).zIndex(3)}.width('100%')}.height('100%')}
}

3. 弹性布局

用途:通过灵活的主轴和交叉轴对齐,适配不同屏幕尺寸和动态内容(如自适应导航栏、卡片布局)。

关键属性

属性描述
direction主轴方向(FlexDirection.Row 或 FlexDirection.Column)。
justifyContent主轴对齐方式(如 FlexAlign.SpaceBetween)。
alignItems交叉轴对齐方式(如 ItemAlign.Center)。
flexGrow子组件的拉伸权重(值越大,占据空间越多)。

案例:
在这里插入图片描述

@Entry
@Component
struct Test {build() {Flex({ direction: FlexDirection.Column }){Column(){Text('一行两列')Flex(){Text('数据1').width('50%').backgroundColor(Color.Green).textAlign(TextAlign.Center)Text('数据2').width('50%').backgroundColor(Color.Orange).textAlign(TextAlign.Center)}}Column(){Text('一行一列')Flex({direction:FlexDirection.Column}){Text('数据1').width('100%').backgroundColor(Color.Green).textAlign(TextAlign.Center)Text('数据2').width('100%').backgroundColor(Color.Orange).textAlign(TextAlign.Center)}}.margin({top:'10'})}.width('100%').height('100%').backgroundColor(Color.Pink)}
}

4. 网格布局

用途:通过行列划分实现复杂布局(如商品列表、仪表盘),支持响应式设计。

关键属性

属性描述
columnsTemplate定义列模板(如 1fr 1fr 表示两列等分)。
rowsTemplate定义行模板(如 auto 100px)。
span子组件跨的列数或行数(如 GridColSpan(2))。
gutte列与列之间的间距(如 { x: 8, y: 12 })。

案例:
在这里插入图片描述

@Entry
@Component
struct Test {build() {Grid() {GridItemCases()GridItemCases()GridItemCases()GridItemCases()GridItemCases()GridItemCases()}.width("100%").height("100%").columnsTemplate("1fr 1fr 1fr").columnsGap(10).rowsGap(10).padding(10)}
}@Component
struct GridItemCases {build() {GridItem() {Row() {Column() {Text("grid布局")}.width('100%')}.height(200).borderRadius(4).backgroundColor(Color.Pink)}}
}

5. 相对布局(RelativeContainer)

用途:通过锚点规则实现精准的相对定位,适合需要动态调整位置的场景(如动态弹窗、自定义表单)。

关键属性

属性描述
alignRules定义子组件的锚点对齐规则(需配合 id 使用)。
id子组件的唯一标识(必须设置)。
container参与相对布局的容器内组件若被设备锚点,需要设置id,否则不显示

案例:
在这里插入图片描述

@Entry
@Component
struct Test {build() {RelativeContainer() {RelativeContainer() {Row(){}.width('33%').aspectRatio(1).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).backgroundColor(Color.Red)Row(){}.width('33%').aspectRatio(1).alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).backgroundColor(Color.Yellow)Row(){}.width('33%').aspectRatio(1).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },left: { anchor: '__container__', align: HorizontalAlign.Start }}).backgroundColor(Color.Blue).zIndex(2)Row(){}.width('33%').aspectRatio(1).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },right: { anchor: '__container__', align: HorizontalAlign.End }}).backgroundColor(Color.Green)}.width('60%').aspectRatio(1).backgroundColor(Color.Pink).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%').id('firstContainer').backgroundColor(Color.Gray)}
}

6. 滚动条说明(Scroll)

用途:实现可滚动区域,适用于内容超出容器大小的场景(如长列表、图文详情页)。

关键属性

属性描述
scrollDirection滚动方向(ScrollDirection.Vertical 或 ScrollDirection.Horizontal)。
bounce是否允许弹性回弹(默认 true)。
overscroll是否允许滚动超出边界时的阴影效果(默认 true)。
http://www.xdnf.cn/news/529651.html

相关文章:

  • web常见的攻击方式
  • UniApp 实现的文件预览与查看功能#三方框架 #Uniapp
  • 阻塞队列:线程安全与生产者消费者模型解析
  • nginx 流量控制
  • map与set封装
  • Web安全基础
  • 十三、面向对象底层逻辑-Dubbo序列化Serialization接口
  • MacBook连接不上星巴克Wi-Fi的解决方法
  • 《Effective Python》第三章 循环和迭代器——在遍历参数时保持防御性
  • 江协科技EXTI外部中断hal库实现
  • 需求频繁变更?AI 驱动的自动化解决方案实践
  • 企业销售管理痛点解析与数字化解决方案
  • Unity 如何使用Timeline预览、播放特效
  • 第十六届蓝桥杯复盘
  • C#中的ThreadStart委托
  • 软件架构风格系列(7):闭环控制架构
  • 基于不透光法的柴油机排放精准监测
  • Android13 以太网(YT8531)
  • 【JavaScript】用 Proxy 拦截对象属性
  • Xshell实战:远程连接VMware CentOS7虚拟机与高效运维指南——从零配置到自动化操作,解锁Xshell的核心价值
  • Bootstrap 5 容器与网格系统详解
  • 项目删除了,为什么vscode中的git还是存在未提交记录,应该怎么删除掉
  • vue3个生命周期解析,及setup
  • 遨游科普:三防平板是什么?有什么作用?
  • 线光谱共焦传感器:复杂材质检测
  • MCU 温度采样理论(-ADC Temperature sensor)
  • 用户账号及权限管理:企业安全的基石与艺术
  • python训练营day29
  • CAN总线采样点不一致的危害
  • 26、DAPO论文笔记(解耦剪辑与动态采样策略优化,GRPO的改进)