界面开发基础 (临时)

介绍build块

ROw, Column 块

容器组件, 基础组件

Text

方法

通用属性

文本颜色, 尺寸等属性

第一感官, 鸿蒙是 基于 CSS 的

居中问题(Column 默认会居中, 设置字组件100%后会使用字容器的布局方式)

默认字号16

文字溢出显示, 行高

图片组件 Image

$r('app.media.xxx')

网络图片, 本地图片

输入框 TextInput, 利用属性来配置

按钮 Button

在 Column({ space : 数字 }) 设置子元素的间隙.

使用 组件.padding(数字) 可设置内边距

考虑放置很多元素后, 会怎么样???

svg 图标. 介绍了 什么是 svg 图片, 和无失真的特点.

获得 svg 的方式: 1, 设计师; 2, 网络

基本用法是, 下载到本地 (资源文件夹), 用 Image($r('app.media.xxx')) 来加载.

盒子模型

• 具有 padding, margin 方法, 参数有两种形式:
  • 数字形式, 设置四个方向
  • 对象形式: { top: number, left: number, bottom: number, right: number }
• 具有 border 方法, 也有两种形式
  • border({ color: ..., width: ..., style: ... }) 控制四个方向
  • border({ color: { left: ..., top: ..., right: ..., bottom: ...}, ...}) 单独控制方向
• 具有 borderRadius. 也有两种语法:
  • borderRadius(number), 设置四个角的圆角半径.
  • borderRadius({ leftTop: ... leftBottom: ..., rightTop:..., rightBottom: ... }) 单独控制四个角的圆角半径.
  • 特殊的圆角矩形:
    • 圆型
    • 胶囊型

背景样式方法

• backgroundColor

• backgroundImage, ImageRepeat

• backgroundImageSize, ImageSize

• backgroundImagePosition, Alignment

单位问题

px 是物理像素, 与硬件有关. 设置背景位置的单位为 px

vp 是虚拟像素, 会自动转换. 使用的时候用 vp2px() 方法. 推荐使用