回复
HarmonyOS API：通用属性
joytrian
发布于 2023-3-22 19:39
浏览
0收藏
版本：v3.1 Beta
布局约束
更新时间: 2023-02-17 09:19
通过组件的宽高比和显示优先级约束组件显示效果。
说明
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数说明 | 描述 |
aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 |
displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。 小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。 说明： 仅在Row/Column/Flex(单行)容器组件中生效。 |
示例
// xxx.ets
@Entry
@Component
struct AspectRatioExample {
private children: string[] = ['1', '2', '3', '4', '5', '6']
build() {
Column({ space: 20 }) {
Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
Row({ space: 10 }) {
ForEach(this.children, (item) => {
// 组件宽度 = 组件高度*1.5 = 90
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(20)
.aspectRatio(1.5)
.height(60)
// 组件高度 = 组件宽度/1.5 = 60/1.5 = 40
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(20)
.aspectRatio(1.5)
.width(60)
}, item => item)
}
.size({ width: "100%", height: 100 })
.backgroundColor(0xd2cab3)
.clip(true)
// grid子元素width/height=3/2
Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
Grid() {
ForEach(this.children, (item) => {
GridItem() {
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(40)
.aspectRatio(1.5)
.height(160)
}
}, item => item)
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.size({ width: "100%", height: 165 })
.backgroundColor(0xd2cab3)
}.padding(10)
}
}图1 竖屏显示
图2 横屏显示
class ContainerInfo {
label: string = '';
size: string = '';
}
class ChildInfo {
text: string = '';
priority: number = 0;
}
@Entry
@Component
struct DisplayPriorityExample {
// 显示容器大小
private container: ContainerInfo[] = [
{ label: 'Big container', size: '90%' },
{ label: 'Middle container', size: '50%' },
{ label: 'Small container', size: '30%' }
]
private children: ChildInfo[] = [
{ text: '1\n(priority:2)', priority: 2 },
{ text: '2\n(priority:1)', priority: 1 },
{ text: '3\n(priority:3)', priority: 3 },
{ text: '4\n(priority:1)', priority: 1 },
{ text: '5\n(priority:2)', priority: 2 }
]
@State currentIndex: number = 0;
build() {
Column({ space: 10 }) {
// 切换父级容器大小
Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
.onClick(() => {
this.currentIndex = (this.currentIndex + 1) % this.container.length;
})
// 通过变量设置Flex父容器宽度
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.children, (item) => {
// 使用displayPriority给子组件绑定显示优先级
Text(item.text)
.width(120)
.height(60)
.fontSize(24)
.textAlign(TextAlign.Center)
.backgroundColor(0xbbb2cb)
.displayPriority(item.priority)
}, item => item.text)
}
.width(this.container[this.currentIndex].size)
.backgroundColor(0xd2cab3)
}.width("100%").margin({ top: 50 })
}
}
Flex布局
更新时间: 2023-02-17 09:19
说明
- 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
- 仅当父组件是 Flex、Column、Row 时生效。
属性
名称 | 参数说明 | 描述 |
flexBasis | number | string | 设置组件在父容器主轴方向上的基准尺寸。 默认值：'auto'（表示组件在主轴方向上的基准尺寸为组件原本的大小）。 不支持百分比设置。 |
flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。 默认值：0 |
flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。 父容器为Row、Column时，默认值：0 父容器为flex时，默认值：1 |
alignSelf | 子组件在父容器交叉轴的对齐格式，会覆盖Flex布局容器中的alignItems设置。 默认值：ItemAlign.Auto |
示例
// xxx.ets
@Entry
@Component
struct FlexExample {
build() {
Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 基于主轴的基准尺寸
// flexBasis()值可以是字符串'auto',表示基准尺寸是元素本来的大小,也可以是长度设置，相当于.width()/.height()
Flex() {
Text('flexBasis(100)')
.flexBasis(100) // 这里表示宽度为100vp
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text(`flexBasis('auto')`)
.flexBasis('auto') // 这里表示宽度保持原本设置的60%的宽度
.width('60%')
.height(100)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
// flexGrow()表示剩余空间分配给该元素的比例
Flex() {
Text('flexGrow(2)')
.flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('flexGrow(1)')
.flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
.height(100)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
// flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
// 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(0)')
.flexShrink(0)
.width('50%')
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('default flexShrink') // 默认值为1
.width('40%')
.height(100)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('flexShrink(1)')
.flexShrink(1)
.width('40%')
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
// alignSelf会覆盖Flex布局容器中的alignItems设置
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text('no alignSelf,height:70')
.width('33%')
.height(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('alignSelf End')
.alignSelf(ItemAlign.End)
.width('33%')
.height(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('no alignSelf,height:100%')
.width('34%')
.height('100%')
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}
}
边框设置
更新时间: 2023-02-17 09:19
设置组件边框样式。
说明
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
从API Version 9开始，父节点的border显示在子节点内容之上。
属性
名称 | 参数类型 | 描述 |
border | { width?: Length | EdgeWidths9+, color?: ResourceColor | EdgeColors9+, radius?: Length | BorderRadiuses9+, style?: BorderStyle | EdgeStyles9+ } | 统一边框样式设置接口。 - width：设置边框宽度。 - color：设置边框颜色。 - radius：设置边框圆角半径。 - style：设置边框样式。 |
borderStyle | BorderStyle | EdgeStyles9+ | 设置元素的边框样式。 默认值：BorderStyle.Solid |
borderWidth | Length | EdgeWidths9+ | 设置元素的边框宽度，不支持百分比。 |
borderColor | ResourceColor | EdgeColors9+ | 设置元素的边框颜色。 默认值：Color.Black |
borderRadius | Length | BorderRadiuses9+ | 设置元素的边框圆角半径，不支持百分比。 |
EdgeWidths9+对象说明
引入该对象时，至少传入一个参数。
名称 | 参数类型 | 必填 | 描述 |
left | Length | 否 | 左侧边框宽度。 |
right | Length | 否 | 右侧边框宽度。 |
top | Length | 否 | 上侧边框宽度。 |
bottom | Length | 否 | 下侧边框宽度。 |
EdgeColors9+对象说明
引入该对象时，至少传入一个参数。
名称 | 参数类型 | 必填 | 描述 |
left | 否 | 左侧边框颜色。 | |
right | 否 | 右侧边框颜色。 | |
top | 否 | 上侧边框颜色。 | |
bottom | 否 | 下侧边框颜色。 |
BorderRadiuses9+对象说明
引用该对象时，至少传入一个参数。
名称 | 参数类型 | 必填 | 描述 |
topLeft | Length | 否 | 左上角圆角半径。 |
topRight | Length | 否 | 右上角圆角半径。 |
bottomLeft | Length | 否 | 左下角圆角半径。 |
bottomRight | Length | 否 | 右下角圆角半径。 |
EdgeStyles9+对象说明
引入该对象时，至少传入一个参数。
名称 | 参数类型 | 必填 | 描述 |
left | 否 | 左侧边框样式。 | |
right | 否 | 右侧边框样式。 | |
top | 否 | 上侧边框样式。 | |
bottom | 否 | 下侧边框样式。 |
示例
// xxx.ets
@Entry
@Component
struct BorderExample {
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
// 线段
Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
// 点线
Text('dotted')
.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
}.width('100%').height(150)
Text('.border')
.fontSize(50)
.width(300)
.height(300)
.border({
width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },
color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
style: {
left: BorderStyle.Dotted,
right: BorderStyle.Dotted,
top: BorderStyle.Solid,
bottom: BorderStyle.Dashed
}
}).textAlign(TextAlign.Center)
}
}
}
赞
收藏
回复
相关推荐
