HarmonyOS鸿蒙Next界面开发起步

界面开发起步

ArkUI（方舟开发框架）是一套构建鸿蒙应用界面的的框架，构建页面最小的单位是组件。

两种开发范式

针对不同的应用场景及技术背景，方舟UI框架提供了两种开发范式，分别是：

• 基于ArkTS的声明式开发范式（简称“声明式开发范式”）
• 兼容JS的类Web开发范式（简称“类Web开发范式”）。

声明式开发范式

采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。

类Web开发范式

采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

组件

分类：基础组件和容器组件（Column，Row）

布局思路：先排版再放内容，再美化

build的最外层中有且仅有一个容器组件

组件的属性方法：通用属性和文字属性

.width(100) 或者 .width(`100%`) (加反向单引号) 
.height(100) 
.backgroundColor(Color.white) //枚举或者#开头的十六进制（加反向单引号） 

.fontSize() //默认是16 
.fontWeight(FontWeight.Bold) //字体为粗，枚举类型选择字体样式 
.fontWeight() //100-900，默认是400，加粗是700 
.fontColor() //枚举或者#开头的十六进制（加单引号） 

如果子组件的最外层没有设置宽度，会默认居中

1. 图片组件

build() {
 Column() {
  Image($r('app.media.img')) //本地图片
   .width(200)
 }
}

2. 输入框组件

build() {
 Column({ space: 20 }){ //在外层容器组件设置其中组件的间隔{space：20}
 TextInput({
  placeholder:'请输入用户名'
 })
 TextInput({
  placeholder:'请输入密码' //设置占位符提示
 })
 .type(InputType.Password) //设置输入样式
 Button('登录')
 .width(200)
}

3. 按钮：胶囊按钮（默认），圆形按钮，普通按钮，圆角矩形按钮

圆形按钮

Button('Circle', { type: ButtonType.Circle, stateEffect: false })
 .backgroundColor(0x317aff)
 .width(90)
 .height(90)

普通按钮

Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 .borderRadius(8)
 .backgroundColor(0x317aff)
 .width(90)
 .height(40)

圆角矩形按钮

Button('Disable', { type: ButtonType.ROUNDED_RECTANGLE, stateEffect: true })
 .backgroundColor(0x317aff)
 .width(90)
 .height(40)

给容器组件设置内边距 column().padding(20)

4. 设计资源 - svg图标

矢量图，可以放大缩小不失真，可以修改颜色

和普通图片一样使用： Image($r('app.media.ic_...')) 修改颜色： .fillColor(Color.Red)

5. 内边距padding

Text('小龙女')
 .backgroundColor(Color.Pink)
 .padding(20) //四边等边距
 .padding({
  top: 20,
  bottom: 30,
  left: 15,
  right: 100
 }) //四边边距分别设置

6. 外边距（组件和组件之间）margin

Text('张飞')
 .backgroundColor(Color.Blue)
 .margin(10) //四个方向外边距都设置
 .margin({
  top:
  bottom:
  left:
  right:
 })

space调整的组件间距都相等，不等的间距用margin

7. 边框border

.border({
  width: 1, //必传的，指边框线条的粗细
  color: Color.Red,
  style: BorderStyle.Solid
}) //表示四边的设置保持一致

.border({
  width: {
    left: 1,
    right: 2
  },
  color: {
    left: Color.Red,
    right: Color.Black
  },
  style: {
    left: BorderStyle.Solid,
    right: BorderStyle.Dashed
  } // 实线Solid，虚线Dashed，点线Dotted
}) //可以对四边单独设置

8. 圆角borderRadius

.borderRadius(20) //四个角的圆角一致
.borderRadius({
  topLeft: 10,
  bottomRight: 20
}) //单独指定，未被指定的保持原样

8.1 正圆

Image($r('app.media.img'))
 .width(100)
 .height(100) //先给一个方形图形
 .borderRadius(50) //圆角是宽和高的一半

8.2 胶囊按钮（大多数是水平的）

.height(50)
.borderRadius(25) //圆角设置为高度的一半
//如果胶囊按钮是竖直的，就把圆角设置为宽度的一半

9. 背景图片

.backgroundImage($r('app.media.flower')) //只写一个参数默认不平铺ImageRepeat.NoRepeat
.backgroundImage($r('app.media.flower'), ImageRepeat.X) //还有Y，XY

//设置背景图的位置backgroundImagePosition
默认是在左上角
.backgroundImagePosition({
 x: 10,
 y: 10
}) //直接指定位置
.backgroundImagePosition(Alignment.Center) //枚举类型指定特殊位置：TopStart，Bottom等

//设置背景图的尺寸backgroundImageSize（默认为ImageSize.Auto，显示原图尺寸）
直接设置背景图的宽高：
.backgroundImageSize({
  width: 25,
  height: 30 //一般只设置宽或者高，这样背景图会自动等比例缩放
})

枚举类型设置：
.backgroundImageSize(ImageSize.Contain) //等比例缩放背景图，当宽或者高与组件尺寸相同时停止缩放，可能会留白
.backgroundImageSize(ImageSize.Cover) //等比例缩放背景图，直到完全覆盖组件范围，可能导致部分内容超出不可见
.backgroundImageSize(ImageSize.Fill) //不保持宽高比进行放大缩小，使得图片充满显示边界

10. 线性布局

主轴对齐方式

.justifyContent(FlexAlign.Start)

交叉轴（和主轴垂直的方向）对齐方式：

交叉轴是水平的：.alignItems(HorizontalAlign.Start) Center End

交叉轴是垂直的：.alignItems(VerticalAlign.Top) Center Bottom

11. 自适应伸缩 - layoutWeight

先减去固定的，剩余部分按权重分配

12. 复选框Checkbox

当一段文本里出现不同的样式，可以用Span单独包裹去设置样式

Text() {
 Span(' ')
 Span(' ')
}