HarmonyOS基础--基础布局

最新推荐文章于 2024-09-04 00:15:00 发布
最新推荐文章于 2024-09-04 00:15:00 发布
阅读量708 收藏 40
点赞数 35
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hqy1989/article/details/141783399
版权

目录

三. 基础布局

1. 设计资源-图标库

1.1. 下载图标

1.2. 使用图标

2. 布局属性

2.1. 内边距 padding

2.2. 外边距 margin

2.3. 案例-QQ音乐登录 

2.4. 边框属性 

 2.4.1. 四个方向边框相同

2.4.2. 四个方向边框不同 

2.5. 边框圆角

3. 案例-小红书商品

 4. 背景属性

4.1. backgroundColor

 4.2. backgroundImage

 4.3. backgroundImageSize

 4.4. backgroundImagePosition

5. 案例-华为卡片

 6. 颜色渐变

6.1. 线性渐变

6.2. 径向渐变

 7. 阴影

 8. 案例-华为商品卡片

三. 基础布局

今日核心：
1设计资源-图标库
2属性：布局属性、背景属性
3线性布局

1. 设计资源-图标库

HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源，涵盖多种使用场景以及风格分类，提供灵活的颜色、大小和格式定义，满足不同角色的下载需求

 

 使用步骤：设计师提供图标/下载图标 → 使用图标

1.1. 下载图标

进入图标库网站，下载 SVG 格式，存储到工程目录：resources/base/media/ 

HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。 

1.2. 使用图标

使用 Image 组件显示图标，添加 fillColor() 属性修改图标颜色

@Entry
@Component
struct Index {

  build() {
    Column() {
      Image($r('app.media.ic_gallery_create'))
        .width(30)
        .aspectRatio(1)
        .fillColor('#f60')
    }
      .padding(20)
  }
}

2. 布局属性

微信个人中心部分区域 

组件布局 

属性

描述

padding

内边距

margin

外边距

border

边框线

borderRadius

边框圆角

2.1. 内边距 padding

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

属性：padding()

参数类型：数字 或 对象{}

  • 数字：上下左右内边距相同
  • 对象{}：配合 left、right、top、bottom 单独设置某个方向内边距
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文字')
        .backgroundColor(Color.Pink)
        // 单值：四个方向padding相同
        .padding(20)
        // 对象：单独设置某个方向
        .padding({
          top: 10,
          right: 20,
          bottom: 40,
          left: 80
        })
    }
  }
}

2.2. 外边距 margin

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

属性：margin（）

属性：数字 或 对象{}

  • 数字：上下左右边外距相同
  • 对象{}：配合 left、right、top、bottom 单独设置某个方向外边距
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('文字1')
          .backgroundColor(Color.Pink)
          .margin(20)
        Text('文字2')
          .backgroundColor(Color.Orange)
          .margin({
            top: 10,
            right: 20,
            bottom: 40,
            left: 80
          })
      }
    }
  }
}

2.3. 案例-QQ音乐登录 

 

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.ic_user'))
        .width(100)
        .margin({ bottom: 10 })

      Text('大王叫我来巡山')
        .fontWeight(700)
        .margin({ bottom: 40})

      Button('QQ登录')
        .width('100%')
        .backgroundColor('#367bf6')
      Button('微信登录')
        .width('100%')
        .fontColor('#000')
        .backgroundColor('#ddd')
        .margin({ top: 10 })
    }
    .padding(20)
  }
}

2.4. 边框属性 

 

 2.4.1. 四个方向边框相同

属性：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)
  }
}
2.4.2. 四个方向边框不同 

 书写方法

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

 width、color、style 均可以通过top、right、bottom、left设置各个方向边框外观

 示例代码

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

2.5. 边框圆角

 

属性：borderRadius(圆角半径)

参数：数值 或 { }

  • topLeft：左上角
  • topRight：右上角
  • bottomLeft：左下角
  • bottomRight：右下角
@Entry
@Component
struct Index {
  build() {
    Column({space: 20}) {
      Text('圆角1')
        .width(100)
        .height(40)
        .backgroundColor('#f60')
        .borderRadius(5)

      // 胶囊状 圆角半径 = 高度 / 2
      Text('圆角2')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius(20)

      // 正圆 圆角半径 = 正方形尺寸 / 2
      Image($r('app.media.avatar'))
        .width(100)
        .aspectRatio(1)
        .borderRadius(50)

      // 四个角半径不同写法
      Text('圆角3')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius({
          topLeft: 5,
          topRight: 10,
          bottomRight: 20,
          bottomLeft: 40
        })

    }
    .padding(20)
  }
}

3. 案例-小红书商品

 

@Entry
@Component
struct Index {

