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

梁林烁
182 阅读8分钟

环境及工具

HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发

highlight: agate theme: juejin

1.布局属性

线性布局（LinearLayout）是鸿蒙（HarmonyOS）及其他移动开发平台中最为常见和基础的布局类型之一。它通过简单的行（Row）或列（Column）结构，为开发者提供了一种直观的方法来组织用户界面元素。下面我们将深入探讨如何利用 Row 和 Column 容器构建高效的线性布局，并介绍一些最佳实践和高级特性。

线性布局的基本概念

Row 和 Column 的定义
  • Row：这是一个水平排列的容器，内部的所有子元素都将按照从左到右的顺序依次放置。适用于需要在同一行显示多个组件的情况。
  • Column：与 Row 类似，但它是垂直排列的容器，所有子元素会自上而下依次堆叠。当您希望在界面上创建分层效果时，使用 Column 是非常合适的。
主轴与交叉轴

对于 Row 和 Column 来说，它们都有两个主要的方向：

  • 主轴 ：指的是元素排列的主要方向。对于 Row 来讲，主轴是水平方向；而对于 Column，则是垂直方向。
  • 交叉轴 ：这是相对于主轴而言的另一个维度。对于 Row，交叉轴为垂直方向；对于 Column，交叉轴则为水平方向。 微信顶部区域演示

image.png

组件布局

image.png

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

1.1内边距

  • margin：设置视图外边距，即视图与其他元素之间的距离。
  • padding：设置视图内边距，即视图内容与边框之间的距离。
  • 这些属性可以通过指定上下左右四个方向的具体值来进行更精细的控制。

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

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

添加前后示例图片：

image.png

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

用法:
属性：数字 或 对象{}
数字：上下左右内边距都相同
对象{}：可以配合left、right、top、bottom单独设置某一个方向边距
示例演示：

image.png

1.2外边距

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

image.png 用法： 属性：数字 或 对象{}
数字：上下左右内边距都相同
对象{}：可以配合left、right、top、bottom单独设置某一个方向边距
示例演示：

@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)
  }
}

添加外边距前后演示图： image.png

1.3边框属性

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

1.3.1四个边框属性相同

示例图片：
image.png 属性：border()

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

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

示例代码：

@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四个边框属性不相同

写法：

.border({
  width: {},
  color: {},
  style: {}
})

示例图片:

image.png


@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：右下角
组件()
  //语法1：给四个角设置相同值
 .borderRadius(圆角半径数值)
  
  //语法2：给四个角单独设值
 .borderRadius({
          topLeft: 左上角半径数值,
          topRight: 右上角半径数值,
          bottomLeft: 左下角半径数值,
          bottomRight: 右下角半径数值        
        })

示例图片：

image.png

image.png

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

2.背景属性

背景属性用于定义用户界面组件的背景样式。这些属性可以用来设置背景颜色、背景图片、渐变效果等，以满足不同的设计需求

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

2.1背景颜色

@Entry
@Component
struct Index {
  build() {
    Column() {

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

image.png

2.2背景图片

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

背景图平铺方式：（可省略）

  • NoRepeat：不平铺，默认值
  • X：水平平铺
  • Y：垂直平铺
  • XY：水平垂直均平铺
@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：默认，原图尺寸
@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底部尾端
@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.颜色渐变

颜色渐变（Gradient）是一种在两个或多个颜色之间平滑过渡的效果，广泛应用于图形设计、网页开发和移动应用界面中，以增强视觉吸引力。颜色渐变通常分为两种主要类型：线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

3.1线性渐变

属性：linearGradient()
参数：

{
	angle?:  线性渐变的起始角度,
	direction?: 线性渐变的方向,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
}
  • angle：线性渐变的起始角度。0点方向顺时针旋转为正向角度，默认值：180
  • direction: 线性渐变的方向，设置 angle 后不生效，值为 枚举类型 GradientDirection
    • Left：从右向左
    • Top：从下向上
    • Right：从左向右
    • Bottom：从上向下
    • LeftTop：从右下 到 左上
    • LeftBottom：从右上 到 左下
    • RightTop：从左下 到 右上
    • RightBottom：从左上 到 右下
@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)
  }
}

示例：
image.png

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%')
  }
}

@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%')
  }
}

示例图：
image.png

4.阴影

在鸿蒙（HarmonyOS）开发中，为UI组件添加阴影可以增强视觉层次感，使界面更加立体和吸引人。阴影效果可以通过设置视图的属性来实现，具体来说是通过Shadow属性来定义阴影的位置、颜色、模糊度等。 作用：为组件添加阴影效果

属性：shadow()

参数：{}

{
  radius: 模糊半径,
  type?: 阴影类型,
  color?: 阴影颜色,
  offsetX?: X轴偏移,
  offsetY?: Y轴偏移,
  fill?: 是否内部填充
}

@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)

  }
}
avatar
文章
阅读
粉丝