鸿蒙的svg图标、内外边距和边框

设计资源-svg图标

需求：界面中展示图标 → 可以使用 svg 图标（任意放大缩小不失真、可以改颜色）

使用方式：

1.设计师提供：基于项目设计的图标，拷贝到项目目录使用

2.图标库中选取：找合适的图标资源 → 下载（svg）→ 拷贝使用

语法：

Image($r('app.media.svg图标名称'))
  .fillColor('#d0473d')    // 修改颜色方法

 内边距 padding

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

语法：

Text('内边距padding')
  .padding(20)    // 四个方向内边距均为20

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

 外边距 margin

作用：在组件外添加间距，拉开两个组件之间的距离

语法和内边距的语法一致

边框 border

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

Test('边框语法'）
  .border({
    width: 1,                   //宽度（必须设置）
    color: '#3274f6',           //颜色
    style: BorderStyle.Solid    //样式
})    // 四个方向相同 

Test('边框语法'）.border({
  width: {
    left: 1, right: 2
  },
  color: {
    left: Color.Red, right: Color.Blue
  },
  Style: {
    left: BorderStyle.Dashed,
    right: BorderStyle.Dotted
  }
})    // top、right、bottom、left