03. 快速上手！HarmonyOS4.0 Text/Span组件详解_鸿蒙 textspan index

目录

推荐阅读

     01.HarmonyOS4.0 工具安装 --- 启航篇https://ruocheng.blog.csdn.net/article/details/136640619

主要内容（思维导图）

1. 组件介绍

2. 组件的使用

3. Text组件详解

3.1. Text组件基础使用

3.1.1. TextAlign 属性

3.1.2. textOverflow

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

3.1.4. 其他属性

4. Span组件详解

4.1. Span组件基础使用

4.1.1. Span 组件单独使用

4.1.2. 配合Text 组件使用

4.1.3. Span 组件相关属性

---

推荐阅读

01. 从TypeScript入手，驾驭HarmonyOS开发的技术风潮！-------（上篇）https://ruocheng.blog.csdn.net/article/details/136444192

02. 从TypeScript入手，驾驭HarmonyOS开发的技术风潮！-----------（中篇）https://ruocheng.blog.csdn.net/article/details/13646833003. 从TypeScript入手，驾驭HarmonyOS开发的技术风潮！-----------（下篇）https://ruocheng.blog.csdn.net/article/details/13655176304. 从TypeScript入手，驾驭HarmonyOS开发的技术风潮！-----------（番外篇）https://ruocheng.blog.csdn.net/article/details/136615369

     01.HarmonyOS4.0 工具安装 --- 启航篇https://ruocheng.blog.csdn.net/article/details/136640619

     02. 快速上手！HarmonyOS4.0 Image组件详解https://ruocheng.blog.csdn.net/article/details/136669539

主要内容（思维导图）

1. 组件介绍

显示一段文本的组件。

2. 组件的使用

3. Text组件详解

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

3.1. Text组件基础使用

3.1.1. 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%')
  }
}

效果图展示

3.1.2. 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)

效果展示

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

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)

效果展示

3.1.4. 其他属性

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

4. Span组件详解

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

4.1. Span组件基础使用

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

4.1.1. 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%')
		}
	}

4.1.2. 配合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组件是行内元素

4.1.3. Span 组件相关属性