鸿蒙初体验

鸿蒙初体验

线性布局

1.垂直布局

使用column

Column(){
  Text('呵。。。。。。').backgroundColor('red')
  Text('呵。。。。。。').backgroundColor('blue')
  Text('呵。。。。。。').backgroundColor('green')
  Text('将获得价值。。。。。。').backgroundColor('black')
}

效果

2.水平布局

使用Row

Row(){
     Text("行布局").backgroundColor("red")
     Text("行布局2").backgroundColor("blue")
     Text("行布局3").backgroundColor("#f30")
     Text("行布局4").backgroundColor("#666")
     Text("行布局5").backgroundColor("green")

   }

效果

组件

1.text是文本组件，用于呈现一段文本信息。

Text('hello word!')

2 按钮组件

type:ButtonType.Circle按钮的型装
stateEffect:false按钮下压的状态

  Button("圆形按钮",{type:ButtonType.Circle,stateEffect:false})  
  Button("胶囊按钮",{type:ButtonType.Capsule,stateEffect:false})
  Button("普通按钮",{type:ButtonType.Normal,stateEffect:false})

3.文本输入

placeholder 输入提示 ，text 默认值

基本输入

TextInput()
  .type(InputType.Normal)

密码输入

TextInput()
  .type(InputType.Password)

4.照片

本地资源

创建文件夹，将本地图片放入ets文件夹下的任意位置。

Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

Image('images/view.jpg')
.width(200)

网络资源

引入网络图片需申请权限ohos.permission.INTERNET。此时，Image组件的src参数为网络图片的链接。

Image组件首次加载网络图片时，需要请求网络资源，非首次加载时，默认从缓存中直接读取图片

Image('https://www.example.com/example.JPG')

图片插值 抗锯齿

  .interpolation(ImageInterpolation.High)

😕/www.example.com/example.JPG’)

图片插值  抗锯齿

```ts
  .interpolation(ImageInterpolation.High)