【HarmonyOS 鸿蒙 黑马程序员 学习笔记 25.1】

布局元素组成

由内到外 依次

组件内容

text 或 Button 里面的文本 Image 里面的图片等等都是内容

内边距 padding

组件内容与边框之间的距离
可以把组件撑大 便于用户操作

.padding(10)
.padding({ top:10 ,bottom:10 ,left:10,right:10 })

边框 border

可以查看组件大小
下面代码是官方演示代码

.border({
          width: { left: 3, right: 6, top: 10, bottom: 15 },
          color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }

外边距 margin

组件与组件之间的距离
可以区分开组件之间 以免用户误操作

.margin (10)
.margin({top:10 ,bottom:10 ,left:10,right:10 })

简易演示代码

如需详细演示代码,请参考官方演示代码

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/development-intro-api-V5?catalogVersion=V5

svg图片官方下载地址

https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

fillColor 设置SVG图线条颜色

// 官方SVG图标下载地址(矢量图)
// https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

// 布局元素组成
// 组件内容
// 内边距 padding
// 边框 border
// 外边距 margin

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('演示组件内容')
        .backgroundColor(Color.Pink)  //  加个背景色便于观察
      Text('演示padding')
        .padding(20)
        .backgroundColor(Color.Orange)
      Text('演示border')
        .border({width:3,color:Color.Pink})
      Text('演示margin')
        .margin({top:5,bottom:10,left:15,right:20})
        .backgroundColor(Color.Pink)
      Row({ space:20 }){
        Text('演示space')
          .backgroundColor(Color.Yellow)
        Text('演示space')
          .backgroundColor(Color.Orange)
        Text('演示space')
          .backgroundColor(Color.Yellow)
      }
      .backgroundColor(Color.Pink)
     Image($r('app.media.ic_celiakeyboard_menu'))
      .width(60)
      .fillColor(Color.Orange) // 设置线条颜色
    }
    .width('100%')
  }
}