鸿蒙界面开发（一）：基础界面实战

界面开发

build（）｛｝函数里写代码，预览器看效果

布局思想

由上到下，build第一层只能有一个组件，且必须为容器组件，
一般是Column（）｛｝容器组件：列Column()｛｝;行Row (）｛｝
基本组件：Text (参数).行为

build有且只有一个根组件，且是容器组件

组件属性方法

如果是容器：容器组件(){}.属性1（值）.属性2(值).……
如果是基本组件：组件（内容）.属性1（值）.属性2(值).……没有大括号
通用属性：height weight backgroundcolor
字体属性：fontsize（默认16） fontweight(可以是fontweight的属性，也可以是100~700的值）
.weight(‘100%’)会使内容居左，百分数需要引号
fontweight默认400，加粗（bold）700

文本颜色

.fontColor(颜色值)颜色值可以是枚举色，也可以是具体值（#开头的十六进制），十六进制需要引号。

文本溢出省略号，行高

.textoverflow({overflow：TextOverFlow.Ellipsis}）.maxlines(显示几行)
ellpisis文字溢出显示省略号
clip和none效果一样
marquee单行滚动

图片组件

网络图片Image(网址)
宽高等比例缩放
本地图片加载resources/base/media/图片.jpg
语法：Image($r('app.media.product'))

输入框和按钮

输入框：TextInput({参数对象}).属性方法(）
密码类型，自带小眼睛与切换功能元素与元素之间的距离，

按钮：Button(文本)
拓：
column（{space：10}）{}，给column或者上一层容器设置对象参数

综合实战——华为登录

build() {
    Column({
      space: 10
    }){
      Image($r('app.media.startIcon'))
        .width(50)
      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)
      Button('登录')
        .width('100%')
      Row({
        space:10
      }){
        Text('前往注册')
        Text('忘记密码')
      }
    }.height('100%')
    .width('100%')//容器.width('100%')默认居中效果
    .padding(10)//添加内边距
   }

svg资源

内边距 padding

内边距：在组件内添加间距，拉开内容与组件之间的距离

Text('内边距padding')
.padding(20)

Text('内边距padding')
.padding({
 top:10,
 right:20,
 bottom:30,
 left:10
})//四个方向分别单独设置

外边距margin

在组件外添加间距，拉开两个组件之间的距离
和space的区别是，space添加的相等的间距

Text('外边距padding')
.margin(20)

Text('外边距padding')
.margin({
 top:10,
 right:20,
 bottom:30,
 left:10
})//四个方向分别单独设置

会影响同一行的内容

边框border

给组件添加边界，进行装饰美化

Text('边框border')
.border({
 width:1, //必须
 color:#3274f6,
 style:BorderStyle.Solid,
})//四个方向相同

//分别设置四个方向
```javascript
Text('边框border')
.border({
 width:{
 	left:1,
 	right:2
 }, //必须
 color:{
 	left:Color.Red,
 	right:Color.blue
 },
 style:{
 left:BorderStyle.Solid,//实线
 right:BorderStyle.Dashed,//虚线
 }
})//四个方向相同

必须设置边框宽度

组件圆角

//四个圆角相同
.borderRadius(5)
//四个圆角不同
.borderRaduis({
 topLeft:5,
 topRight:10,
 bottomLeft:10,
 bottomRight:10
})

特殊形状的圆角设置

1. 正圆

Text('正圆')
 .width(100)
 .height(100)//宽度高度一样
 .borderRadius(50)//圆角是宽或高的一半

2. 胶囊按钮（左右半圆）

Text('正圆')
 .width(100)
 .height(50)//宽度大，高度小
 .borderRadius(25)//圆角是高的一半

背景属性

背景图片

.backgroundImage($r('本地地址'))//也可以用网络地址

.backgroundImage($r('本地地址')，背景图平铺方式——枚举ImageRepeat)//默认不平铺

.backgroundImage($r('本地地址')，ImageRepeat.X)

.backgroundImage($r('本地地址')，ImageRepeat.Y)

.backgroundImage($r('本地地址')，ImageRepeat.XY)

背景图片的位置

默认在左上角显示

.backgroundImagePosition(坐标对象或枚举)
位置坐标：{x:坐标位置，y:坐标位置}——图片左顶点的位置在容器的位置
枚举Alignment
Text()
 .backgroundImage()
 .backgroundImagePosition({x:10,y:10})
 .backgroundImagePosition(Alignment.center)

=坐标值的单位和宽高的单位是不同的。

背景尺寸大小

作用：背景图缩放

.backgroundImageSize(宽高对象 或 枚举)