位置设置
设置组件的对齐方式、布局方向和显示位置。
说明：
开发前请熟悉鸿蒙开发指导文档： gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
| 名称 | 参数类型 | 描述 |
|---|---|---|
| align | [Alignment] | 设置元素内容在元素绘制区域内的对齐方式。 只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput中生效，其中和文本相关的组件Marquee、text、TextArea、TextInput的align结果参考[textAlign]。 不支持textAlign属性的组件则无法设置水平方向的文字对齐。 默认值：Alignment.Center 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| direction | [Direction] | 设置元素水平方向的布局。 默认值：Direction.Auto 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| position | [Position] | 绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不参与父容器布局，即不占位，仅在绘制时进行位置调整。 适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| markAnchor | [Position] | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset API version 9及以前，默认值为： { x: 0, y: 0 } API version 10：无默认值。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| offset | [Position] | 相对定位，设置元素相对于自身的偏移量。设置该属性后子组件正常参与父容器布局，在绘制时基于父容器给予的offset做一次额外的偏移。 API version 9及以前，默认值为： { x: 0, y: 0 } API version 10：无默认值。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| alignRules9+ | { left?: { anchor: string, align: [HorizontalAlign] }; right?: { anchor: string, align: [HorizontalAlign] }; middle?: { anchor: string, align: [HorizontalAlign] }; top?: { anchor: string, align: [VerticalAlign] }; bottom?: { anchor: string, align: [VerticalAlign] }; center?: { anchor: string, align: [VerticalAlign] } } | 指定相对容器的对齐规则，仅当父容器为[RelativeContainer]时生效。 - left：设置左对齐参数。 - right：设置右对齐参数。 - middle：设置中间对齐的参数。 - top：设置顶部对齐的参数。 - bottom：设置底部对齐的参数。 - center：设置中心对齐的参数。 该接口支持在ArkTS卡片中使用。 说明： - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 |
示例
示例1
// xxx.ets
@Entry
@Component
struct PositionExample1 {
build() {
Column() {
Column({ space: 10 }) {
// 元素内容<元素宽高，设置内容在与元素内的对齐方式
Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
Stack() {
Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C)
Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9)
}.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
.align(Alignment.BottomEnd)
Stack() {
Text('top start')
}.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
.align(Alignment.TopStart)
// 父容器设置direction为Direction.Ltr，子元素从左到右排列
Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(Direction.Ltr)
// 父容器设置direction为Direction.Rtl，子元素从右到左排列
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
}
.width('90%')
.direction(Direction.Rtl)
}
}
.width('100%').margin({ top: 5 })
}
}
示例2
// xxx.ets
@Entry
@Component
struct PositionExample2 {
build() {
Column({ space: 20 }) {
// 设置子组件左上角相对于父组件左上角的偏移位置
Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('2 position(30, 10)')
.size({ width: '60%', height: '30' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.align(Alignment.Start)
.position({ x: 30, y: 10 })
Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('4 position(50%, 70%)')
.size({ width: '50%', height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.position({ x: '50%', y: '70%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
// 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
// y为最终定位点距离起点垂直方向间距，y>0向上，反之向下
Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%')
Stack({ alignContent: Alignment.TopStart }) {
Row()
.size({ width: '100', height: '100' })
.backgroundColor(0xdeb887)
Text('text')
.fontSize('30px')
.textAlign(TextAlign.Center)
.size({ width: 25, height: 25 })
.backgroundColor(Color.Green)
.markAnchor({ x: 25, y: 25 })
Text('text')
.fontSize('30px')
.textAlign(TextAlign.Center)
.size({ width: 25, height: 25 })
.backgroundColor(Color.Green)
.markAnchor({ x: -100, y: -25 })
Text('text')
.fontSize('30px')
.textAlign(TextAlign.Center)
.size({ width: 25, height: 25 })
.backgroundColor(Color.Green)
.markAnchor({ x: 25, y: -25 })
}.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
// 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('2 offset(15, 30)')
.size({ width: 120, height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.align(Alignment.Start)
.offset({ x: 15, y: 30 })
Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('4 offset(-10%, 20%)')
.size({ width: 100, height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.offset({ x: '-5%', y: '20%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
}
.width('100%').margin({ top: 25 })
}
}
2024年，已有许多程序员把未来投向了鸿蒙开发，想必也在网上寻找过【鸿蒙学习资料】，然而搜索到的资料都是七零八碎比较杂乱，对于新入门的人来说增加了时间成本；为了避免大家在学习过程中浪费过多时间。对此录制了一套鸿蒙基础进阶视频（HarmonyOS NEXT）开发入门&实战教学视频（200集+）发放给大家。↓↓↓点击即可
《鸿蒙 (HarmonyOS NEXT)开发入门&实战教学视频》
《鸿蒙ArkTS语言》
《鸿蒙ArkUI声明式》
《鸿蒙开发环境搭建》
另外还根据鸿蒙官方发布的文档结合华为内部人员分享，经过反复修改整理得出的一整套鸿蒙（HarmonyOS NEXT）学习手册（共计2000页+）想要鸿蒙进阶文档的开发者有福了！
内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上少走弯路！点击即可↓↓↓
《鸿蒙 (HarmonyOS NEXT)开发基础与实战手册》
扫一扫
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
