学习鸿蒙基础(9)

目录

一、鸿蒙国际化配置

二、鸿蒙常用组件介绍

三、鸿蒙像素单位介绍

 四、鸿蒙布局介绍

1、Row与Column线性布局

2、层叠布局-Stack

3、弹性布局

4、栅格布局

 5、网格布局



一、鸿蒙国际化配置

base目录下为默认的string。en_US对应美国的。zh_CN对应中国的。新增一个string以后。这3个文件夹下必须都有相同的key和value。

二、鸿蒙常用组件介绍
@Entry
@Component
//简单的常用组件集合
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text($r("app.string.PassWord_label")).fontSize(50).fontWeight(FontWeight.Bold).backgroundColor($r("app.color.Color_Blue"))Text("1111111111111111111111111").fontSize(35).width(200).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(Color.Yellow)Button(){Row(){LoadingProgress().width(50).height(50).color(Color.White)Text("登录").fontColor(Color.White)}.width(100)}TextInput({placeholder:"请输入"}).fontSize(18).type(InputType.Password)Divider()TextArea({placeholder:"多行文本"}).height(100).placeholderColor(Color.Brown)//多行文本Row(){CheckboxGroup({group:"list"}).onChange(v=>{console.log("11",JSON.stringify(v))})Row(){Checkbox({group:"list",name:"测试"})Text("测试")}Row(){Checkbox({group:"list",name:'跑步'})Text("跑步")}}Row(){Row(){Radio({group:'11',value:'语文'}).onChange(v=>{v&& console.log("语文")})Text("语文")}Row(){Radio({group:'11',value:'数学'}).onChange(v=>{v&& console.log("数学")})Text("数学")}Row(){Radio({group:'11',value:'英语'}).onChange(v=>{v&& console.log("英语")})Text("英语")}}// 开关Toggle({type:ToggleType.Switch,isOn:false}).colorBlend(Color.Red).borderColor(Color.Blue)// 开关Toggle({type:ToggleType.Checkbox,isOn:false}).colorBlend(Color.Red).borderColor(Color.Blue)// 开关Toggle({type:ToggleType.Button,isOn:true}){Text("测试")}
// ------------------------------------------------------------------------------------------// Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。// Cover:保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。// Auto:自适应显示。// Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。// ScaleDown:保持宽高比显示,图片缩小或者保持不变。// None:保持原有尺寸显示。
// --------------------------------------------------------------------------------------------
//         Image('images/2.jpg')
//           .width(300)
//           .height(300).border({ width:1 }).objectFit(ImageFit.Cover)// Image('images/2.jpg').width(300)// Image($r("app.media.icon")).width(300).interpolation(ImageInterpolation.High)Image($r("app.media.icon")).border({width:1}).renderMode(ImageRenderMode.Original).objectFit(ImageFit.None).width(300).interpolation(ImageInterpolation.High).objectRepeat(ImageRepeat.XY)}.width('100%').height("100%")}.height('100%')}
}
三、鸿蒙像素单位介绍

鸿蒙为开发者提供4种像素单位,框架采用vp为基准数据单位。
px:屏幕物理像素单位。
vp:屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px。
fp:字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。
lpx:视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度 (通过designWidth配置) 的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。

例如:
1.1vp =在160dpi中的1px,vp保证了不同分辨率下 视觉效果的等价性,比如一个图标,在不同分辨率下都是视觉效果是等价。
   应用场景:适合绝大多数场景。
2.1fp=在160dpi中的1px 乘以系统的缩放比例。
   应用场景:用来设定字体大小,且需要支持系统字体大小调整时使用。
3.designWidth =1440, 1lpx= 1px
  应用场景:对于UI图,部分需要高度还原的场景使用。

desingnWidth在这个文件夹里设置。

 四、鸿蒙布局介绍
1、Row与Column线性布局

线性布局是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定
Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。根据不同的排列方向,开发者可选择使用Row或Column容器创建线性布局。

 布局容器:具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素:布局容器内部的元素。
主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。
交叉轴: 垂直于主轴方向的轴线。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。
间距:布局子元素的间距。

