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

devtools/2024/12/23 4:11:57/

 

个人主页→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')}
}

http://www.ppmy.cn/devtools/92454.html

相关文章

pytorch分布式训练卡住,显卡占用100

1、问题 使用pytorch进行分布式训练,一机多卡,采用 DistributedDataParallel 方式,多次执行卡在了同一个地方。但是单卡和 DataParallel 方式都没有卡住的现象。 执行nvidia-smi,此时全部GPU利用率均为100%: 2、debug…

缓冲字符流、文件字符流

BufferedInputStream 字节缓冲输入流: 1.是一个高级流,内部维护一个缓冲区,默认8KB 2.读取文件数据时一次性尽可能读取到缓冲区大小的字节 3.read方法从缓冲区获取数据:当缓冲区全部读完,会再次从磁盘上读取数据存…

前端实现文件下载常用几种方式

项目中前端下载一般分为两种情况: 后端直接提供一个文件地址,通过浏览器打开就可以下载。需要发送请求,后端返回二进制流数据,前端解析流数据,生成URL实现下载。 前端对应的实质是a标签和Blob文件下载,这…

.gitignore 忽略文件不生效如何处理?

近期因为写了一个自动打包发布脚本,需要再项目中增加一个 uses.ts 文件,里面记录了用户名、密码、服务器地址、文件夹等等信息,虽然确实是方便了很多,但是跑完流程后,发现这样会有安全问题,太多关键信息上传…

微信小程序【五】摇骰子

摇骰子 一、dice.js二、dice.json三、dice.wxml四、dice.wxss 效果简述:点击设置“骰子个数”,喝一杯前,先摇一摇。 骰子图片命名示例: 1.png、2.png 一、dice.js Page({data: {numDice: 1, // 初始化骰子数diceImages: [],dic…

安装 Zookeeper

安装 Zookeeper 安装 Zookeeper cd /opt tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz mv apache-zookeeper-3.5.7-bin /opt/zookeeper//修改配置文件 cd /opt/zookeeper/conf/ cp zoo_sample.cfg zoo.cfgvim zoo.cfg tickTime2000 #通信心跳时间,Zookeeper服务…

记一次 .NET某智慧出行系统 CPU爆高分析

一:背景 1. 讲故事 前些天有位朋友找到我,说他们的系统出现了CPU 100%的情况,让你帮忙看一下怎么回事?dump也拿到了,本想着这种情况让他多抓几个,既然有了就拿现有的分析吧。 二:WinDbg 分析…

接口隔离原则

接口隔离原则 接口隔离原则就是客户端不应该依赖它不需要的接口,或者说类间的依赖关系应该建立在最小的接口上。 我们以搜索美女为例,设计了如下的类图: 源代码如下。美女及其实现类: 搜索程序及其子类源代码如下: 最…