HarmonyOS系统开发ArkTS常用组件文本及参数（五）

时间：2024-03-23 19:49:03

目录

一、Text组件

1、Text组件案例

二、Text组件参数

1、string字符串类型

2、Resources类型

2.1、resources中内容配置

base/element/string.json 中的内容

zh_US/element/string.json 中的内容

es_US/element/string.json 中的内容

2.2、环境适配

适配英文

适配中文

三、Text常用属性

1、fontSize()

2、fontWeight()

3、fontColor()

一、Text组件

鸿蒙中的文本组件是Text， Text组件的参数类型为：string | Resource，

string字符串类型，如 Text('这是一段文本，我是字符串类型')
Resource类型：使用$r()引用，定义的字符串内容在resources/*/element的string.json文件

1、Text组件案例

@Entry
@Component
struct Index {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
     Text("你好 鸿蒙").fontSize(50)
     Text($r("app.string.greeting")).fontSize(50)

    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

二、Text组件参数

1、string字符串类型

Text("你好鸿蒙").fontSize(50)

2、Resources类型

Text组件中的参数的文字内容可是字符串直接写死在代码中，也可是编辑到resources目录下下的不用环境的配置文件中，如base、en_Us、zh_Us目录下的element中的 String.json文件。

如下图所示，Text组件中的$r("app.string.greeting")文本可以写到三个不同目录的环境中，根据不同的环境适配不同的内容。但注意，在配置时候必须三个文件中都配置，否则会显示报错，如：

2.1、resources中内容配置

base/element/string.json 中的内容

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "greeting",
      "value": "你好 鸿蒙 base"
    }

  ]
}

zh_US/element/string.json 中的内容

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "greeting",
      "value": "你好 鸿蒙 zh"
    }
  ]
}

es_US/element/string.json 中的内容

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "greeting",
      "value": "hello harmony en"
    }
  ]
}

2.2、环境适配

适配英文

当我们选择en_us时候，会自动的选择适配环境 en_US/element/string.json中的适配内容。

适配中文

我们选择zh_us时候，会自动的选择适配环境 zh_US/element/string.json中的适配内容。

三、Text常用属性

字体大小：fontSize() 方法进行设置，该方法参数类型为 string | number | Resource
字体粗细：fontWeight()方法进行设置，该方法参数类型为 string | number | FontWeight
字体颜色：fontColor() 方法进行设置，该方法参数类型为 string | number | Resource |Color
文本对齐：
TextAlign.Start 首部对齐
TextAlign.Center 居中对齐
TextAlign.End 尾部对齐

1、fontSize()

string ：指定字体大小的具体单位，例如fontSize('100px')、例如fontSize('100fp')
number ：数值，默认单位 fp
Resource ：引用resources下的element目录中定义的数值

@Entry
@Component
struct Index {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
     Text("你好 鸿蒙").fontSize('150px')
     Text("你好 鸿蒙").fontSize('50fx')
     Text("你好 鸿蒙").fontSize(50)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

2、fontWeight()

string ：数字与样式字符串，例如例如'100'和bold
number ：[100,900]，取值间隔为100，默认为400，值越大，字体越粗。
FontWeight：枚举类型

@Entry
@Component
struct Index {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
     Text("你好 鸿蒙").fontSize(50)
     Text("你好 鸿蒙").fontSize(50).fontWeight(600)
     Text("你好 鸿蒙").fontSize(50).fontWeight(500)
     Text("你好 鸿蒙").fontSize(50).fontWeight(FontWeight.Bold)
     Text("你好 鸿蒙").fontSize(50).fontWeight('bolder')
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

3、fontColor()

string ：'rgb(0, 128, 0)'或者'#008000'
number ：16进制的数字如 0x008000
Resource ：引用resources下的element目录中定义的数值
Color ：枚举类型，例如Color.Green

@Entry
@Component
struct Index {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
     Text("你好 鸿蒙").fontSize(50).fontColor(Color.Green)
     Text("你好 鸿蒙").fontSize(50).fontWeight(600).fontColor(Color.Orange)
     Text("你好 鸿蒙").fontSize(50).fontWeight(500).fontColor(Color.Blue)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}



@Entry
@Component
struct FontColorPage {
  build() {
    Column({ space: 50 }) {
      Text('Color.Green')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Green)

      Text('rgb(0, 128, 0)')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor('rgba(59, 171, 59, 0.33)') // rgba 表示透明度

      Text('#008000')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor('#a4008000')

      Text('0x008000')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .fontColor(0xa4008000)

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

4、文本对齐

@Entry
@Component
struct Index {
  @State isOn: boolean = false;
  @State isDel: boolean = false;

  build() {
    Column({ space: 10 }) {
      Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐")
        .fontSize(20)
        .textAlign(TextAlign.Start)
      Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐")
        .fontSize(20)
        .textAlign(TextAlign.End)
      Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐")
        .fontSize(20)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