@Entry
@Component
struct PageDpi {@State message: string = 'Hello World'build() {// Row() {//   Text("rr").width(100).height(100).backgroundColor(Color.Red)//   Text("ff").width(100).height(100).backgroundColor(Color.Blue)//   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)// }// // 主轴的方向————>水平// .justifyContent(FlexAlign.SpaceEvenly)// // 交叉轴的方向————>垂直// .alignItems(VerticalAlign.Top)// .height('100%').backgroundColor(Color.Pink).width("100%")// Column() {//   Text("rr").width(100).height(100).backgroundColor(Color.Red)//   Text("ff").width(100).height(100).backgroundColor(Color.Blue)//   Text("aa").width(100).height(100).backgroundColor(Color.Yellow)// }// // 主轴的方向————>垂直// .justifyContent(FlexAlign.SpaceEvenly)// // 交叉轴的方向————>水平// .alignItems(HorizontalAlign.Start)// .height('100%').backgroundColor(Color.Pink).width("100%")Row() {Column() {Row(){Button("退出")Blank()//撑满空白的组件Text("主页")Blank()Button("确定")}.width("100%").backgroundColor(Color.Gray)Row({space:50}) {Text("rr").layoutWeight(1).height(100).backgroundColor(Color.Red)Text("ff").layoutWeight(1).height(100).backgroundColor(Color.Blue)Text("aa").layoutWeight(1).height(100).backgroundColor(Color.Orange)}.justifyContent(FlexAlign.Start)Row({space:10}){Text("username")TextInput().layoutWeight(100).backgroundColor(Color.Orange)}.margin(10)}.width("100%").height("100%").justifyContent(FlexAlign.Start)}.height("100%")}
}
2、层叠布局-Stack

层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。

@Entry
@Component
struct PageStack1 {@State message: string = 'Hello World'build() {Row() {Column() {Stack() {Text("龙").fontSize(50).fontWeight(FontWeight.Bold).width(300).height(300).backgroundColor(Color.Orange)Text("兔").fontSize(50).fontWeight(FontWeight.Bold).width(100).height(100).backgroundColor(Color.Red)//.alignContent(Alignment.TopStart)设置显示的位置}.alignContent(Alignment.TopStart).height(350).backgroundColor(Color.Gray).width(350)Stack() {Text("兔").fontSize(50).fontWeight(FontWeight.Bold).width(100).height(100).backgroundColor(Color.Red).zIndex(2)//zIndex优先级Text("龙").fontSize(50).fontWeight(FontWeight.Bold).width(300).height(300).backgroundColor(Color.Orange)}}.width('100%')}.height('100%')}
}

层叠布局举例,回到顶部功能:

@Entry
@Component
struct PageStack2 {@State message: string = 'Hello World'@State list: string[] = ["子(鼠)", "丑(牛)", "寅(虎)", "卯(兔)", "辰(龙)", "巳(蛇)", "午(马)", "未(羊)", "申(猴)", "酉(鸡)", "戌(狗)", "亥(猪)"]@State isShow: boolean = falsescrolly:Scroller=new Scroller();build() {Row() {Column() {Stack() {List({scroller:this.scrolly}) {ForEach(this.list, item => {ListItem() {Text(item).fontSize(25)}.width("100%").height(200)})}.onScrollIndex((start, end) => {if(end>4){this.isShow=true}else{this.isShow=false}})if (this.isShow) {Text("回顶部").backgroundColor(Color.Orange).borderRadius(10).width(100).height(50).fontSize(27).textAlign(TextAlign.Center).margin(18).onClick(()=>{this.scrolly.scrollToIndex(0)})}}.alignContent(Alignment.BottomEnd)}.width('100%')}.height('100%')}
}
3、弹性布局

弹性布局Flex 提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多,比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

@Entry
@Component
struct PageFlex {@State message: string = 'Hello World'build() {Row() {Column() {// Flex({//   direction:FlexDirection.Row,//方向//   justifyContent:FlexAlign.Center,//主轴//   // alignItems:ItemAlign.Baseline//   alignItems:ItemAlign.Center,// }){//   Text("111").width(100).height(100).backgroundColor(Color.Black).//   alignSelf(ItemAlign.Start)//   Text("222").width(100).height(200).backgroundColor(Color.Red)//   Text("333").width(100).height(100).backgroundColor(Color.Orange)//     .alignSelf(ItemAlign.End)// }.width(400).height(400).backgroundColor(Color.Gray)//   Flex({//     direction: FlexDirection.Row, //方向//     justifyContent: FlexAlign.Start, //主轴//     // alignItems:ItemAlign.Baseline//     alignItems: ItemAlign.Center,//     wrap: FlexWrap.Wrap//   }) {//     Text("111").width("50%").height(100).backgroundColor(Color.Black)//     Text("222").width("50%").height(100).backgroundColor(Color.Red)//     Text("333").width("50%").height(100).backgroundColor(Color.Orange)//   }.width(400).height(400).backgroundColor(Color.Gray)// }Flex({direction: FlexDirection.Row, //方向justifyContent: FlexAlign.Start, //主轴// alignItems:ItemAlign.BaselinealignItems: ItemAlign.Center}) {Text("111").width(100).height(100).backgroundColor(Color.Black).flexGrow(1)//相当于权重Text("222").width(100).height(100).backgroundColor(Color.Red).flexGrow(1)Text("333").width(100).height(100).backgroundColor(Color.Orange).flexGrow(1)}.width(400).height(400).backgroundColor(Color.Gray)}.width('100%')}.height('100%')
}
}
4、栅格布局

栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:
1.提供可循的规律: 栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。
2.统一的定位标注:栅格布局可以为系统提供一种统一的定位标注,保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度,提高工作效率。
3.灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距,可以控制整个页面的排版效果。
4.自动换行和自适应:栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时,他们会自动换到下一行或下一列,并且在不同的设备上自适应排版,使得页简布局更加灵活和适应性强。
5.在GridRow栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外,还可以启用xl,xxl两个断点,支持六种不同尺寸 (xs,sm,md,lg,xl,xxl)设备的布局设置。

断点名称                  设备描述
  xs:                      最小宽度类型设备
 sm:                     小宽度类型设备
md:                     中等宽度类型设备
  lg:                      大宽度类型设备
  xl:                       特大宽度类型设备
xxl:                       超大宽度类型设备

