鸿蒙Harmony--文本组件Text属性详解

发布于：2024-07-13 ⋅ 阅读:(240) ⋅ 点赞:(0)

金樽清酒斗十千，玉盘珍羞直万钱。 停杯投箸不能食，拔剑四顾心茫然。 欲渡黄河冰塞川，将登太行雪满山。 闲来垂钓碧溪上，忽复乘舟梦日边。 行路难，行路难，多歧路，今安在？ 长风破浪会有时，直挂云帆济沧海。

目录

一，显示一个简单的文本

二，调整文字的字体大小和颜色

三，字体倾斜

四，字体加粗

1，简单的加粗

2，设置固定值加粗

五，设置文本框大小

六，设置文本框背景色

七，设置文字水平居中

八，设置背景圆角

九，添加边线

十，文字超长显示

1，超长截断

2，超长显示...

3，超长滚动

十一，设置文本行高

十二，设置文本字间距

十三，文字大小自适应

十四，英文字母统一大小写

1，统一显示大写

2，统一小写

3，正常显示

十五，设置首行文本缩进

十六，添加子组件Span

一，显示一个简单的文本

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

二，调整文字的字体大小和颜色

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

三，字体倾斜

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontStyle(FontStyle.Italic)//斜体
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

四，字体加粗

1，简单的加粗

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(FontWeight.Bold)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，设置固定值加粗

也可以通过设置数值调整加粗程度，取值为100-900

900效果为：

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

五，设置文本框大小

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

六，设置文本框背景色

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

七，设置文字水平居中

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

八，设置背景圆角

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

九，添加边线

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //添加边线
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十，文字超长显示

1，超长截断

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.None}) //超长文字截断
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，超长显示...

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.Ellipsis}) //超长显示省略号
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

3，超长滚动

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十一，设置文本行高

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十二，设置文本字间距

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .letterSpacing(20) //字间距
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十三，文字大小自适应

注意：需要minFontSize ，maxFontSize，maxline 以及文本框大小配合使用

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .minFontSize(15) //最小字体15
        .maxFontSize(30) //最大字体30
        .maxLines(1)  //最多显示一行
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

 

十四，英文字母统一大小写

1，统一显示大写

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("abcd")
        .fontWeight(900)//加粗
        .textCase(TextCase.UpperCase) //字母大写
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，统一小写

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABCD")
        .fontWeight(900)//加粗
        .textCase(TextCase.LowerCase) //字母小写
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

3，正常显示

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcd")
        .fontWeight(900)//加粗
        .textCase(TextCase.Normal) //字母正常显示
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十五，设置首行文本缩进

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcdefghfsenfkbkbfgkgldfkledmsam")
        .fontWeight(900)//加粗
        .textCase(TextCase.Normal) //字母正常显示
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .textIndent(10)//设置首行文本缩进
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十六，添加子组件Span

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcdefghfsenfkbkbfgkgldfkledmsam"){
        Span("我是子组件1")
          .fontSize(20)
          .fontColor("#000000")
          .fontWeight(900)//加粗
        Span("我是子组件2")
          .fontSize(15)
          .fontColor("#ffffff")
        Span("我是3")
          .fontSize(20)
          .fontColor("#ffccdd")
      }
      .width(300) //宽度
      .height(100) //高度
      .backgroundColor("#ccaabb") //背景色
      .borderRadius(10) //背景圆角
      .border({width: 2, color: '#000000'}) //边框
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .id('txt1')
    }
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布