鸿蒙5.0版开辟：ArkTS组件通用属性（位置设置）

风雨同行 · 2024-11-7 04:01:16

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

位置设置

设置组件的对齐方式、布局方向和显示位置。
阐明：
从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
align

align(value: Alignment)
设置容器元素绘制区域内的子元素的对齐方式。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueAlignment是设置容器元素绘制区域内的子元素的对齐方式。
只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效，其中和文本相干的组件Marquee、text、TextArea、TextInput的align结果参考textAlign。
不支持textAlign属性的组件则无法设置程度方向的文字对齐。
默认值：Alignment.Center
阐明：
在Stack中该属性与alignContent效果一致，只能设置子组件在容器内的对齐方式。 direction

direction(value: Direction)
设置容器元素内主轴方向上的布局。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueDirection是设置容器元素内主轴方向上的布局。
该属性在Column组件上不生效。
默认值：Direction.Auto position

position(value: Position | Edges | LocalizedEdges)
绝对定位，确定子组件相对父组件的位置。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valuePosition | Edges12+ | LocalizedEdges12+是绝对定位，确定子组件相对父组件的位置。当父容器为Row/Column/Flex时，设置position的子组件不占位。
Position范例基于父组件左上角确定位置;Edges范例基于父组件四边确定位置，top/left/right/bottom分别为组件各边距离父组件相应边的边距，通过边距来确定组件相对于父组件的位置;LocalizedEdges范例基于父组件四边确定位置，支持镜像模式。
适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。
不支持在宽高为零的布局容器上设置。
当父容器为RelativeContainer, 且子组件设置了alignRules属性, 则子组件的position属性不生效。 markAnchor

markAnchor(value: Position | LocalizedPosition)
设置子元素在位置定位时的锚点。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valuePosition | LocalizedPosition12+是设置子元素在位置定位时的锚点，从position或offset的位置上，进一步偏移。
设置.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})，效果等于设置.position({x: value1 - value3, y: value2 - value4})，offset同理。
单独使用markAnchor，设置.markAnchor({x: value1, y: value2})，效果等于设置.offset({x: -value1, y: -value2})。
API version 9及以前，默认值为：
{
x: 0,
y: 0
}
API version 10：无默认值。 offset

offset(value: Position | Edges | LocalizedEdges)
相对偏移，组件相对本来的布局位置举行偏移。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valuePosition | Edges12+ | LocalizedEdges12+是相对偏移，组件相对本来的布局位置举行偏移。offset属性不影响父容器布局，仅在绘制时调解位置。
Position范例基于组件自身左上角偏移，Edges范例基于组件自身四边偏移。 offset属性设置 {x: x, y: y} 与设置 {left: x, top: y} 以及 {right: -x, bottom: -y} 效果相同, 范例LocalizedPosition支持镜像模式：LRT模式下start 等同于x，RTL模式下等同于-x
API version 9及以前，默认值为：
{
x: 0,
y: 0
}
API version 10：无默认值。 alignRules9+

alignRules(value: AlignRuleOption)
指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueAlignRuleOption是指定设置在相对容器中子组件的对齐规则。 AlignRuleOption对象阐明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
名称范例描述left{ anchor: string, align: HorizontalAlign }设置左对齐参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。right{ anchor: string, align: HorizontalAlign }设置右对齐参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。middle{ anchor: string, align: HorizontalAlign }设置横向居中对齐方式的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。top{ anchor: string, align: VerticalAlign }设置顶部对齐的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。bottom{ anchor: string, align: VerticalAlign }设置底部对齐的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。center{ anchor: string, align: VerticalAlign }设置纵向居中对齐方式的参数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。bias11+Bias设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。
卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 Bias对象阐明

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数名范例必填阐明horizontalnumber 否程度方向上的bias值。
当子组件的width可以确定并且有2个程度方向的锚点时生效。
默认值： 0.5verticalnumber 否垂直方向上的bias值。
当子组件的height可以确定并且有2个垂直方向的锚点时生效。
默认值： 0.5 chainMode12+

chainMode(direction: Axis, style: ChainStyle)
指定以该组件为链头所构成的链的参数，仅当父容器为RelativeContainer时生效。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明directionAxis是链的方向。styleChainStyle是链的样式。示例

示例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 })
}
}
ts

复制代码

示例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(-5%, 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 })
}
}
ts

复制代码

示例3

// xxx.ets
@Entry
@Component
struct Example3 {
build() {
Column({ space: 20 }){
Text('position use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center).position({bottom: 0, right: 0})
Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center).position({top: 0, left: 0})
Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center).position({ top: '10%', left: '50%' })
Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center).position({ bottom: 0, left: 30 })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
Text('offset use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center).offset({top: 30, left: 0})
Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
.textAlign(TextAlign.Center)
Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12)
.textAlign(TextAlign.Center).offset({bottom: 10, right: 30})
}.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed })
}.width('100%').margin({ top: 25 })
}
}
ts

复制代码

示例4

// xxx.ets
// 通用布局属性支持镜像能力
// 从上到下依次为position，offset，markAnchor接口效果
// 黄色赋值为原本效果，粉色赋值为镜像效果
import { LengthMetrics } from '@ohos.arkui.node';
@Entry
@Component
struct Example4 {
private scroller: Scroller = new Scroller()
build() {
Column() {
Stack({ alignContent: Alignment.End }) {
Scroll(this.scroller) {
Flex({ direction: FlexDirection.Column }) {
RelativeContainer() {
Row() {
}
.position({ start: LengthMetrics.px(200), top: LengthMetrics.px(100) })
.width("30%")
.height("20%")
.backgroundColor(Color.Pink)
.padding(50)
.margin(50)
Row() {
}
.position({ left:'200px', top: '100px' })
.width("30%")
.height("20%")
.backgroundColor(Color.Yellow)
.padding(50)
.margin(50)
Row() {
}
.offset({ start: LengthMetrics.vp(100), top: LengthMetrics.vp(200) })
.width("30%")
.height("20%")
.backgroundColor(Color.Pink)
.padding(50)
.margin(50)
Row() {
}
.offset({ left: 100, top: 200 })
.width("30%")
.height("20%")
.backgroundColor(Color.Yellow)
.padding(50)
.margin(50)
Row() {
}
.markAnchor({ start: LengthMetrics.fp(100), top: LengthMetrics.fp(-350) })
.width("30%")
.height("20%")
.backgroundColor(Color.Pink)
.padding(50)
.margin(50)
Row() {
}
.markAnchor({ x: '100fp', y: '-350fp' })
.width("30%")
.height("20%")
.backgroundColor(Color.Yellow)
.padding(50)
.margin(50)
}
.backgroundColor(Color.White)
.padding(50)
.margin(50)
}
}
.width('100%')
.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Vertical)
ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) {
Text()
.width(20)
.height(100)
.borderRadius(10)
.backgroundColor('#C0C0C0')
}.width(20).backgroundColor('#ededed')
}
}.height('90%')
}
}
ts

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

用户名		自动登录	找回密码
密码			立即注册

鸿蒙5.0版开辟：ArkTS组件通用属性（位置设置）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云