OpenHarmony应用开发 |
您所在的位置：网站首页 › 黑白边框背景图片 › OpenHarmony应用开发 |
OpenHarmony应用开发
|
版本：v3.2 Release 边框设置设置组件边框样式。 说明： 从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 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框样式。 borderWidth Length | EdgeWidths9+ 设置元素的边框宽度，不支持百分比。 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框宽度。 borderColor ResourceColor | EdgeColors9+ 设置元素的边框颜色。 默认值：Color.Black 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框颜色。 borderRadius Length | BorderRadiuses9+ 设置元素的边框圆角半径，不支持百分比。 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框圆角半径。 EdgeWidths9+对象说明引入该对象时，至少传入一个参数。 名称 参数类型 必填 描述 left Length 否 左侧边框宽度。 right Length 否 右侧边框宽度。 top Length 否 上侧边框宽度。 bottom Length 否 下侧边框宽度。 EdgeColors9+对象说明引入该对象时，至少传入一个参数。 名称 参数类型 必填 描述 left ResourceColor 否 左侧边框颜色。 right ResourceColor 否 右侧边框颜色。 top ResourceColor 否 上侧边框颜色。 bottom ResourceColor 否 下侧边框颜色。 BorderRadiuses9+对象说明引用该对象时，至少传入一个参数。 名称 参数类型 必填 描述 topLeft Length 否 左上角圆角半径。 topRight Length 否 右上角圆角半径。 bottomLeft Length 否 左下角圆角半径。 bottomRight Length 否 右下角圆角半径。 EdgeStyles9+对象说明引入该对象时，至少传入一个参数。 名称 参数类型 必填 描述 left BorderStyle 否 左侧边框样式。 right BorderStyle 否 右侧边框样式。 top BorderStyle 否 上侧边框样式。 bottom BorderStyle 否 下侧边框样式。 示例
// 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) } } }
设置容器组件的图片边框样式。 说明： 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 属性名称 参数类型 描述 borderImage BorderImageOption 图片边框或者渐变色边框设置接口。 该接口支持在ArkTS卡片中使用。 BorderImageOption对象说明该接口支持在ArkTS卡片中使用。 名称 类型 描述 source string | Resource | linearGradient 边框图源或者渐变色设置。 说明： 边框图源仅适用于容器组件，如Row、Column、Flex，在非容器组件上使用会失效。 slice Length | EdgeWidths 设置图片边框切割宽度。 默认值：0 width Length | EdgeWidths 设置图片边框宽度。 默认值：0 outset Length | EdgeWidths 设置边框图片向外延伸距离。 默认值：0 repeat RepeatMode 设置边框图片的重复方式。 默认值：RepeatMode.Stretch fill boolean 设置边框图片中心填充。 默认值：false RepeatMode枚举说明该接口支持在ArkTS卡片中使用。 名称 描述 Repeat 被切割图片重复铺平在图片边框上，超出的部分会被剪裁。 Stretch 被切割图片以拉伸填充的方式铺满图片边框。 Round 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片。 Space 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充。 示例示例1
// xxx.ets @Entry @Component struct Index { build() { Row() { Column() { Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) .borderImage({ source: { angle: 90, direction: GradientDirection.Left, colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] }, slice: { top: 10, bottom: 10, left: 10, right: 10 }, width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, repeat: RepeatMode.Stretch, fill: false }) } .width('100%') } .height('100%') } }
// xxx.ets @Entry @Component struct Index { @State outSetValue: number = 40 build() { Row() { Column() { Row() { Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) } .borderImage({ source: $r('app.media.icon'), slice: `${this.outSetValue}%`, width: `${this.outSetValue}px`, outset: '5px', repeat: RepeatMode.Repeat, fill: false }) Slider({ value: this.outSetValue, min: 0, max: 100, style: SliderStyle.OutSet }) .margin({ top: 30 }) .onChange((value: number, mode: SliderChangeMode) => { this.outSetValue = value console.info('value:' + value + 'mode:' + mode.toString()) }) } .width('100%') } .height('100%') } }
设置组件的背景样式。 说明： 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 属性名称 参数类型 描述 backgroundColor ResourceColor 设置组件的背景色。 从API version 9开始，该接口支持在ArkTS卡片中使用。 backgroundImage src: ResourceStr, repeat?: ImageRepeat src：图片地址，支持网络图片资源地址和本地图片资源地址和Base64，不支持svg类型的图片。 repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。 从API version 9开始，该接口支持在ArkTS卡片中使用。 backgroundImageSize { width?: Length, height?: Length} | ImageSize 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 width和height取值范围： [0, +∞) 默认值：ImageSize.Auto 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比进行调整。 backgroundImagePosition Position | Alignment 设置背景图在组件中显示位置，即相对于组件左上角的坐标。 默认值： { x: 0, y: 0 } x和y值设置百分比时，偏移量是相对组件自身宽高计算的。 从API version 9开始，该接口支持在ArkTS卡片中使用。 示例
// xxx.ets @Entry @Component struct BackgroundExample { build() { Column({ space: 5 }) { Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .backgroundImage('/comment/bg.jpg', ImageRepeat.X) .backgroundImageSize({ width: '250px', height: '140px' }) .width('90%') .height(70) .border({ width: 1 }) Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) .backgroundImageSize({ width: '500px', height: '120px' }) .width('90%') .height(100) .border({ width: 1 }) Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .width('90%').height(150) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize({ width: 1000, height: 500 }) .border({ width: 1 }) Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) // 不保准图片完整的情况下占满盒子 Row() .width(200) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize(ImageSize.Cover) .border({ width: 1 }) Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) // 保准图片完整的情况下放到最大 Row() .width(200) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize(ImageSize.Contain) .border({ width: 1 }) Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .width(100) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize({ width: 1000, height: 560 }) .backgroundImagePosition({ x: -500, y: -300 }) .border({ width: 1 }) } .width('100%').height('100%').padding({ top: 5 }) } }
设置组件的透明度。 说明： 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 属性名称 参数类型 描述 opacity number | Resource 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。 说明： 子组件可以继承父组件的此属性。默认值：1 从API version 9开始，该接口支持在ArkTS卡片中使用。 示例
// xxx.ets @Entry @Component struct OpacityExample { build() { Column({ space: 5 }) { Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE) Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE) Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE) } .width('100%') .padding({ top: 5 }) } }
控制组件是否可见。 说明： 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 属性名称 参数类型 描述 visibility Visibility 控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。 默认值：Visibility.Visible 从API version 9开始，该接口支持在ArkTS卡片中使用。 示例
// xxx.ets @Entry @Component struct VisibilityExample { build() { Column() { Column() { // 隐藏不参与占位 Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE) // 隐藏参与占位 Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE) // 正常显示，组件默认的显示模式 Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE) }.width('90%').border({ width: 1 }) }.width('100%').margin({ top: 5 }) } }
文章转载自：https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md/ |
【本文地址】
今日新闻 |
推荐新闻 |