当前位置: 首页 > news >正文

海外营销网站建设/手机关键词点击排名软件

海外营销网站建设,手机关键词点击排名软件,什么是网站的权重,基于5G的网站设计arkUI:层叠布局(Stack) 1 主要内容说明2 相关内容2.1 层叠布局(Stack)2.1.1 源码1的相关说明2.1.2 源码1 (层叠布局)2.1.3 源码1运行效果2.1.3.1 当alignContent: Alignment.Bottom2.1.3.2 当al…

arkUI:层叠布局(Stack)

  • 1 主要内容说明
  • 2 相关内容
    • 2.1 层叠布局(Stack)
      • 2.1.1 源码1的相关说明
      • 2.1.2 源码1 (层叠布局)
      • 2.1.3 源码1运行效果
        • 2.1.3.1 当`alignContent: Alignment.Bottom`
        • 2.1.3.2 当`alignContent: Alignment.BottomStart`
        • 2.1.3.3 当`alignContent: Alignment.BottomEnd`
        • 2.1.3.4 当`alignContent: Alignment.Center`
        • 2.1.3.5 当`alignContent: Alignment.Start`
        • 2.1.3.6 当`alignContent: Alignment.End`
        • 2.1.3.7 当`alignContent: Alignment.TopStart`
        • 2.1.3.8 当`alignContent: Alignment.Top`
        • 2.1.3.9 当`alignContent: Alignment.TopEnd`
  • 3.结语
  • 4.定位日期

1 主要内容说明

在 ArkUI 中,Stack 布局是一个容器,它用于将多个子组件堆叠在一起。Stack 布局常用于实现垂直或水平的层叠效果。它的特点是所有的子组件都在同一层级上,因此会在同一空间内覆盖和堆叠。可以使用对齐属性来控制子组件在堆叠容器中的排列方式。用alignContent:来设置子组件的对齐方式。

2 相关内容

2.1 层叠布局(Stack)

层叠布局用alignContent:来设置子组件的对齐方式,对齐方式常用有9种,如下表:

开始位中位结尾位
TopStar(上左)Top(上)TopEnd(上右)
Start(左)Center(居中)End(右)
BottomStart(下左)Bottom(下)BottomEnd(下右)
  • Stack 布局是将所有子组件层叠显示的,组件间的位置相互叠加。
  • 可以通过设置 alignContent 来控制子组件的排列方式。
  • 不同于 Flex 布局,Stack 布局中的子组件不在水平或垂直方向上进行排列,而是按顺序堆叠

2.1.1 源码1的相关说明

源码1使用用了 Stack 和 Column 布局来创建一个堆叠布局,组件根据其顺序依次堆叠,并应用不同的背景颜色、宽度、高度和圆角。Stack 布局是一个容器,用于将多个子组件垂直堆叠。在这个例子中,alignContent: Alignment.Bottom 设置了子组件在堆叠时对齐到底部,意味着最后一个子组件(组件4)会紧贴容器的底部,其他子组件则会按顺序堆叠在上面。

2.1.2 源码1 (层叠布局)

