基础布局--【保姆级教程】

1.布局属性

微信顶部区域演示

组件布局

属性 描述
padding 内边距
margin 外边距
border 边框线
borderRadius 边框圆角

1.1内边距

作用:在组件间添加内边距 ,拉开内容和组件边缘之间的距离

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
        .fontSize(50)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
  }
}

添加前后示例图片:

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
        .fontSize(50)
        .backgroundColor(Color.Pink)
        .padding(30)    //添加内边距30
    }
    .width('100%')
    .height('100%')
  }
}

用法:

属性:数字 或 对象{}

数字:上下左右内边距都相同

对象{}:可以配合left、right、top、bottom单独设置某一个方向边距

示例演示:

1.2外边距

作用:在组件外面添加边距,拉开两个组件之间的距离 示例图片

用法: 属性:数字 或 对象{}

数字:上下左右内边距都相同

对象{}:可以配合left、right、top、bottom单独设置某一个方向边距

示例演示:

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
        .fontSize(50)
        .backgroundColor(Color.Yellow)
      Text('文本')
        .fontSize(50)
        .backgroundColor(Color.Green)
        .margin({
          left:10,
          right:30,
          top:60,
          bottom:90

        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

添加外边距前后演示图:

1.3边框属性

作用:给组件添加边界,进行装饰美化

1.3.1四个边框属性相同

示例图片:
属性:border()

参数:{width?: 数字, color?: '', style?: BorderStyle}

  • width:边框宽度,边框宽度默认值为0,即不显示边框
  • color:边框颜色
  • style:边框样式,BorderStyle枚举类型
    • Solid:实线(默认)
    • Dashed:虚线
    • Dotted:点线

示例代码:

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('边框线')
        .width(100)
        .height(40)
        .textAlign(TextAlign.Center)
        // 黑色 实线 边框
        .border({width: 1})
        // 红色 实线 边框
        .border({width: 1, color: 'red'})
        // 红色 虚线 边框
        .border({width: 1, color: 'red', style: BorderStyle.Dashed})
    }
      .padding(20)
  }
}

1.3.2四个边框属性不相同

写法:

css 复制代码
.border({
  width: {},
  color: {},
  style: {}
})

示例图片:

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('边框线')
        .width(100)
        .height(40)
        .textAlign(TextAlign.Center)
          // 边框 - 四个方向效果不同
        .border({
          width: {left: 1, top: 3, right: 5, bottom: 7},
          color: {left: 'red', top: '#ff0', right: '#f60', bottom: '#ccc'},
          style: {top: BorderStyle.Dashed, right: BorderStyle.Dotted}
        })
    }
    .padding(20)
  }
}

1.3.3边框圆角

默认情况下是没有原圆框效果的,需要编码设置

属性:borderRadius(圆角半径)

参数:数值 或 { }

  • topLeft:左上角
  • topRight:右上角
  • bottomLeft:左下角
  • bottomRight:右下角
php 复制代码
组件()
  //语法1:给四个角设置相同值
 .borderRadius(圆角半径数值)
  
  //语法2:给四个角单独设值
 .borderRadius({
          topLeft: 左上角半径数值,
          topRight: 右上角半径数值,
          bottomLeft: 左下角半径数值,
          bottomRight: 右下角半径数值        
        })

示例图片:

注意:如果不单独设置某个边框半径,直接设置数值,四个圆角半径相同

2.背景属性

属性 描述
backgroundColor 背景色
backgroundImage 背景图
backgroundImageSize 背景图尺寸
backgroundImagePosition 背景图位置

2.1背景颜色

less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

2.2背景图片

属性:backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)

背景图平铺方式:(可省略)

  • NoRepeat:不平铺,默认值
  • X:水平平铺
  • Y:垂直平铺
  • XY:水平垂直均平铺
less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)       //粉红色背景色
        .backgroundImage($r('app.media.flower'))  //添加图片背景
        .backgroundImage($r('app.media.flower'), ImageRepeat.X) //沿着x平铺
    }
    .padding(20)
  }
}

2.3背景缩放

作用:背景图缩放

属性:backgroundImageSize

参数:

  • 设置背景图宽高尺寸:{width: 数值, height: 数值}(只设置宽或高,另一个尺寸等比例缩放)
  • 枚举 ImageSize
    • Cover:等比例缩放背景图至图片完全覆盖组件范围
    • Contain:等比例缩放背景图,当宽或高与组件尺寸相同则停止缩放
    • Auto:默认,原图尺寸
less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImageSize({width: 100})
        .backgroundImageSize(ImageSize.Cover)
        .backgroundImageSize(ImageSize.Contain)
    }
    .padding(20)
  }
}

