一、创建文本(Text)

1、直接创建 2、引用Resource资源，资源路径为【/resources/base/element/string.json】

添加子组件

@Component
struct ShowText {
  build() {
    Column() {
      Text("坚果派") {
        Span("鸿蒙")
      }.fontSize(30)
      .margin({ top: 100 })
      .border({width:2,style:BorderStyle.Solid,color:Color.Black})
      .width('80%')
    }
  }
}

自定义文本样式

通过textAlign属性设置文本对齐样式。

通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。

通过lineHeight属性设置文本行高。

通过baselineOffset属性设置文本基线的偏移量。

通过letterSpacing属性设置文本字符间距。

通过minFontSize与maxFontSize自适应字体大小，minFontSize设置文本最小显示字号，maxFontSize设置文本最大显示字号，minFontSize与maxFontSize必须搭配同时使用，以及需配合maxline或布局大小限制一起使用，单独设置不生效。

通过copyOption属性设置文本是否可复制粘贴。

@Component
struct ShowText {
  build() {
    Column() {
      Text() {
        Span("昼短苦夜长，")
      }.textAlign(TextAlign.Center)// Start Center End
      .fontSize(50)
      .margin({ top: 100 })
      .border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
      .width('70%')
      .textOverflow({ overflow: TextOverflow.None })
      .maxLines(1)
      .lineHeight(30)
      .baselineOffset(0)
      .letterSpacing(5)

      Text() {
        Span("何不秉烛游？")
      }
      .fontSize(50)
      .margin({ top: 100 })
      .border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
      .width('80%')
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .maxLines(1)
      .lineHeight(100)
      .baselineOffset(50)
      .letterSpacing(50)

      Text() {
        Span("山河远阔，人间星河，无一是你，无一不是你。")
      }
      .fontSize(30)
      .margin({ top: 100 })
      .border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
      .width('80%')
      .textOverflow({ overflow: TextOverflow.MARQUEE })
      .maxLines(1)
      .baselineOffset(-50)
      .letterSpacing(5)
      .maxFontSize(50)
      .minFontSize(5)
      .copyOption(CopyOptions.InApp)
    }
  }
}

2、文本输入(TextInput/TextArea)

创建输入框

@Component
struct TextInputPage {
  build() {
    Column() {
      TextInput({ placeholder: "请输入昵称", })
        .fontSize(28)
        .margin({ top: 100 })
        .placeholderFont({ size: 28 })

      TextArea({ text: "情字何解，怎么落笔都不对！\n 怎奈向，随流水，思念悠长。" })
        .width(300)
        .margin({ top: 50 })
    }
  }
}

设置输入框类型

@Component
struct TextInputPage {
  build() {
    Column() {
      TextInput({ placeholder: "请输入昵称", })
        .fontSize(28)
        .margin({ top: 100 })
        .placeholderFont({ size: 28 })
      TextInput({ placeholder: "请输入密码", }).type(InputType.Password)
      TextInput({ placeholder: "请输入新密码", }).type(InputType.NEW_PASSWORD)
      TextInput({ placeholder: "请输入纯数字密码", }).type(InputType.NUMBER_PASSWORD)
      TextInput({ placeholder: "请输入数字", }).type(InputType.Number)
      TextInput({ placeholder: "请输入π值", }).type(InputType.NUMBER_DECIMAL)
      TextInput({ placeholder: "请输入邮箱", }).type(InputType.Email)
      TextInput({ placeholder: "请输入手机号", }).type(InputType.PhoneNumber)

      TextArea({ text: "情字何解，怎么落笔都不对！\n 怎奈向，随流水，思念悠长。" })
        .width(300)
        .margin({ top: 50 })
    }
  }
}

富文本(RichEditor)

@Component
struct RichEditorPage {
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  @State show:string="";
  build() {
    Column() {
      RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan('创建不使用属性字符串构建的 RichEditor 富文本编辑器组件。', {
            style: {
              fontColor: Color.Black,
              fontSize: 15
            }
          })
        })
        .border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
        .width('100%')
        .height('10%')
        .margin({ top: 50 })

      Button("添加信息").onClick(() => {
        this.controller.addTextSpan('新添加一段文字。')
      }).width(200)
        .height(70)
        .margin({ top: 20 })
      Button("获取信息").onClick(() => {
        this.show = "";
        this.show = JSON.stringify(this.controller.getSpans()[0]["value"]);
      })
        .width(200)
        .height(70)
        .margin({ top: 20 })
      Text(this.show)
    }
  }
}

图标小符号 (SymbolGlyph/SymbolSpan)

SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标。SymbolGlyph通过引用Resource资源来创建，资源引用类型可以通过$r创建Resource类型对象。

@Component
struct SymbolGlyphPage{
  build() {
    Column(){
      Text() {
        SymbolSpan($r('sys.symbol.ohos_trash'))
          .fontWeight(FontWeight.Normal)
          .fontSize(96)
      }
      Row(){
        Text() {
          SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
            .fontWeight(FontWeight.Normal)
            .fontSize(36)
        }
        Text() {
          SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
            .fontWeight(FontWeight.Normal)
            .fontSize(72)
        }
        Text() {
          SymbolSpan($r('sys.symbol.play_arrow_triangle_2_circlepath'))
            .fontWeight(FontWeight.Normal)
            .fontSize(96)
        }
      }
      Row(){
        Text() {
          SymbolSpan($r('sys.symbol.heart_badge_plus'))
            .fontWeight(FontWeight.Lighter)
            .fontSize(96)
            .fontColor([Color.Red])
        }
        Text() {
          SymbolSpan($r('sys.symbol.ellipsis_message_1'))
            .fontWeight(FontWeight.Normal)
            .fontSize(96)
            .fontColor([Color.Yellow])
        }
        Text() {
          SymbolSpan($r('sys.symbol.ohos_wifi'))
            .fontWeight(FontWeight.Bold)
            .fontSize(96)
            .fontColor([Color.Blue])
        }
      }
    }
  }
}

5弹窗

模态弹窗

模态（Modal）是UI组件或视图的一种状态。其在消失之前，用户只能对处于模态的组件或视图进行响应，不能操作其他非模态的组件或视图，干扰性比较强。

名称	使用场景
AlertDialog	通常用来展示用户当前需要或必须关注的信息或操作。如用户操作一个敏感行为时响应一个二次确认的弹窗。
ActionSheet	当需要用户关注或确认的信息存在列表选择时使用。
CustomDialog	当用户需要自定义弹窗内的组件和内容时使用。
Popup	用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。
Menu/ContextMenu	用于给指定的组件绑定用户可执行的操作，如长按图标展示操作选项等。

@Component
struct AlertPage {
  @State handlePopup: boolean = false;

  build() {
    Column({ space: 5 }) {
      Button('模态按钮')
        .onClick(() => {
          AlertDialog.show(
            {
              title: '弹窗标题',
              subtitle: '副标题',
              message: '消息文本',
              autoCancel: true,
              alignment: DialogAlignment.Bottom,
              gridCount: 4,
              offset: { dx: 0, dy: -20 },
              primaryButton: {
                value: '取消',
                action: () => {
                  console.info('点击了取消')
                }
              },
              secondaryButton: {
                enabled: true,
                defaultFocus: true,
                style: DialogButtonStyle.HIGHLIGHT,
                value: '确定',
                action: () => {
                  console.info('点击了确定')
                }
              }
            }
          )
        }).backgroundColor(0x317aff)

      Button('气泡按钮')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: '这是气泡按钮的显示内容',
          placementOnTop: true,
          showInSubWindow: false,
          primaryButton: {
            value: '确认',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('点击确认操作')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: '取消',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('点击取消操作')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100, y: 150 })
    }.width('100%').margin({ top: 50 })
  }
}

按钮

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

@Component
struct ButtonPage {
  build() {
    Column() {
      Row() {
        // 胶囊按钮（默认类型）
        Button('默认', { type: ButtonType.Capsule, stateEffect: false })
          .backgroundColor(0x317aff)
          .width(90)
          .height(40)
        // 圆形按钮
        Button('圆的', { type: ButtonType.Circle, stateEffect: false })
          .backgroundColor(0x317aff)
          .width(90)
          .height(90)
        // 普通按钮
        Button('确认', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(90)
          .height(40)
      }.width('100%').height('5%').margin({ top: 100 })

      Row() {
        // 设置边框弧度。
        Button('弧度边框', { type: ButtonType.Normal })
          .borderRadius(20)
          .height(40)
        // 设置文本样式。
        Button('字体样式', { type: ButtonType.Normal })
          .fontSize(20)
          .fontColor(Color.Pink)
          .fontWeight(800)
        // 设置背景颜色。
        Button('背景颜色').backgroundColor(0xF55A42)
      }.width('100%').height('5%').margin({ top: 100 })

      Row() {
        // 图片按钮
        Button({ type: ButtonType.Circle, stateEffect: true }) {
          Image($r('app.media.random_1_1024x1024')).width(30).height(30)
        }.width(55).height(55).backgroundColor(0xF55A42)

      }.width('100%').height('5%').margin({ top: 100 })
    }
  }
}