UI(三)布局

文章目录

          • 1、Colum和Row——垂直方向容器和水平方向容器
          • 2、ColumnSplit和RowSplit——子组件之间插入一条分割线
          • 3、Flex——弹性布局子组件的容器
          • 4、Grid和GridItem——网格容器和网格容器单元格
          • 5、GridRow和GridCol——栅格容器组件和栅格子组件
          • 6、List、ListItem、ListItemGroup——列表 、列表单条、列表item分组
          • 7、AlphabetIndexer——与容器组件联动进行快速定位
          • 8、Badge——信息标记的气泡
          • 9、Counter——计算器组件

1、Colum和Row——垂直方向容器和水平方向容器
space子组件水平或者垂直方向的间距
alignItem水平或者垂直方向的对齐
justifyContent水平或者垂直方向的对齐
//水平设置组件的间距为30
Row({space:30}){   //sapce表示元素间的间距Row().width('30%').height(50).backgroundColor(Color.Yellow)Row().width('30%').height(50).backgroundColor(Color.Blue)
}.width('100%').height('10%').border({width:1,color:Color.Red})//设置子元素垂直方向的对齐方式
Row(){Row().width('30%').height(50).backgroundColor(Color.Green)Row().width('40%').height(50).backgroundColor(Color.Pink)
}.width('100%').height('10%').alignItems(VerticalAlign.Bottom).border({width:1,color:Color.Black})//设置谁品方向的对齐
Row(){Row().width('30%').height(50).backgroundColor(Color.Pink)Row().width('30%').height(50).backgroundColor(Color.Brown)
}.width('100%').height('10%').justifyContent(FlexAlign.Start).border({width:1,color:Color.Red})

image.png

2、ColumnSplit和RowSplit——子组件之间插入一条分割线

ColumnSplit 横向分割线 rowSplit纵向分割线

RowSplit(){Text('沉舟侧畔千帆过').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('病树前头万木春').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('今日听君歌一曲').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('暂凭杯酒长精神').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})
}
.resizeable(true)
.width('90%')
.height(400)

image.png

3、Flex——弹性布局子组件的容器
direction子组件在Flex容器上排列的方向,即主轴方向
wrapFlex容易以单行单列,还是多行多列
justifyContent子组件在Flex容器主轴上的对齐格式
alignItems子组件在Flex容器交叉轴上的对齐格式
alignContent交叉轴中有额外的空间时,多行内容的对齐方式,仅在wrap为wrap或者wrapReverse时生效
Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap,alignContent:FlexAlign.Center}){Text('沉舟侧畔千帆过').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('病树前头万木春').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('今日听君歌一曲').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})Text('暂凭杯酒长精神').width('10%').height(400).backgroundColor(Color.Red).fontColor(Color.White).padding({left:8,right:8})}
.height(400)
.width('100%')
.backgroundColor(Color.Pink)

image.png

4、Grid和GridItem——网格容器和网格容器单元格
 Grid(){ForEach(this.numsArr,(index:string) => {GridItem(){Text(index).fontSize(20).backgroundColor(Color.Pink).width('100%').height('100%').textAlign(TextAlign.Center)}},index => index)}/*** columnsTemplate 用来设置当前网格布局列的数量 ,不设置时默认为1列* ‘1fr 1fr 1fr 2fr’ 表示将父组件分为4列,前三分各占1列,第四份占两列*/.columnsTemplate('1fr 1fr 1fr 1fr 2fr')  // 设置当前网格布局列的数量.rowsTemplate('1fr 1fr 1fr 1fr 1fr')  // 设置网格布局行的数量.columnsGap(10).rowsGap(20).width('90%').backgroundColor(Color.Yellow).height(300)

image.png

5、GridRow和GridCol——栅格容器组件和栅格子组件

GridRow栅格容器组件 仅可以和栅格子组件GridCol在栅格布局场景中使用