2.4背景位置

作用:调整背景图在组件内的显示位置,默认显示位置为组件左上角

属性:backgroundImagePosition()

参数:

  • 位置坐标: {x: 位置, y: 位置}
  • 枚举 Alignment
名称 描述
TopStart 顶部起始端(默认位置)
Top 顶部横向居中
TopEnd 顶部尾端
Start 起始端纵向居中
Center 居中
End 尾端纵向居中
BottomStart 底部起始端
Bottom 底部横向居中
BottomEnd 底部尾端
less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({x: 100, y: 50})
        .backgroundImagePosition(Alignment.Center)
    }
    .padding(20)
  }
}

3.颜色渐变

3.1线性渐变

属性:linearGradient()

参数:

ini 复制代码
{
	angle?:  线性渐变的起始角度,
	direction?: 线性渐变的方向,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
}
  • angle:线性渐变的起始角度。0点方向顺时针旋转为正向角度,默认值:180
  • direction: 线性渐变的方向,设置 angle 后不生效,值为 枚举类型 GradientDirection
    • Left:从右向左
    • Top:从下向上
    • Right:从左向右
    • Bottom:从上向下
    • LeftTop:从右下 到 左上
    • LeftBottom:从右上 到 左下
    • RightTop:从左下 到 右上
    • RightBottom:从左上 到 右下
less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('线性')
        .width(100).height(50).backgroundColor(Color.Pink)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['red', 0.1], ['#fc0', 0.8]]
        })
    }
      .padding(20)
  }
}

示例:

3.2径向渐变

属性:radialGradient()

参数:

{ 复制代码
	center:  径向渐变的中心点坐标,
	radius: 径向渐变的半径,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
}
  • center:径向渐变的中心点,即相对于当前组件左上角的坐标,写法[x坐标, y坐标]
百分比写法 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('径向')
        .width(300)
        .height(200)
        .backgroundColor(Color.Orange)
        .radialGradient({
          center:['50%','50%'], // 百分比基于组件的宽高自动计算
          radius:'50%',  //百分比基于宽高自动计算
          colors:[
            ['#ff0000',0],
            ['#00ff00',0.5],
            ['#0000ff',1]
          ]
        })
    }
    .height('100%')
    .width('100%')
  }
}
基本数字写法 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('径向')
        .width(200)
        .height(200)
        .backgroundColor(Color.Orange)
        .radialGradient({
          center:[-50,-50], // 固定中心点位置
          radius:150,  //半径
          colors:[
            ['#ff0000',0],
            ['#00ff00',0.5],
            ['#0000ff',1]
          ]
        })
    }
    .height('100%')
    .width('100%')
  }
}
repeat重复写法 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('径向')
        .width(300)
        .height(200)
        .backgroundColor(Color.Orange)
        .radialGradient({
          center:['50%','50%'], // 百分比基于组件的宽高自动计算
          radius:'50%',  //百分比基于宽高自动计算
          colors:[
            ['#ff0000',0],
            ['#00ff00',0.1],
            ['#0000ff',0.2]
          ],
          repeating:true  // 当colors中所有颜色比例相加小于1的时候,我们可以添加repeating:true让其重复执行
        })
    }
    .height('100%')
    .width('100%')
  }
}

示例图:

4.阴影

作用:为组件添加阴影效果

属性:shadow()

参数:{}

arduino 复制代码
{
  radius: 模糊半径,
  type?: 阴影类型,
  color?: 阴影颜色,
  offsetX?: X轴偏移,
  offsetY?: Y轴偏移,
  fill?: 是否内部填充
}
less 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Image($r('app.media.wph'))
      }
      .width(200)
      .height(200)
      .backgroundColor('#fff')
      // 组合1:颜色阴影
      // .shadow({
      //   radius:20,  //表示阴影的半径
      //   color:Color.Red, // 设置阴影的颜色
      //   offsetX:20,  // X轴的偏移,正数:右,负数:左
      //   offsetY:20 // Y轴的偏移,正数:下,负数:上
      // })
      // 组合2:图片阴影
      // ✨✨注意点:① type:ShadowType.BLUR + ② 组件中有图片
      // color属性在ShadowType.BLUR无效
      // 场景:阴影随着组件中的图片的切换而切换
      .shadow({
        radius:20,
        type:ShadowType.BLUR, //表示取得组件中的图片作为边框的阴影
        offsetY:10,
        offsetX:10
      })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)

  }
}
相关推荐
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室8 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu711 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057513 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟46420 小时前
初识ArkUI
harmonyos
SameX20 小时前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠21 小时前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20051 天前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参