【HarmonyOS NEXT星河版开发学习】小型测试案例06-小红书卡片

 

个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面（暂未发布）

前言

在鸿蒙（HarmonyOS）开发中，自适应伸缩是指应用程序能够根据不同设备的屏幕尺寸、分辨率和形态（如手机、平板、电视）自动调整布局和元素大小，以确保用户界面在各种设备上都能良好地显示和使用。

知识点概述

1. 自适应伸缩

约束布局（ConstraintLayout）：

• 鸿蒙支持使用约束布局来实现灵活的界面设计。约束布局通过设置视图之间的相对约束关系（如水平、垂直方向的边距、宽高比等），使得界面元素能够根据屏幕尺寸自适应调整布局。

百分比布局：

• 鸿蒙支持在布局中使用百分比作为尺寸单位，这使得元素的大小可以根据屏幕实际尺寸进行调整，保持相对比例。

响应式设计（Responsive Design）：

• 开发者可以利用鸿蒙提供的响应式设计原则，使用适配器和条件语句等技术来调整和优化布局，使得应用能够在不同屏幕尺寸和形态下保持一致的用户体验。

资源适配（Resource Adaptation）：

• 鸿蒙框架允许开发者为不同的设备类型（如手机、平板、电视）提供特定的资源文件（如布局文件、图片等），通过选择合适的资源文件来适应不同设备的显示需求。

动态适配（Dynamic Adaptation）：

• 使用鸿蒙提供的动态适配功能，开发者可以根据设备的实时状态（如横竖屏切换、窗口大小变化）调整界面元素的位置和大小，以保证用户界面的流畅和美观。

2. 圆角设置

在鸿蒙（HarmonyOS）开发中，实现圆角效果通常涉及到设置视图（View）或组件（Component）的边框属性。

使用边框属性设置圆角：

• 在鸿蒙开发中，可以通过设置视图或组件的边框属性来实现圆角效果。例如，对于一个 Text 组件或 Image 组件，可以设置其边框属性，并通过 setCornerRadius 方法设置圆角半径。

自定义圆角形状：

• 鸿蒙开发也支持通过自定义 ShapeElement 来创建更复杂的圆角形状。通过设置不同的圆角半径和形状，可以实现更加个性化的圆角效果。

布局文件中的圆角设置：

• 在 XML 布局文件中，可以通过设置圆角属性来实现视图的圆角效果。在 HarmonyOS 中，布局文件通常使用 .hap 扩展名。

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Image($r('app.media.xhs_text_img_02'))
          .width('200')
          .borderRadius(20)
        Text('这段话真的太治愈了！')
          .fontColor('#fff')
          .fontWeight(600)
          .fontSize(12)
          .margin({ top: 5, left: -50 ,bottom:10})
        // 底部
        Row() {
          // 头像 昵称
          Row() {
            Image($r('app.media.tx_01'))
              .width(16)
              .borderRadius(8)
              .margin({left:15,right:5})
            Text('解忧日记')
              .fontColor('#fff')
              .fontSize(10)
          }
          .layoutWeight(1)
          // 点赞图标 点赞数
          Row() {
            Image($r('app.media.ic_public_favor'))
              .fillColor('#fff')
              .width(10)
            Text('1.4万')
              .fontColor('#fff')
              .fontSize(10)
              .margin({right:15})
          }
        }
      }
      .width(200)
      .backgroundColor(Color.Black)
      .borderRadius(20)
    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}