@Entry
@Component
struct Page08Stack {build() {// Stack 布局,组件将垂直堆叠在一起,alignContent 设置为 Alignment.Bottom,意味着堆叠的内容会对齐到底部Stack({ alignContent: Alignment.Bottom }) {// 第一列,组件1Column() {Text("组件1").fontSize(22) // 设置文本字体大小为 22}.width("80%") // 设置列的宽度为容器宽度的 80%.backgroundColor("#86c5e3") // 设置背景色为浅蓝色.height("80%") // 设置列的高度为容器高度的 80%.borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角,上左和上右分别为 30// 第二列,组件2Column() {Text("组件2").fontSize(22) // 设置文本字体大小为 22}.width("60%") // 设置列的宽度为容器宽度的 60%.backgroundColor("#92d6cc") // 设置背景色为浅绿色.height("60%") // 设置列的高度为容器高度的 60%.borderRadius(30) // 设置圆角为 30// 第三列,组件3Column() {Text("组件3").fontSize(22) // 设置文本字体大小为 22}.width("40%") // 设置列的宽度为容器宽度的 40%.backgroundColor("#f5dc62") // 设置背景色为黄色.height("40%") // 设置列的高度为容器高度的 40%.borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角,上左和上右分别为 30// 第四列,组件4Column() {Text("组件4").fontSize(22) // 设置文本字体大小为 22}.width("20%") // 设置列的宽度为容器宽度的 20%.backgroundColor("#ff920bc8") // 设置背景色为紫色.height("20%") // 设置列的高度为容器高度的 20%}.height(300) // 设置 Stack 容器的高度为 300.width('100%') // 设置 Stack 容器的宽度为 100%(占满整个屏幕宽度).backgroundColor("#ff6ce054") // 设置 Stack 容器的背景色为浅橙色}
}

2.1.3 源码1运行效果

2.1.3.1 当alignContent: Alignment.Bottom

在这里插入图片描述

2.1.3.2 当alignContent: Alignment.BottomStart

在这里插入图片描述

2.1.3.3 当alignContent: Alignment.BottomEnd

在这里插入图片描述

2.1.3.4 当alignContent: Alignment.Center

在这里插入图片描述

2.1.3.5 当alignContent: Alignment.Start

在这里插入图片描述

2.1.3.6 当alignContent: Alignment.End

在这里插入图片描述

2.1.3.7 当alignContent: Alignment.TopStart

在这里插入图片描述

2.1.3.8 当alignContent: Alignment.Top

在这里插入图片描述

2.1.3.9 当alignContent: Alignment.TopEnd

在这里插入图片描述

3.结语

图层相关的可以用zIndex来决定图层,哪个显示前,哪个显示后。不过本文例子不适合使用,如组件3使用zIndex后就会把组件4覆盖了。
由于笔者的能力有限,创作的内容有所不足在所难免,也敬请读者包涵和指出,万分感谢!

4.定位日期

相关文章:

arkUI:层叠布局(Stack)

arkUI:层叠布局(Stack) 1 主要内容说明2 相关内容2.1 层叠布局(Stack)2.1.1 源码1的相关说明2.1.2 源码1 (层叠布局)2.1.3 源码1运行效果2.1.3.1 当alignContent: Alignment.Bottom2.1.3.2 当al…...

【LeetCode】【算法】221. 最大正方形

LeetCode 221. 最大正方形 题目描述 在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内,找到只包含 ‘1’ 的最大正方形,并返回其面积。 思路 思路:动态规划。初始化时,第0列和第0行,若nums[i][j]1则dp[i][j]初始化为1&am…...

怎麼解除IP阻止和封禁?

IP地址被阻止的原因 安全問題如果有人使用 IP 地址試圖侵入某個網站或導致其他安全問題,則可能會禁止該 IP 以保護該網站。濫用或垃圾郵件如果IP地址發送過多垃圾郵件、發佈不當內容或濫用網站服務,則可能會被禁止,以保持網站清潔和友好。違…...

O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈

O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈 O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈O-RAN前端O-RAN 前传平面C-Plane(控制平面):控制平面消息定义数据传输、波束形成等所需的调度、协调。U-Plane(用户平面)&#…...

一招解决Mac没有剪切板历史记录的问题

使用Mac的朋友肯定都为Mac的剪切功能苦恼过,旧内容覆盖新内容,导致如果有内容需要重复输入的话,就需要一次一次的重复复制粘贴,非常麻烦 但其实Mac也能够有剪切板历史记录功能,iCopy,让你的Mac也能拥有剪切…...

Node-Red二次开发:各目录结构说明及开发流程

node-red下载之前需要安装nodejs软件,然后设置环境变量; node-red下载之后,需要先安装依赖: 1. 安装依赖shell npm install # 或 yarn install 2. 运行shell npm run dev node-red的目录结构: node-red的前后端都是…...

论文阅读-Event-based Visible and Infrared Fusion via Multi-task Collaboration

一、前言 可见光图像与红外图像融合(VIF)通过结合热红外图像与可见光图像的丰富纹理,提供了一个全面可靠的场景描述。然而,传统的VIF系统可能在极端光照和高动态运动场景中捕获过曝或欠曝的图像,进而导致融合结果下降…...

Spring Boot2(Spring Boot 的Web开发 springMVC 请求处理 参数绑定 常用注解 数据传递 文件上传)

SpringBoot的web开发 静态资源映射规则 总结:只要静态资源放在类路径下: called /static (or /public or /resources or //METAINF/resources 一启动服务器就能访问到静态资源文件 springboot只需要将图片放在 static 下 就可以被访问到了 总结&…...

nginx中location模块中的root指令和alias指令区别

在 Nginx 配置中,location 模块用于定义如何处理特定请求路径。root 和 alias 是两个常用的指令,用于指定请求文件的位置,但它们有不同的行为。 root 指令 root 指令用于设置请求的根目录。当请求到来时,Nginx 会将请求的 URI 附…...

C++ 线程常见的实际场景解决方案

文章目录 一、主线程阻塞等待子线程返回1、代码示例2、代码改进 一、主线程阻塞等待子线程返回 主线程等待一个线程,此线程会开始连接一个服务器并循环读取服务器存储的值,主线程会阻塞直到连接服务器成功。因为如果不阻塞,可能上层业务刚开…...

Node.js——fs模块-文件删除

1、在Node.js中,我们可以使用unlink或unlinkSync来删除文件。 2、语法: fs.unlink(path,callback) fs.unlinkSync(path) 参数说明: path 文件路径 callback 操作后的回调函数 本文的分享到此结束,欢迎大家评论区一同讨论学…...

发布一个npm组件库包

Webpack 配置 (webpack.config.js) const path require(path); const MiniCssExtractPlugin require(mini-css-extract-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const TerserPlugin require(terser-webpack-plugin);module.exports {…...

处理PhotoShopCS5和CS6界面字体太小

处理PhotoShop CS6界面字体太小 背景:安装PhotoShop CS6后发现无法调大字体大小,特别是我的笔记本14寸的,显示的字体小到离谱。 百度好多什么降低该电脑分辨率,更改电脑的显示图标大小,或者PS里的首选项中的界面设置。…...

srs http-flv处理过程

目录 处理tcp请求,创建HttpConn 解析 http request创建consumer 读取consumer数据转封装为flv 处理tcp请求,创建HttpConn 调用堆栈如下: srs!SrsHttpConn::SrsHttpConn(ISrsHttpConnOwner*, ISrsProtocolReadWriter*, ISrsHttpServeMux*, std::__1::basic_string<ch…...

若Git子模块的远端地址发生了变化本地应该怎么调整

文章目录 前言git submodule 相关命令解决方案怎么保存子模块的版本呢总结 前言 这个问题复杂在既有Git又有子模块&#xff0c;本身Git的门槛就稍微高一点&#xff0c;再加上子模块的运用&#xff0c;一旦出现这种远端地址发生修改的情况会让人有些懵&#xff0c;不知道怎么处…...

docker运行code-servre并配置https通信

code-server 可以在浏览器中运行&#xff0c;使得开发者可以随时随地通过网络访问自己的开发环境&#xff0c;无需局限于某一台设备。只要有浏览器和网络连接&#xff0c;就可以继续编写代码和调试项目&#xff0c;非常适合远程办公和移动办公的需求。 由于每次启动code-serve…...

Linux 外设驱动 应用 4 触摸屏实验

触摸屏实验 1 触摸屏介绍1.1 基本应用介绍1.2 触摸屏工作原理介绍1.3 硬件介绍 2 应用代码编写2.1 找到输入设备2.2 打开驱动2.3 驱动查询应用2.4 应用结果 1 触摸屏介绍 1.1 基本应用介绍 LCD 显示屏包括显示屏和触摸屏&#xff0c;上层的是触摸屏&#xff0c;下层是显示屏。…...

Python-利用Pyinstaller,os库编写一个无限弹窗整蛊文件(上)

前言&#xff1a;本篇文章我们将学习一下如何利用你室友的这个习惯整蛊一下Ta,同时更重要的是借此提醒Ta要注意要做好个人信息的防泄露措施......&#xff08;声明&#xff1a;本次教学无任何不良引导&#xff09; 编程思路&#xff1a;本次编程中无限弹窗的实现我们需要调用Py…...

后台管理系统窗体程序:文章管理 > 文章列表

目录 文章列表的的功能介绍&#xff1a; 1、进入页面 2、页面内的各种功能设计 &#xff08;1&#xff09;文章表格 &#xff08;2&#xff09;删除按钮 &#xff08;3&#xff09;编辑按钮 &#xff08;4&#xff09;发表文章按钮 &#xff08;5&#xff09;所有分类下拉框 &a…...

图神经网络(GNN)入门笔记(2)——从谱域理解图卷积,ChebNet和GCN实现

一、谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09; 与谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09;对应的是空间域&#xff08;Spatial Domain&#xff09;图卷积。本节学习的谱域图卷积指的是通过频率来理解卷积的方法。 …...

接口类和抽象类在设计模式中的一些应用

C设计模式中&#xff0c;有些模式需要使用接口类&#xff08;Interface Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;来实现特定的设计目标。以下是一些常见的设计模式及其需要的原因&#xff0c;并附上相应的代码片段。 1. 策略模式&#xff08;Strateg…...

【系统架构】如何演变系统架构:从单体到微服务

引言 随着企业的发展&#xff0c;网站架构必须不断演变以应对日益增长的用户流量和复杂性需求。本文将详细探讨从单体架构到微服务架构的演变过程&#xff0c;尤其关注订单和支付服务的实现方式&#xff0c;帮助您打造一个高效、可扩展的在线平台。 步骤1&#xff1a;分离应用…...

Neo4j入门:详解Cypher查询语言中的MATCH语句

Neo4j入门&#xff1a;详解Cypher查询语言中的MATCH语句 引言什么是MATCH语句&#xff1f;示例数据1. 基础节点查询查询所有节点按标签查询节点 2. 关系查询基础关系查询指定关系方向指定关系类型 3. 使用WHERE子句4. 使用参数5. 多重MATCH和WITH子句实用技巧总结 引言 大家好…...

CPP贪心算法示例

设有n个正整数&#xff08;n ≤ 20&#xff09;&#xff0c;将它们联接成一排&#xff0c;组成一个最大的多位整数。 例如&#xff1a;n3时&#xff0c;3个整数13&#xff0c;312&#xff0c;343联接成的最大整数为&#xff1a;34331213 又如&#xff1a;n4时&#xff0c;4个整…...

GPT对NLP的冲击

让我来详细解释张俊林对GPT冲击NLP领域的分析&#xff1a; 中间任务(脚手架)的消失&#xff1a; 传统NLP中间任务&#xff1a; - 分词 - 词性标注 - 命名实体识别 - 句法分析 - 词向量学习为什么会消失&#xff1a; - GPT直接进行端到端学习 - 不需要人工定义的中间步骤 - 模…...

中值定理类证明题中对‘牛顿插值法’的应用

牛顿插值法是一种使用多项式插值的方法&#xff0c;它通过构造一个多项式来近似一组数据点。这种方法是由艾萨克牛顿提出的。牛顿插值法的一个优点是&#xff0c;当需要添加更多的数据点时&#xff0c;它不需要重新计算整个多项式&#xff0c;只需要对现有的多项式进行修改。...

HTMLCSS:3D 旋转卡片的炫酷动画

效果演示 这段代码是一个HTML和CSS的组合&#xff0c;用于创建一个具有3D效果的动画卡片。 HTML <div class"obj"><div class"objchild"><span class"inn6"><h3 class"text">我是谁&#xff1f;我在那<…...

Node.js 全栈开发进阶篇

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js- 全栈开发进阶篇 前言 大家好&#xff0c;我是青山。在上一篇文章中&#xff0c;…...

SQL语句-MySQL

数据定义声明 改变数据库语句 ALTER {DATABASE | SCHEMA} [db_name]alter_option ... ALTER {DATABASE | SCHEMA} db_nameUPGRADE DATA DIRECTORY NAMEalter_option: {[DEFAULT] CHARACTER SET [] charset_name| [DEFAULT] COLLATE [] collation_name } ALTER DATABASE使您能…...

Tencent Hunyuan3D

一、前言 腾讯于2024年11月5日正式开源了最新的MoE模型“混元Large”以及混元3D生成大模型“Hunyuan3D-1.0”&#xff0c;支持企业及开发者在精调、部署等不同场景下的使用需求。 GitHub - Tencent/Hunyuan3D-1 二、技术与原理 Hunyuan3D-1.0 是一款支持文本生成3D&#xff08;…...