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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397332.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

气象大数据案例项目(求各气象站的平均气温)

气象大数据案例项目(求各气象站的平均气温) 一、项目需求二、数据格式三、项目开发3.1 在windows 进行开发3.2 运行结果3.3 对项目打包 一、项目需求 现在有一份来自美国国家海洋和大气管理局的数据集,里面包含近30年每个气象站、每小时的天…

WSL2 最新最全帮助小白一步步详细安装教程

文章目录 一、前言1.1、什么是 WSL ?1.2、WSL2 相比传统虚拟机的优势1.3、微软官方 二、安装步骤*2.1、启用 WSL 功能2.2、重启电脑2.3、dos命令自动安装 (一行命令搞定,非常方便)2.3.1、通过 cmd 打开 dos 命令行 或者 WIN键 R:2.3.2、输入…

探案录 | 在线打补丁,运维更轻松

清晨,曙光温柔地洒落在福尔摩斯K那标志性的书房内,福尔摩斯K坐在他那张熟悉的扶手椅上,眼神锐利如鹰,正沉浸在思考的海洋中。门突然被推开,华生K带着一丝急切步入室内。 “福尔摩斯K,这次案件非同小可&…

如何在线观看汤姆克鲁斯、比莉艾利什、红辣椒乐队、HER等明星的奥运闭幕式

2024 年巴黎奥运会将以一系列众星云集的表演者为结尾,他们将帮助将奥运会移交给洛杉矶——以下是在线直播盛大决赛的时间和地点。 经过两周多令人惊叹的田径运动、激烈的比赛和表情包活动后,2024 年巴黎奥运会即将落下帷幕。 奥运会闭幕式将于 8 月 12 …

【C++】 特殊类设计:从构思到实现,引领设计新潮流

🌈 个人主页:Zfox_ 🔥 系列专栏:C从入门到精通 目录 🚀 前言 一: 🔥 不能被拷贝的类 二: 🔥 只能在堆上创建对象的类 三: 🔥 只能在栈上创建对象的…

uniapp使用echarts在H5上显示报错问题的解决方法

前言 在做uniapp vue3开发的echarts图表的时候,发现在浏览器上面正常运行,但在微信开发者工具上显示报错了,报错如下 原因:在微信小程序中,使用document.getElementById会报错,因为小程序的运行环境是基于…

目前最强的文生图模型?!FLUX完全解读!附体验地址

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,专注于分享AI全维度知识,包括但不限于AI科普,AI工…

css rem之2024

话题开始前 我们都知道1rem是等于html fontSize标签的字体大小的,我们主要用来做移动端网页设计稿等比例在手机上面的显示。 看到的问题 这个html fontsize的大小是通过js动态计算的,而这个js的运行时晚于html渲染的,所以会导致一个问题&am…

python网络爬虫使用代理

Python网络爬虫使用代理的实用指南 在网络爬虫的开发过程中,使用代理是一个非常重要的环节。代理不仅可以帮助爬虫绕过反爬虫机制,还能保护开发者的隐私。本文将介绍如何在Python中使用代理进行网络爬虫,包括基本的设置和示例代码。 1. 代理…

WordPress多用途电子商务博客新闻主题betheme 21.5.6版本

简介: WordPress多用途电子商务博客新闻主题betheme 21.5.6版本 自带500多套模板 BeTheme第一次发布于2014年5月21日,自那时以来,已有数以百万计的人下载了BeTheme,其评分为4.8。 这个主题是WooCommerce支持的,在此…

Git代码管理规范

1. 简介 git 分支分为集成分支、功能分支和修复分支,分别命名为 develop、feature 和 hotfix,均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。 master(主分支,永远是可用的稳定版本,不能直接在…

mybatis xml 动态sql相关语法

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace"com.xiaKangan.mapper.EmpMapper&qu…

JavaScript 文档元素获取

目录 通过id获取文档元素 任务描述 相关知识 什么是DOM 文档元素 节点树 通过id获取文档元素 编程要求 通过类名获取文档元素 任务描述 相关知识 通过类名获取文档元素 编程要求 通过标签名获取文档元素 任务描述 相关知识 通过标签的名字获取文档元素 获取标…

android13 关闭selinux 临时关闭或者永久关闭

总纲 android13 rom 开发总纲说明 目录 1.前言 2.情况分析 2.1 临时关闭 2.2 永久关闭 3.修改方法 3.1 临时修改 3.2 永久关闭 4.编译测试 5.彩蛋 1.前言 在Android操作系统中,SELinux(Security-Enhanced Linux)是一种安全模块,用于提供强制访问控制(MAC)安全…

IDEA自定义注释模版

1.类&#xff08;接口/枚举等同理&#xff09; 2.方法模版 先自定义一个模版组&#xff0c;然后在里面添加模版名&#xff0c;触发快捷键&#xff08;Tab/Enter&#xff09;&#xff0c;模版描述&#xff0c;哪些语言中应用 模版中的自定义参数params和returns可以自动展开参数…

Linux学习记录(五)-------三类读写函数

文章目录 三种读写函数1.行缓存2.无缓存3.全缓存4.fgets和fputs5.gets和puts 三种读写函数 1.行缓存 遇到新行&#xff08;\n&#xff09;,或者写满缓存时&#xff0c;即调用系统函数 读&#xff1a;fgets,gets,printf,fprintf,sprintf写&#xff1a;fputs,puts,scanf 2.无缓…

Golang | Leetcode Golang题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; func oddEvenList(head *ListNode) *ListNode {if head nil {return head}evenHead : head.Nextodd : headeven : evenHeadfor even ! nil && even.Next ! nil {odd.Next even.Nextodd odd.Nexteven.Next odd.Nexteven even.N…

贷齐乐系统sql注入漏洞

目录 源码 代码流程 payload编写 全局污染 php小特性 注入思路 payload构造 获取数据库名&#xff0c;这里是不可以使用database的因为括号被过滤乐 在information中查询数据库名 然后获取表名 获取数据 源码 <?php header("Content-type: text/html; char…

基于ssm+vue+uniapp的网上商城小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

mac要装虚拟机吗

在Mac上安装虚拟机可以带来多种好处&#xff0c;‌但同时也存在一些潜在的影响。‌ 首先&#xff0c;‌虚拟机技术允许在同一设备上运行多个操作系统&#xff0c;‌这对于需要测试不同操作系统兼容性的开发者和IT专业人员来说非常有用。‌此外&#xff0c;‌虚拟机还能解决软件…