OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制

素年锦时静待君丶

发布于 2023-4-14 15:30

6540浏览

0收藏

版本：v3.2 Release

文本样式设置

针对包含文本元素的组件，设置文本样式。

说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数类型	描述
fontColor	ResourceColor	设置字体颜色。
fontSize	Length	设置字体大小，Length为number类型时，使用fp单位。字体默认大小16。不支持设置百分比字符串。
fontStyle	FontStyle	设置字体样式。默认值：FontStyle.Normal
fontWeight	number \| FontWeight \| string	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal
fontFamily	string \| Resource	设置字体列表。默认字体’HarmonyOS Sans’，且当前只支持这种字体。
lineHeight	string \| number \| Resource	设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
decoration	{ type: TextDecorationType, color?: ResourceColor}	设置文本装饰线样式及其颜色。默认值：{ type: TextDecorationType.None, color：Color.Black }

示例

// xxx.ets
@Entry
@Component
struct TextStyleExample {
  build() {
    Column({ space: 5 }) {
      Text('default text')
      
      Text('text font color red').fontColor(Color.Red)
      
      Text('text font default')
      Text('text font size 10').fontSize(10)
      Text('text font size 10fp').fontSize('10fp')
      Text('text font size 20').fontSize(20)
      
      Text('text font style Italic').fontStyle(FontStyle.Italic)
      
      Text('text fontWeight bold').fontWeight(700)
      Text('text fontWeight lighter').fontWeight(FontWeight.Lighter)
      
      Text('red 20 Italic bold text')
        .fontColor(Color.Red)
        .fontSize(20)
        .fontStyle(FontStyle.Italic)
        .fontWeight(FontWeight.Bold)
      
      Text('Orange 18 Normal text')
        .fontColor(Color.Orange)
        .fontSize(18)
        .fontStyle(FontStyle.Normal)
    }.width('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

栅格设置

说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。

属性

名称	参数类型	描述
useSizeType	{ xs?: number \| { span: number, offset: number }, sm?: number \| { span: number, offset: number }, md?: number \| { span: number, offset: number }, lg?: number \| { span: number, offset: number } }	设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。当值为number类型时，仅设置列数，当格式如{“span”: 1, “offset”: 0}时，指同时设置占用列数与偏移列数。 - xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。 - sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。 - md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。 - lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。
gridSpan	number	默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。说明：设置了栅格span属性，组件的宽度由栅格布局决定。默认值：1
gridOffset	number	默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。说明： - 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。 - 偏移位移 = （列宽 + 间距）* 列数。 - 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。默认值：0

示例

// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
  build() {
    Column() {
      Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%')
      GridContainer() {
        Row({}) {
          Row() {
            Text('Left').fontSize(25)
          }
          .useSizeType({
            xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
            md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
          })
          .height("100%")
          .backgroundColor(0x66bbb2cb)

          Row() {
            Text('Center').fontSize(25)
          }
          .useSizeType({
            xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
            md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
          })
          .height("100%")
          .backgroundColor(0x66b6c5d1)

          Row() {
            Text('Right').fontSize(25)
          }
          .useSizeType({
            xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
            md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
          })
          .height("100%")
          .backgroundColor(0x66bbb2cb)
        }
        .height(200)

      }
      .backgroundColor(0xf1f3f5)
      .margin({ top: 10 })

      // 单独设置组件的span和offset,在sm尺寸大小的设备上使用useSizeType中sm的数据实现一样的效果
      Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
      GridContainer() {
        Row() {
          Row() {
            Text('Left').fontSize(25)
          }
          .gridSpan(1)
          .height("100%")
          .backgroundColor(0x66bbb2cb)

          Row() {
            Text('Center').fontSize(25)
          }
          .gridSpan(2)
          .gridOffset(1)
          .height("100%")
          .backgroundColor(0x66b6c5d1)

          Row() {
            Text('Right').fontSize(25)
          }
          .gridSpan(1)
          .gridOffset(3)
          .height("100%")
          .backgroundColor(0x66bbb2cb)
        }.height(200)
      }
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.

图1 设备宽度为SM

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

图2 设备宽度为MD

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

图3 设备宽度为LG

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

图4 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

颜色渐变

设置组件的颜色渐变效果。

说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数类型	描述
linearGradient	{ angle?: number \| string, direction?: GradientDirection, colors: Array<ColorStop>, repeating?: boolean }	线性渐变。 - angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180 - direction: 线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom - colors: 渐变的颜色描述。 - repeating: 为渐变的颜色重复着色。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
sweepGradient	{ center: Point, start?: number \| string, end?: number \| string, rotation?: number\|string, colors: Array<ColorStop>, repeating?: boolean }	角度渐变，仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。 - center：为角度渐变的中心点，即相对于当前组件左上角的坐标。 - start：角度渐变的起点。默认值：0 - end：角度渐变的终点。默认值：0 - rotation: 角度渐变的旋转角度。默认值：0 - colors: 为渐变的颜色描述。 - repeating: 为渐变的颜色重复着色。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。当start、end、rotation的数据类型为string，值为"90"或"90%"，与90效果一致
radialGradient	{ center: Point, radius: number \| string, colors: Array<ColorStop>, repeating?: boolean }	径向渐变。 - center：径向渐变的中心点，即相对于当前组件左上角的坐标。 - radius：径向渐变的半径。取值范围 [0,+∞) 说明：设置为小于的0值时，按值为0处理。 - colors: 为渐变的颜色描述。 - repeating: 为渐变的颜色重复着色。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。

示例

// xxx.ets
@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%')
        .height(50)
        .linearGradient({
          angle: 90,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%')
        .height(50)
        .linearGradient({
          direction: GradientDirection.Left, // 渐变方向
          repeating: true, // 渐变颜色是否重复
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      
      Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          rotation: 45, // 旋转角度
          repeating: true, // 渐变颜色是否重复
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

// xxx.ets
@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center: [50, 50],
          radius: 60,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center: [50, 50],
          radius: 60,
          repeating: true,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

Popup控制

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

接口

名称	参数类型	描述
bindPopup	show: boolean, popup: PopupOptions \| CustomPopupOptions⁸⁺	给组件绑定Popup弹窗，设置参数show为true弹出弹框。 show: 弹窗显示状态，默认值为false，隐藏弹窗。 popup: 配置当前弹窗提示的参数。

PopupOptions类型说明

名称	类型	必填	描述
message	string	是	弹窗信息内容。
placementOnTop	boolean	否	是否在组件上方显示，默认值为false。
primaryButton	{ value: string, action: () => void }	否	第一个按钮。 value: 弹窗里主按钮的文本。 action: 点击主按钮的回调函数。
secondaryButton	{ value: string, action: () => void }	否	第二个按钮。 value: 弹窗里辅助按钮的文本。 action: 点击辅助按钮的回调函数。
onStateChange	(event: { isVisible: boolean }) => void	否	弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。
arrowOffset⁹⁺	Length	否	popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
showInSubWindow⁹⁺	boolean	否	是否在子窗口显示气泡，默认值为false。

CustomPopupOptions⁸⁺类型说明

名称	类型	必填	描述
builder	CustomBuilder	是	提示气泡内容的构造器。
placement	Placement	否	气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。默认值：Placement.Bottom
popupColor	ResourceColor	否	提示气泡的颜色。
enableArrow	boolean	否	是否显示箭头。从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。默认值：true
autoCancel	boolean	否	页面有操作时，是否自动关闭气泡。默认值：true
onStateChange	(event: { isVisible: boolean }) => void	否	弹窗状态变化事件回调，参数为弹窗当前的显示状态。
arrowOffset⁹⁺	Length	否	popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
showInSubWindow⁹⁺	boolean	否	是否在子窗口显示气泡，默认值为false。

示例

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
      Text('Custom Popup').fontSize(10)
    }.width(100).height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          placementOnTop: true,
          showInSubWindow:false,
          primaryButton: {
            value: 'confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100, y: 50 })


      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: {color: 0x33000000},
          popupColor: Color.Yellow,
          enableArrow: true,
          showInSubWindow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({ x: 80, y: 200 })
    }.width('100%').padding({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制-鸿蒙开发者社区

文章转载自：https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md/

分类

卡片开发

三方库

标签

OpenHarmony

已于2023-4-14 15:30:51修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制

文本样式设置

属性

示例

栅格设置

属性

示例

颜色渐变

属性

示例

Popup控制

接口

PopupOptions类型说明

CustomPopupOptions⁸⁺类型说明

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-文本样式设置/栅格设置/颜色渐变/Popup控制

文本样式设置

属性

示例

栅格设置

属性

示例

颜色渐变

属性

示例

Popup控制

接口

PopupOptions类型说明

CustomPopupOptions8+类型说明

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

CustomPopupOptions⁸⁺类型说明