鸿蒙基础内容了解

148 阅读2分钟

容器组件

  1. Image图片
  • svg图片可以用fillColor属性修改图标颜色
  1. Column列容器
  2. Row行容器
  3. Button按钮
  4. Flex弹性布局 (参数warp,要设置范围)
  5. Scroll滚动(要设置容器大小,内部)
  6. Stack 层叠(内容默认居中,可用zIndex(数字)有序控制)

属性

1.1通用属性

  1. widh宽
  2. height高
  3. 背景
  • backgroundColor背景色
  • backgroundImage 背景图。可设置平铺方式X轴,Y轴方向
  • backgroundImageSize 背景图大小
  • backgroundImagePosition 背景位置

1.2文本属性(Text)

  1. fontSize 字体大小 默认16
  2. fontColor 字体颜色 2.fontStyle 字体样式
  3. fontWeight 字体粗细 默认400
  4. lineHeight 文本行高
  5. decoration 文本修饰线及颜色
  6. textAlign 文本水平对其方式
  7. align 文本垂直对其方式
  8. textIndent 文本首行缩进
  9. textOverflow 文本超过最大行数的显示方式
  10. maxLines 文本最大行数
  11. aspectRatio:组件宽高比,宽度/高度
  12. alt 占位图与Imaage一起,在图片显示前显示
  13. objectFit 图片填,充填所在充容器

1.3布局属性

image.png

    1. padding 内边距
  1. margin 外边距
  2. borderRadius 边框圆角

边框属性

  • border(边框的四个方向都可以设置)
  • 参数
  1. width 数字
  2. color 颜色
  3. style 边框样式(点线 虚线 实线)

颜色渐变

  1. 线性渐变 ,两个必要点 :
  • 1.angle/direction{线性渐变的方向,设置 angle 后不生效)
  • 2.colors 颜色
  • repeating?: 是否重复着色
  1. 径向线变 ,三个必要点 :
  • 1.center: 径向渐变的中心点坐标
  • 2.radius: 径向渐变的半径
  • 3.colors 颜色
  • repeating?: 是否重复着色

阴影 shadow

参数
  1. radius: 模糊半径,
  2. type?: 阴影类型(以图片为背景)color属性在ShadowType.BLUR无效
  3. color?: 阴影颜色,
  4. offsetX?: X轴偏移,
  5. offsetY?: Y轴偏移, 6.. fill?: 是否内部填充

线性布局

  1. 滚动 scorll
  • 1.scorllbar 滚动条显示状态
  • 2.scorallable 滚动方向
  1. 自适应缩放 layoutWeight
  2. 主轴对齐方式ifyContent
  3. 交叉轴对齐方式ignItems
  4. 单个子元素交叉轴对齐方式alignSelf