HarmonyOS基础组件_harmonyos backbuttonicon

Image组件

Image组件,从API7开始支持，支持本地图片和网络图片的渲染展示。如果使用的是网络图片，我们需要提前开启网络权限。具体开启方式如下：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntrance": "./ets/entryability/EntryAbility.ts",
        "description": "$string:entryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:entryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "visible": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        //使用网络图片时，需要申请权限ohos.permission.INTERNET
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

Image组件可以加载 不同资源类型的图片，示例如下：

设置图片大小

 Text组件

 文本组件是我们最常用的组件之一，它是用来在界面上展示一段文本信息。

设置文本大小

 设置文本粗细，默认为400

 设置文本颜色

示例代码：

@Entry
@Component
struct ImagePage {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
 
       Text('HarmonyOS')
 
        Text('HarmonyOS')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
 
        //设置文本对齐方式
        Text('HarmonyOS')
          .width(200)
          .textAlign(TextAlign.Start)
          .backgroundColor(0xE6F2FD)
 
        //设置文本超长显示
        Text('This is the text content of Text Component This is the text content of Text Component')
          .fontSize(16)
          .maxLines(1)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .backgroundColor(0xE6F2F)
 
        //设置文本装饰线
        Text('HarmonyOS')
          .fontSize(20)
          .decoration({type:TextDecorationType.Underline,color:Color.Black})
          .backgroundColor(0xE6)
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

 显示效果：

 

 TextInput组件

 TextInput组件可以输入单行文本并支持响应输入事件。

 Button组件

 button组件主要用来响应点击操作。

 设置button样式

Done!