private colorArr: Color[] = [Color.Red,Color.Blue,Color.Brown,Color.Green,Color.Orange,Color.Pink,Color.Grey];GridRow({columns:5,   //设置布局列数gutter:{x:5,y:20}, //栅格布局间距,X代表水平方向 Y代表垂直方向breakpoints:{value:['400vp','600vp','800vp'], //断点发生变化时触发回调reference:BreakpointsReference.WindowSize},direction:GridRowDirection.RowReverse  // 栅格布局排列方向
}){ForEach(this.colorArr,(color) => {GridCol({span:{xs:1,sm:2,md:3,lg:4}}){Row().width('100%').height('80vp')}.borderColor(color).borderWidth(2).backgroundColor(color)})
}.width('100%').height('100%')

image.png

6、List、ListItem、ListItemGroup——列表 、列表单条、列表item分组

List可以包含ListItem和ListItemGroup子组件,ListItem用来展示列表具体Item,必须配合List来使用,ListItemGroup组件用来展示列表item分组,宽度默认充满List组件,必须配合List组件来使用。


private classListData: any = [{title:'周一',projects:['语文','数学','音乐']},{title:'周二',projects:['化学','政治','地理']},{title:'周三',projects:['体育','计算机','数学']},{title:'周四',projects:['音乐','美术','历史']}]List({space:2}){ForEach(this.classListData,(item) => {ListItemGroup(){ForEach(item.projects,(projects) => {ListItem(){Text(projects).width('100%').height(30).fontSize(20).textAlign(TextAlign.Center)}}, item => item)}.borderRadius(2).divider({strokeWidth:2,color:Color.Blue})  //ListItemGroup分割线})
}
.divider({strokeWidth:5,color:Color.Red}) //List分割线
.width('100%')

image.png

7、AlphabetIndexer——与容器组件联动进行快速定位

AlphabetIndexer是可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

private alphabetIndexerArrayA: string[] = ['安']
private alphabetIndexerArrayB: string[] = ['卜', '白', '包', '毕', '丙']
private alphabetIndexerArrayC: string[] = ['曹', '成', '陈', '催']
private alphabetIndexerArrayL: string[] = ['刘', '李', '楼', '梁', '雷', '吕', '柳', '卢']
private alphabetIndexerArrayValue: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G','H', 'I', 'J', 'K', 'L', 'M', 'N','O', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z']Row(){List({space:10,initialIndex:0}){ForEach(this.alphabetIndexerArrayA,(item) => {ListItem(){Text(item).width('100%').height('5%').fontSize(20).textAlign(TextAlign.Center)}},item => item)ForEach(this.alphabetIndexerArrayB,(item) => {ListItem(){Text(item).width('100%').height('5%').fontSize(20).textAlign(TextAlign.Center)}},item => item)ForEach(this.alphabetIndexerArrayC,(item) => {ListItem(){Text(item).width('100%').height('5%').fontSize(20).textAlign(TextAlign.Center)}},item => item)ForEach(this.alphabetIndexerArrayL,(item) => {ListItem(){Text(item).width('100%').height('5%').fontSize(20).textAlign(TextAlign.Center)}},item => item)}.width('50%').height('100%')AlphabetIndexer({arrayValue:this.alphabetIndexerArrayValue,selected:0}).selectedColor(Color.Red)   //选中框文本颜色.popupColor(Color.Blue)   // 弹出框文本颜色.selectedBackgroundColor(Color.Yellow)  //选中框北京颜色.popupBackground(Color.Green) //弹出框背景颜色.usingPopup(true)   //是否使用弹出框.selectedFont({size:16,weight:FontWeight.Bolder}) //选中字体设置.popupFont({size:30,weight:FontWeight.Bold}) // 弹出字体设置.itemSize(28).alignStyle(IndexerAlign.Left)   //弹出框在索引条左侧弹出.onRequestPopupData((index:number) => {if(this.alphabetIndexerArrayValue[index] == 'A'){return this.alphabetIndexerArrayA}else if(this.alphabetIndexerArrayValue[index] == 'B'){return this.alphabetIndexerArrayB}else if(this.alphabetIndexerArrayValue[index] == 'C'){return this.alphabetIndexerArrayC}else if(this.alphabetIndexerArrayValue[index] == 'L'){return this.alphabetIndexerArrayL}else {return []}})}.width('100%').height('100%')

格式工厂 屏幕录像20240627_171006 00_00_02-00_00_15.gif

8、Badge——信息标记的气泡

Badge是可以附加在单个组件上用于信息标记的容器组件
构造函数主要有四个参数

count设置提示消息数
position设置提示点的位置(RightTop,Right,Left)
maxCount最大消息数,超过最大消息数则显示最大消息数
style样式,支持文本颜色和尺寸以及圆点颜色和尺寸
Badge({value:'5',style:{badgeSize:16,badgeColor:Color.Red}
}){Image($r('app.media.icon')).width(60).height(60)
}Badge({value:'new',position:BadgePosition.Left,style:{badgeColor:Color.Blue,badgeSize:20}
}){Text('消息数量').fontSize(20).width(160).height(40)
}
.width(160)
.height(40)

image.png

9、Counter——计算器组件

counter是计数器组件,提供相应的增加或者减少的计数操作

Counter(){Text(this.countNum.toString())
}
.margin(20)
.onInc(() => {   //监听数值增加事件this.countNum++})
.onDec(() => {  //监听数值减小事件this.countNum--
})

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

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

相关文章

力扣每日一题 6/28 动态规划/数组

博客主页:誓则盟约系列专栏:IT竞赛 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 2742.给墙壁刷油漆【困难】 题目: 给你两个长度为 n 下标从 0…

密码学及其应用 —— 非对称加密/公匙密码技术

1 RSA加密算法 RSA加密算法是一种基于公钥密码学的加密技术,由罗纳德里维斯特(Ron Rivest)、阿迪萨莫尔(Adi Shamir)和伦纳德阿德曼(Leonard Adleman)在1977年共同发明。RSA算法是第一个既能用于…

C++ sizeof的各种

C sizeof的各种 1. 含有虚函数的类对象的空间大小2. 虚拟继承的类对象的空间大小3. 普通变量所占空间大小4. 复合数据类型(结构体和类)5. 数组6. 类型别名7. 动态分配内存8. 指针9. 静态变量10. 联合体11. 结构体使用#program pack 1. 含有虚函数的类对象…

如何用 php 实现邮件发送功能

一、使用 PHPMailer 发送邮件 1、需要先安装 PHPMailer 库。你可以使用 Composer 来安装它&#xff1a; composer require phpmailer/phpmailer2、安装完成后&#xff0c;可以创建一个简单的 PHP 脚本来发送邮件。以下是一个示例脚本&#xff1a; <?php use PHPMailer\P…

RuoYi_Cloud本地搭建

1.进入若依官网获取git地址 &#xff08;1&#xff09;百度搜“若依官网进”入如下界面 &#xff08;2&#xff09;点击进入git&#xff0c;点克隆下载 &#xff08;3&#xff09;复制http地址 2.在git链接在idea本地打开 &#xff08;1&#xff09;返回桌面——右键&#xf…

金属波纹管

金属波纹管是一种外型规则的波浪样的管材&#xff0c;常用的金属波纹管有碳钢的&#xff0c;和不锈钢的&#xff0c;也有钢质衬塑的、铝质的等等。这种管材主要用于需要很小的弯曲半径非同心轴向传动&#xff0c;或者不规则转弯、伸缩&#xff0c;或者吸收管道的热变形等&#…

大数据面试题之HBase(1)

目录 介绍下HBase HBase优缺点 说下HBase原理 介绍下HBase架构 HBase读写数据流程 HBase的读写缓存 在删除HBase中的一个数据的时候&#xff0c;它什么时候真正的进行删除呢?当你进行删除操作&#xff0c;它是立马就把数据删除掉了吗? HBase中的二级索引 HBa…

数据结构历年考研真题对应知识点(数组和特殊矩阵)

目录 3.4数组和特殊矩阵 3.4.2数组的存储结构 【二维数组按行优先存储的下标对应关系(2021)】 3.4.3特殊矩阵的压缩存储 【对称矩阵压缩存储的下标对应关系(2018、2020)】 【上三角矩阵采用行优先存储的应用(2011)】 【三对角矩阵压缩存储的下标对应关系(2016)】 3.4.…

python中Mysql的模糊查询

1.方法一&#xff1a;使用pymysql库的方法 当在Python中使用MySQL进行模糊查询时&#xff0c;我们通常会使用pymysql或mysql-connector-python这样的库来连接MySQL数据库并执行查询。以下是一个使用pymysql进行模糊查询的详细示例&#xff0c;包括安装库、连接数据库、执行查询…

为什么有的手机卡没有语音功能呢?

大家好&#xff0c;今天这篇文章为大家介绍一下&#xff0c;无通话功能的手机卡&#xff0c; 在网上申请过手机卡的朋友应该都知道&#xff0c;现在有这么一种手机卡&#xff0c;虽然是运营商推出的正规号卡&#xff0c;但是却屏蔽了通话功能&#xff0c;你知道这是为什么吗&am…

自组装mid360便捷化bag包采集设备

一、问题一&#xff1a;电脑太重&#xff0c;换nuc 采集mid360数据的过程中&#xff0c;发现了头疼的问题&#xff0c;得一手拿着电脑&#xff0c;一手拿着mid360来采集&#xff0c;实在是累胳膊。因此&#xff0c;网购了一个intel nuc, 具体型号是12wshi5000华尔街峡谷nuc12i…

何时使用查询字符串参数和路径参数_2024-06-28

REST API 已成为构建和使用 Web 服务的标准。在设计 REST API 时&#xff0c;一个重要方面是决定如何构造 URL 和参数。向 API 传递参数的两种常见方法是通过查询字符串参数和路径参数。本文将解释这两种方法之间的区别、何时使用每种方法&#xff0c;并提供示例来说明它们的用…

二刷算法训练营Day45 | 动态规划(7/17)

目录 详细布置&#xff1a; 1. 139. 单词拆分 2. 多重背包理论基础 3. 背包总结 3.1 背包递推公式 3.2 遍历顺序 01背包 完全背包 详细布置&#xff1a; 1. 139. 单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单…

昇思25天学习打卡营第6天|linchenfengxue

​​​​​​SSD目标检测 SSD&#xff0c;全称Single Shot MultiBox Detector&#xff0c;是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上&#xff0c;SSD对于输入尺寸300x300的网络&#xff0c;达到74.3%mAP(mean Average Precision)以…

刷题Day37|416. 分割等和子集

416. 分割等和子集 题目&#xff1a;416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;0-1背包问题&#xff0c;重量和价值一样&#xff0c;每个元素只能使用一次&#xff0c;装满背包且最大价值为sum/2就是true 。dp[target] target返回true。 …

nginx架构基本数据结构配置模块请求详解

nginx源码的目录结构&#xff1a; . ├── auto 自动检测系统环境以及编译相关的脚本 │ ├── cc 关于编译器相关的编译选项的检测脚本 │ ├── lib nginx编译所需要的一些库的检测脚本 │ ├── os 与平台相关的一些系统参…

端口扫描攻击检测及防御方案

端口扫描数据一旦落入坏人之手&#xff0c;可能会成为更大规模恶意活动的一部分。因此&#xff0c;了解如何检测和防御端口扫描攻击至关重要。 端口扫描用于确定网络上的端口是否开放以接收来自其他设备的数据包&#xff0c;这有助于网络安全团队加强防御。但恶意行为者也可以…

ubuntu 18 虚拟机安装(5) postgres sql 数据库 简单 应用

ubuntu 18 虚拟机安装&#xff08;5&#xff09; postgres sql 数据库 简单 应用 参考 PostgreSQL的基本使用整理 https://blog.csdn.net/qq_45658339/article/details/124431612 sudo su - postgres psqlsudo -u postgres psqlsudo systemctl status postgresql sudo syste…

50-1 内网渗透 - 未引用的服务路径提权

一、未引用的服务路径介绍 未引用的服务路径(Unquoted Service Path)漏洞利用了Windows文件路径解析的特性。当服务启动时,如果其执行文件路径中包含空格并且未包含在引号中,就可能导致此漏洞的发生。 具体来说,如果完整路径中包含空格且未使用引号括起来,Windows将按顺…

zabbix-server的搭建

zabbix-server的搭建 部署 zabbix 服务端(192.168.99.180) rpm -ivh https://mirrors.aliyun.com/zabbix/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm cd /etc/yum.repos.d sed -i s#http://repo.zabbix.com#https://mirrors.aliyun.com/zabbix# zabbix.r…