03. 快速上手！HarmonyOS4.0 Text/Span组件详解

Table of Contents

• 主要内容（思维导图）
• 组件介绍
• 组件的使用
• Text组件详解
• Text组件基础使用
• TextAlign 属性
• textOverflow
• 文本字符间距/文本的文本行高
• 其他属性
• Span组件详解
• Span组件基础使用
• Span 组件单独使用
• 配合Text 组件使用
• Span 组件相关属性

主要内容（思维导图）

组件介绍

显示一段文本的组件。

组件的使用

Text组件详解

显示一段文本的组件， 可以包含Span子组件。

Text组件基础使用

TextAlign 属性

/**
 * @Author: 若城
 * @Description:SpanNote
 */
@Entry
@Component
struct SpanNote {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Row() {
          Text('设置文本段落在水平方向的对齐方式').fontSize(30).fontColor('#ccc').padding(10)
        }.width('100%').justifyContent(FlexAlign.Start)

        Row({ space: 20 }) {
          Column() {
            Text('TextAlign 属性之 Start').textAlign(TextAlign.Start).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width('100%')
            Text('TextAlign 属性之 Center').textAlign(TextAlign.Center).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width('100%')
            Text('TextAlign 属性之 End').textAlign(TextAlign.End).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width('100%')

          }.width('100%').alignItems(HorizontalAlign.Start)
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)

      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

效果图展示

textOverflow

注意在使用textOverflow 属性时需要使用 maxLines 属性来设定文本显示行数
maxLines： 设置文本的最大行数。

Row({ space: 20 }) {
	Column() {
		Text('文本超长时进行裁剪显示。').textOverflow({overflow:TextOverflow.Clip}).maxLines(1).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width(200)
		Text('文本超长时显示不下的文本用省略号代替。').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width(200)
		Text('文本超长时不进行裁剪。').textOverflow({overflow:TextOverflow.None}).maxLines(1).fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width(200)

	}.width('100%').alignItems(HorizontalAlign.Start)
}.width('100%').justifyContent(FlexAlign.SpaceEvenly)

效果展示

文本字符间距/文本的文本行高

Row({ space: 20 }) {
	Column() {

		Text('设置文本字符间距。')
			.letterSpacing(20)
			.fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width(200)
		Text('设置文本的文本行高，设置文本的文本行高，')
			.lineHeight(40)
			.fontSize(20).backgroundColor('#ccc').padding(10).margin({bottom:10}).width(200)

	}.width('100%').alignItems(HorizontalAlign.Start)
}.width('100%').justifyContent(FlexAlign.SpaceEvenly)

效果展示

其他属性

下面展示的仅为上面没有讲到的内容，可做参考

Span组件详解

Span组件，作为Text组件的子组件， 是用于显示行内文本的组件。

Span组件基础使用

** 需要注意的是 Span 组件不可单独使用，需要配和Text 组件使用**

Span 组件单独使用

代码案例

/**
 * @Author: 若城
 * @Description:
 */
@Entry
	@Component
	struct TextNote {
		@State message: string = 'Hello World'

		build() {
			Row() {
				Column() {
					Row() {
						Text('设置文本段落在水平方向的对齐方式').fontSize(30).fontColor('#ccc').padding(10)
					}.width('100%').justifyContent(FlexAlign.Start)

					Row({ space: 20 }) {
						Column() {
							Span('单独使用,文本不显示').fontSize(30)
						}.width('100%').alignItems(HorizontalAlign.Start)
					}.width('100%').justifyContent(FlexAlign.SpaceEvenly)
				}
				.width('100%')
					.height('100%')
			}
			.height('100%')
		}
	}

配合Text 组件使用

代码案例

/**
 * @Author: 若城
 * @Description:
 */
@Entry
	@Component
	struct TextNote {
		@State message: string = 'Hello World'

		build() {
			Row() {
				Column() {
					Row() {
						Text('配合Text 组件使用').fontSize(30).fontColor('#ccc').padding(10)
					}.width('100%').justifyContent(FlexAlign.Start)

					Row({ space: 20 }) {
						Column() {
							Text(){
								Span('配合Text 组件使用//').fontSize(30)
								Span('多个行内组件').fontSize(30)

							}
						}.width('100%').alignItems(HorizontalAlign.Start)
					}.width('100%').justifyContent(FlexAlign.SpaceEvenly)
				}
				.width('100%')
					.height('100%')
			}
			.height('100%')
		}
	}

效果演示
注意： Span组件是行内元素

Span 组件相关属性