【鸿蒙开发】ArkTs布局(下)----面试题库

devtools/2024/11/24 7:56:00/

系列文章目录

鸿蒙开发】ArkTs布局(上)----面试题库


文章目录

  • 系列文章目录
  • 一、什么是层叠布局(堆叠)?
  • 二、什么是网格布局?
  • 三、什么是相对布局?
  • 四、什么是栅格布局?


一、什么是层叠布局(堆叠)?

●层叠布局通过 Stack 容器组件实现位置的固定定位与层叠,容器中的子元素依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。
Stack组件为容器组件,容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下。
在这里插入图片描述
● Stack组件通过alignContent参数实现位置的相对移动,设置子组件的位置。

@Entry
@Component
struct StackExample {build() {Stack({ alignContent: Alignment.TopStart }) {Text('Stack').width('90%').height('100%').backgroundColor('#e1dede').align(Alignment.BottomEnd)Text('Item 1').width('70%').height('80%').backgroundColor(0xd2cab3).align(Alignment.BottomEnd)Text('Item 2').width('50%').height('60%').backgroundColor(0xc1cbac).align(Alignment.BottomEnd)}.width('100%').height(150).margin({ top: 5 })}
}

二、什么是网格布局?

网格布局是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。

● ArkUI提供了Grid容器组件和子组件GridItem,用于构建网格布局。

Grid() {GridItem() {Text('签到')...}GridItem() {...}
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

三、什么是相对布局?

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。

• 锚点:通过锚点设置当前元素基于哪个元素确定位置。
• 对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。

RelativeContainer父组件为锚点,__container__代表父容器的ID。

@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#ff3339ff').alignRules({top: {anchor: "__container__", align: VerticalAlign.Top},left: {anchor: "__container__", align: HorizontalAlign.Start}}).id("row1")Row(){Text('row2')}.justifyContent(FlexAlign.Center).width(100).backgroundColor('#ff298e1e').alignRules({top: {anchor: "__container__", align: VerticalAlign.Top},right: {anchor: "__container__", align: HorizontalAlign.End},bottom: {anchor: "row1", align: VerticalAlign.Center},}).id("row2")Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100).backgroundColor('#ffff6a33').alignRules({top: {anchor: "row1", align: VerticalAlign.Bottom},left: {anchor: "row1", align: HorizontalAlign.Start},right: {anchor: "row2", align: HorizontalAlign.Start}}).id("row3")}}.height('100%')}
}    

四、什么是栅格布局?

栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。
栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。
• GridRow为栅格容器组件,需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:

断点名称取值范围(vp)
xs[0, 320)
sm[320, 520)
md[520, 840)
lg[840, +∞)
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({breakpoints: {value: ['200vp', '300vp', '400vp', '500vp', '600vp'],reference: BreakpointsReference.WindowSize}
}) {ForEach(this.bgColors, (color:Color, index?:number|undefined) => {GridCol({span: {xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。}}) {Row() {Text(`${index}`)}.width("100%").height('50vp')}.backgroundColor(color)})
}                                                                    

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

相关文章

NUXT3学习日记四(路由中间件、导航守卫)

前言 在 Nuxt 3 中,中间件(Middleware)是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑,像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用,也可以只在特定页…

Transformer架构笔记

Attention is All You Need. 3.Model Architecture 3.1 整体架构如图 3.2 Encoder与Decoder Encoder:由 N 6 N6 N6个相同的Block/Layer堆叠而成。每个Block有两个子层sub-layer:多头注意力和MLP(FFN,前馈神经网络)&…

C++线程调用顺序的一些误区,以及线程资源的释放

1、 线程理解误区 #include <pthread.h> #include <stdio.h> #include <stdlib.h> pthread_mutex_t mutex1 PTHREAD_MUTEX_INITIALIZER; pthread_mutex_t mutex2 PTHREAD_MUTEX_INITIALIZER; void* thread1_function(void* arg) {pthread_mutex_lock(&…

Node.js笔记(三)局域网聊天室构建1

目标 用户与服务端建立通信&#xff0c;服务端能检测到用户端的连接信息 代码 JS部分<chatroom.js> const express require(express) const http require(http) const {Server} require(socket.io)const app express() const se…

开源宝藏:Smart-Admin 重复提交防护的 AOP 切面实现详解

首先&#xff0c;说下重复提交问题&#xff0c;基本上解决方案&#xff0c;核心都是根据URL、参数、token等&#xff0c;有一个唯一值检验是否重复提交。 而下面这个是根据用户id&#xff0c;唯一值进行判定&#xff0c;使用两种缓存方式&#xff0c;redis和caffeine&#xff…

2024亚太杯C题宠物行业及相关产业的发展分析和策略——成品参考思路模型代码

更多资源请关注下方名片获取 1 总体分析 1.1 问题背景&#xff1a; 随着人们消费理念的发展&#xff0c;宠物行业这一新兴产业在全球范围内逐渐兴起&#xff0c;得益于经济的快速发展和人均收入的提升。1992年&#xff0c;中国小动物保护协会成立&#xff0c;随后国际宠物品…

【Ubuntu】如何在Ubuntu系统中查看端口是否可用

文章目录 前言一、使用netstat命令二、使用ss命令三、使用lsof命令四、使用nc&#xff08;netcat&#xff09;命令总结 前言 本文介绍了如何在Ubuntu系统中查看端口是否可用的方法&#xff0c;并给出了具体的命令示例&#xff0c;帮助用户通过命令行工具检测端口的开放状态。 …

论文阅读:SIMBA: single-cell embedding along with features

Chen, H., Ryu, J., Vinyard, M.E. et al. SIMBA: single-cell embedding along with features. Nat Methods 21, 1003–1013 (2024). 论文地址&#xff1a;https://doi.org/10.1038/s41592-023-01899-8 代码地址&#xff1a;https://github.com/pinellolab/simba. 摘要 大多…