  build() {
    Column() {
      Column() {
        Image($r('app.media.pics'))
          .width('100%')
          .height(150)
          .borderRadius({topLeft: 8, topRight: 8})
        Text('磁力片。工厂直发磁力王。100片，尺寸7.5cm 可兼容其他品牌')
          .width('100%')
          .padding({left: 5, right: 5})
          .fontSize(12)
          .lineHeight(18)
          .maxLines(2)
          .textOverflow({overflow: TextOverflow.Ellipsis})
        Text('￥ 87')
          .width('100%')
          .padding({left: 5, right: 5})
          .fontSize(13)
          .fontColor('#f00')
          .margin({top: 5})
      }
        .width('50%')
        .padding({bottom:10})
        .backgroundColor('#fff')
        .borderRadius(8)
    }
      .width('100%')
      .height('100%')
      .backgroundColor('#eee')
      .padding(20)
  }
}

 4. 背景属性

 

属性

描述

backgroundColor

背景色

backgroundImage

背景图

backgroundImageSize

背景图尺寸

backgroundImagePosition

背景图位置

4.1. backgroundColor

设置组件的背景色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
    }
    .padding(20)
  }
}

组件添加宽高属性或有内容才能观察到背景色

 4.2. backgroundImage

属性：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)
    }
    .padding(20)
  }
}

 4.3. backgroundImageSize

作用：背景图缩放

属性：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)
  }
}

 4.4. backgroundImagePosition

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

属性：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)
  }
}

5. 案例-华为卡片

 

@Entry
@Component
struct Index {

  build() {
    Column() {
      Column() {
        Text('漏洞处理流程')
          .fontColor('#fff')
          .fontSize(14)
          .fontWeight(700)
        Text('华为PSIRT按照漏洞处理流程对上报的潜在漏洞进行处理')
          .fontSize(10)
          .fontColor('#fff')
          .margin({top: 10, bottom: 10})
        Text('了解更多')
          .fontColor('#fff')
          .fontSize(8)
          .border({width: 1, color: '#fff'})
          .padding({left: 20, right: 20, top:5, bottom: 5})
      }
        .width('50%')
        .height(220)
        .backgroundImage($r('app.media.hw_bg'))
        .padding({left: 10, right: 10, top: 20})
    }
      .width('100%')
      .height('100%')
      .backgroundColor('#eee')
      .padding(10)
  }
}

 6. 颜色渐变

 

作用：设置组件颜色渐变效果

分类：线性渐变 和 径向渐变

 

6.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)
  }
}

6.2. 径向渐变

属性：radialGradient()

参数：

{
	center:  径向渐变的中心点坐标,
	radius: 径向渐变的半径,
	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
	repeating?: 是否重复着色
}
  • center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法[x坐标, y坐标]
@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('径向')
        .width(100).height(50).backgroundColor(Color.Pink)
        .radialGradient({
          center: [40, 0],
          radius: 40,
          // colors: [['red', 0.1], ['#fc0', '0.8']],
          colors: [
            ['rgba(255, 255, 255, 0.6)', 0],
            ['rgba(255, 255, 255, 0)', 1]
          ]
          // repeating:true
        })
    }
      .padding(20)
  }
}

 7. 阴影

 

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

属性：shadow()

参数：{}

{
  radius: 模糊半径,
  type?: 阴影类型,
  color?: 阴影颜色,
  offsetX?: X轴偏移,
  offsetY?: Y轴偏移,
  fill?: 是否内部填充
}
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {}
        .width('100%').height(200).backgroundColor('#fff')
        .shadow({
          // 模糊半径
          radius: 20,
          // 阴影类型
          type: ShadowType.COLOR,
          // 阴影颜色
          color: 'rgba(0,0,0,0.5)',
          // X 轴偏移
          offsetX: 0,
          // Y 轴偏移
          offsetY: 0,
          // 是否内部填充，值为布尔型，默认为flase
          fill: false
        })
    }
      .padding(20)
  }
}

 8. 案例-华为商品卡片

 

@Entry
@Component
struct Index {

  build() {
    Column() {
      Column() {
        Image($r('app.media.all_x5'))
          .width(150)
          .margin({bottom: 20})
        Text('HUAWEI Mate X5')
          .width('100%')
          .fontSize(14)
          .fontWeight(700)
          .margin({bottom: 30})
        Text('￥12999 起')
          .width('100%')
          .fontSize(10)
          .margin({bottom: 15})
        Row() {
          Row(){
            Text('了解更多')
              .fontSize(10)
            Image($r('app.media.ic_public_arrow_right'))
              .width(12)
          }
            .margin({right: 10})
          Row(){
            Text('购买')
              .fontSize(10)
            Image($r('app.media.ic_public_arrow_right'))
              .width(12)
          }
        }
          .width('100%')
      }
        .width(200)
        .backgroundColor('#fff')
        .padding(15)
        .margin(20)
        .shadow({
          radius: 20,
          color:'#1a000000'
        })
        .borderRadius(8)

    }
      .width('100%')
      .height('100%')
      .backgroundColor('#eee')
  }
}

 

