HarmonyOS5 鸿蒙开发--基础组件介绍和使用基础组件使用方法 ⚙️ 基础组件 text 用于在

基础组件使用方法

⚙️ 基础组件

text
- 用于在界面上显示文本内容

@Entry 
@Component 
struct Index { 

build() { 
 Column() { 
   Text(’可以直接在括号内写内容，内容为string字符串类型‘)
   Text() {
     // Span组件：带样式的文本片段
     Span('胡歌')  // 显示文本内容"胡歌"
       .fontSize(30)  // 设置字体大小(单位vp)
       .fontColor(Color.Brown) // 设置文字颜色为棕色
       .width(50)  // 设置Span的宽度(影响布局)
       .height(50) // 设置Span的高度(影响布局)
       .backgroundColor(Color.Blue) // 设置文字背景为蓝色
     
     // ImageSpan组件：在文本流中嵌入图片
     ImageSpan($r('app.media.ic_yanjing'))  // 加载resources中的图片资源
       .width(50)  // 设置图片宽度为50vp
   } 
 } 
 
}
}

关键细节说明：

image
- 主要用于展示图片
- 支持本地图片和网络图片

 @Entry
 @Component
 struct Index {
   build() {
     Column() {
       Image($r('app.media.pic02'))//图片在编辑器本地存储时使用图片
     .height(300)
       Image('https://pic.rmb.bdstatic.com/bjh/3f138d1da2a/250312/f7c6c468cbb6e434b83c276396c52c4e.jpeg')   //网络图片，直接将图片地址写在image括号里，引号引注
         .height(300)  //图片高度
         .width(300)  //图片宽度
         .fillColor(Color.Black)  //图片背景色
     }
   }
 }

TextInput
- 是接收用户文本输入的组件。
- 单行文本输入

@Entry
@Component
struct Index {
  @State username:string=''
  build() {
    Column() {
      TextInput({placeholder:'输入用户名',text:$$this.username})
      //placeholder:文本框中的提示语
      //text：文本输入
      //$$ : 双向绑定
    }
  }
}

Button
- 用于响应用户的点击操作

@Entry
@Component
struct Index {

  build() {
    Column() {
      Button('按钮显示的名字')
      .onClick(() => {
        //点击按钮后执行的逻辑
      })
    }
  }
}

HarmonyOS5 鸿蒙开发--基础组件介绍和使用

⚙️ ​​基础组件​​

关键细节说明：

⚙️ 基础组件