 breakpoints: [value: ['320vp','520vp','840vp',"1080vp',   '2000vp']}

@Entry
@Component
struct PageGrid {@State message: string = 'Hello World'@State bgColors: Color[] = [Color.Gray, Color.Red, Color.Orange, Color.Black, Color.Blue, Color.Pink, Color.Brown, Color.Yellow]build() {Row() {// 默认12栅格// GridRow({//   breakpoints: { value: ["200vp", "300vp", "400vp", "500vp", "600vp"] },// }) {//   ForEach(this.bgColors, (item, index) => {//     GridCol({//       span: { xs:12, sm:6, md:4, lg:3, xl:2 }//一个孩子占几份//     }) {//       Row() {//             Text((index+1)+"").width("100%").height("50")//       }//     }.backgroundColor(item)//   })// }.width("100%")// 这个方法常用GridRow({direction:GridRowDirection.RowReverse,//反向排列gutter:10,columns: { xs:1, sm:2, md:4, lg:6, xxl:8 },breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] },}) {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index+1}`).width("100%").height(50)}}.backgroundColor(item)})}.width("100%")}.height('100%')}
}
 5、网格布局

网格布局是由“行”和“列"“分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。
通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。rowsTemplate和columnsTemplate属性值是一个由多个空格和数字+fr"间隔拼接的字符串,r的个数即网格布后的行或列数,fr前面的数值大小,用于计算该行或列在网格布局宽度上的占比,最终决定该行或列的宽度。

 

 Grid() {}
.rowsTemplate('lfr 1fr 1fr')
.columnsTemplate('lfr 2fr lfr')

@Entry
@Component
struct PageGrid1 {@State message: string = 'Hello World'@Stylesstyle(){.backgroundColor(Color.Red).width("33.33333%")// .height("50%")}build() {Row() {// Column() {//   Grid(){//     GridItem(){//       Text("111")//     }.style().columnStart(0).columnEnd(1)//     GridItem(){//       Text("222")//     }.style()//     GridItem(){//       Text("333")//     }.style().columnStart(2).columnEnd(3)//     GridItem(){//       Text("444")//     }.style()//     GridItem(){//       Text("555")//     }.style()//     GridItem(){//       Text("666")//     }.style()//   }.width('100%').height(200).columnsTemplate("1fr 1fr 1fr")//   .rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)// }// .width('100%')//Column() {Grid() {GridItem() {Text("111")}.style()GridItem() {Text("222")}.style()GridItem() {Text("333")}.style()GridItem() {Text("444")}.style()GridItem() {Text("555")}.style()GridItem() {Text("666")}.style()GridItem() {Text("777")}.style()GridItem() {Text("888")}.style()GridItem() {Text("999")}.style()}.width('100%').height(200)// .columnsTemplate("1fr 1fr 1fr").rowsTemplate("1fr 1fr").columnsGap(10).rowsGap(10)}.width('100%')}.height('100%')}
}

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

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

相关文章

ActiveMQ Artemis 系列| High Availability 主备模式(消息复制) 版本2.19.1

一、ActiveMQ Artemis 介绍 Apache ActiveMQ Artemis 是一个高性能的开源消息代理,它完全符合 Java Message Service (JMS) 2.0 规范,并支持多种通信协议,包括 AMQP、MQTT、STOMP 和 OpenWire 等。ActiveMQ Artemis 由 Apache Software Foun…

小白从0学习ctf(web安全)

文章目录 前言一、baby lfi(bugku-CTF)1、简介2、解题思路1、解题前置知识点2、漏洞利用 二、baby lfi 2(bugku-CTF)1.解题思路1、漏洞利用 三、lfi(bugku CTF)1、解题思路1、漏洞利用 总结 前言 此文章是…

瓷砖通铺选择亮面还是哑光?了解这6点不难选。福州中宅装饰,福州装修

选择瓷砖通铺亮面还是哑光,可以从多个角度来考虑: ①空间感觉 亮面瓷砖通常会使空间看起来更加宽敞和明亮,而哑光瓷砖则给人大气、稳重的感觉。如果希望让空间显得更加宽敞,亮面瓷砖是一个不错的选择。 ②清洁与维护 亮面瓷砖更…

云电脑安全性怎么样?企业如何选择安全的云电脑

云电脑在保障企业数字资产安全方面,采取了一系列严谨而全面的措施。随着企业对于数字化转型的深入推进,数字资产的安全问题日益凸显,而云电脑作为一种新兴的办公模式,正是为解决这一问题而生。云电脑安全吗?可以放心使…

React系列之合成事件与事件处理机制

文章目录 React事件处理机制原生事件的事件机制事件代理(事件委托) 合成事件使用合成事件目的合成事件原生事件区别事件池 原生事件和React事件的执行顺序e.stopPropagation() React17事件机制的修改 React事件处理机制 react 事件机制基本理解&#xf…

C++ :STL中deque的原理

deque的结构类似于哈希表,使用一个指针数组存储固定大小的数组首地址,当数据分布不均匀时将指针数组内的数据进行偏移,桶不够用的时候会像vector一样扩容然后将之前数组中存储的指针拷贝过来,从原理可以看出deque的性能是非常高的…

docker部署-RabbitMq

1. 参考 RabbitMq官网 docker官网 2. 拉取镜像 这里改为自己需要的版本即可,下面容器也需要同理修改 docker pull rabbitmq:3.12-management3. 运行容器 docker run \ --namemy-rabbitmq-01 \ -p 5672:5672 \ -p 15672:15672 \ -d \ --restart always \ -…

java入门学习Day01

本篇文章主要是学会如何使用IDEA,和运行第一个java文件。 java环境安装:Windows下Java环境配置教程_windows java环境配置-CSDN博客 IDEA安装:IDEA 2023.2.5 最新激活码,注册码(亲测好用) - 异常教程 以上两个链接…

C++—vector的介绍及使用 vector的模拟实现

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 文章目录 前言 一、vector的介绍及使用 1.1 vector的介绍 1.2 vector的使用 1.2.1 vector的定义 1.2.2 vector iterator 的使用 1.2.3 vector 空间增长问题 1.2.4 vecto…

JVM 八股(一)

JVM 1.类装载的执行过程 加载: 元空间存储构造函数,方法,字段等 验证 准备 解析 初始化 使用 2.垃圾回收 什么是垃圾回收?怎样找到这些垃圾?找到垃圾后是怎么清除的(垃圾回收算法)&#x…

一篇搞定AVL树+旋转【附图详解旋转思想】

🎉个人名片: 🐼作者简介:一名乐于分享在学习道路上收获的大二在校生 🙈个人主页🎉:GOTXX 🐼个人WeChat:ILXOXVJE 🐼本文由GOTXX原创,首发CSDN&…

【C语言】贪吃蛇【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、游戏说明: 一个基于C语言链表开发的贪吃蛇游戏: 1. 按方向键上下左右,可以实现蛇移动方向的改变。 2. 短时间长按方向键上下左右其中之一,可实现蛇向该方向的短时间…

智能指针(C++11)

智能指针的使用 问题 我们在平时写程序的时候,有些情况下不可避免地会遇见内存泄露的情况。内存泄露是指因为疏忽或错误,造成程序未能释放已经不再使用的内存的情况。例如下面这个例子,内存泄漏不易被察觉。 int div() {int a, b;cin >…

【复习linux相关命令】

查看命令位置,查找命令 which命令 查看命令的位置 [rootVM-12-15-opencloudos ~]# which cd /usr/bin/cd [rootVM-12-15-opencloudos ~]# which java /usr/local/java/jdk1.8.0_261/bin/java [rootVM-12-15-opencloudos ~]# which pwd /usr/bin/pwdfind查找文件 …

element+Vue2,在一个页面跳转到另一个页面,并自动选中table的某一行

需求:点击A页面的某处,跳转到B页面并选中B页面表格的某一行(点击B页面的搜索后需要清空默认选择的状态)环境:vue2、element的table,table允许多选知识点:主要使用到table的这两属性:…

Diffusion添加噪声noise的方式有哪些?怎么向图像中添加噪声?

添加噪声的方式大致分为两种,一种是每张图像在任意timestep都加入一样的均匀噪声,另一种是按照timestep添加不同程度的噪声 一、在任意timestep都加入一样的noise batch_size 32x_start torch.rand(batch_size,3,256,256) noise torch.randn_like(x_…

亚信安全荣获2023年度5G创新应用评优活动两项大奖

近日,“关于2023 年度5G 创新应用评优活动评选结果”正式公布,亚信安全凭借在5G安全领域的深厚积累和创新实践,成功荣获“5G技术创新的优秀代表”和“5G应用创新的杰出实践”两项大奖。 面向异构安全能力的5G安全自动化响应系统 作为5G技术创…

【Mybatis 基础】增删改查(@Insert, @Delete, @Update, @Select)

Mybatis Insert Delete Update Select Mybatis用法基础操作 - 删除delete 传参SpringbootMybatisCrudApplicationTests 测试类删除预编译SQL 基础操作 - 插入Insert 插入SpringbootMybatisCrudApplicationTests 测试类插入对象主键返回 基础操作 - 更新UPDATE 更新SpringbootMy…

Python进阶编程 --- 1.类和对象

文章目录 第一章:1.初始对象1.1 使用对象组织数据1.2 类的成员方法1.2.1 类的定义和使用1.2.2 创建类对象1.2.3 成员变量和成员方法1.2.4 成员方法的定义语法1.2.5 注意事项 1.3 类和对象1.3.1 基于类创建对象 1.4 构造方法1.5 其他内置方法1.5.1 魔术方法str字符串…

(南京观海微电子)——DDIC显示触控芯片介绍

显示驱动芯片(Display Driver Integrated Circuit,简称DDIC)的主要功能是控制OLED显示面板。它需要配合OLED显示屏实现轻薄、弹性和可折叠,并提供广色域和高保真的显示信号。同时,OLED要求实现比LCD更低的功耗&#xf…