谢道韫666
关注
  • 35
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
HarmonyOS和android-HarmonyOS-master:HarmonyOS-master
07-01
HarmonyOS 相关的精彩内容的精选列表 Ⅰ． 什么是鸿蒙？ HormonyOS是第一个基于微内核的全场景分布式操作系统。 是华为自主研发的操作系统。 2019年8月9日， HormonyOS系统在华为开发者大会（）上正式发布。 华为将...
HarmonyOS实战-基础知识
qq_41607217的博客
08-01 2177
HUAWEI DevEco Studio 是基于IntelliJ IDEA Community开源版本打造，面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试等E2E的HarmonyOS应用开发服务。 【1】HarmonyOS的应用由一个或多个FA（Feature Ability）或PA（Particle Ability）组成。 【2】 Feature Ability Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（
HarmonyOS应用基础--布局高级
最新发布
hqy1989的博客
09-04 948
Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
HarmonyOS UI布局-性能优化
1
04-23 488
应用开发中的用户界面（UI）布局是用户与应用程序交互的关键部分。使用不同类型的布局可以将页面排布的更加美观，但也容易带来不合理的布局。不合理的布局虽然能在界面显示上达到相同效果，但是过度的布局计算，界面嵌套带来了渲染和计算的大量开销，造成性能的衰退，本文重点介绍了几种常见的布局功能和适用场景，同时提供了几种优化布局结构的方法。内置ArkUI Inspector工具，开发者可以使用ArkUIInspector，在DevEco Studio上查看应用在真机上的UI显示效果。
HarmonyOS NEXT - 资源分类与访问
u011143672的博客
06-14 858
应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。应用资源：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。系统资源：开发者直接使用系统预置的资源定义（即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。
铁山靠之——HarmonyOS基础 - 1.0
VanWot的博客
12-24 1727
华为HarmonyOs第一 ~ 四课
harmonyos与java_HarmonyOS基础-第一个应用总结
weixin_39792472的博客
02-27 193
目录：HarmonyOS第一个应用项目一、HarmonyOS应用项目结构1.项目结构图如上图：FirstApp为项目名称External Libraries为一些扩展库或者第三方库，默认就有不需要进行加载2.项目结构图gradle：**Gradle**配置文件，由系统自动生成，一般情况下不需要进行修改。build： 为编译后生成文件，如最后生成的hap文件(entry-debug-unsigned...
鸿蒙系统（HarmonyOS）--第一章
热门推荐
猿特佳
10-07 4万+
HarmonyOS是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统本章介绍了鸿蒙系统(HarmonyOS)概述及展望，介绍了鸿蒙系统核心技术特色及架构技术 ，鸿蒙开发环境构建及应用开发鸿蒙应用工程源码分析。一键三连继续学习吧！！！
HarmonyOS--基础组件Text
github_39096247的博客
12-14 467
属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部。文本截断是按字截断。设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。
HarmonyOS应用开发者基础认证考试题目及答案
11-19
HarmonyOS 应用开发者基础认证考试涵盖了HarmonyOS应用开发的核心知识，包括数据存储、组件使用、生命周期管理、网络请求以及界面布局等多个方面。以下是这些知识点的详细解释： 1. **首选项Preferences**：...
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 893
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
使用SymbolGlyph和SymbolSpan在HarmonyOS中实现高级图标效果
A1551143530的博客
09-03 313
不仅支持静态图标，还可以通过属性为图标添加动态效果。Column() {Text("弹跳动效示例")'停止' : '开始').onClick(() => {})这个示例展示了如何通过按钮控制图标的动效，利用实现图标的弹跳效果。这样的动效可以显著提升用户界面的动态感。和SymbolSpan组件提供了丰富的功能，使您能够在HarmonyOS中轻松创建和管理图标。通过掌握这些组件的用法，您可以在应用中实现精美的图标效果，并为用户带来更好的视觉体验。4o。
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1150
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1691
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
安卓model转鸿蒙ets
琼小资的专栏
09-03 148
现在的android studio提供了java自动转kotlin的实现，非常方便。那android的java和kotlin有没有可能转成鸿蒙artts呢。先从最简单的model转换开始，把kotlin的model转成ets。本质上都是字符串文件，讲道理应该是可行的。
鸿蒙（API 12 Beta6版）图形【NativeDisplaySoloist开发指导】方舟2D图形服务
鸿蒙的技术博客
09-03 674
如果开发者想在独立线程中进行帧率控制的Native侧业务，可以通过DisplaySoloist来实现，如游戏、自绘制UI框架对接等场景。 开发者可以选择多个DisplaySoloist实例共享一个线程，也可以选择每个DisplaySoloist实例独占一个线程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值