38.HarmonyOS鸿蒙系统 App(ArkUI)堆叠布局结合弹性布局

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

层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。

线性布局参考 icon-default.png?t=N7T8https://txwtech.blog.csdn.net/article/details/137186122

 

import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
@Entry
@Component
struct Index {
  private arr_value:string[] = ['AP1','AP2','AP3','AP4','AP5','AP6','AP7','AP8'];
  @State message: string = '调试'
  @State message2: string = '测试'
  @State message3: string = 'demo by txwtech'
  @State handlePopup2:boolean = false

 //堆叠布局示范,堆叠布局放两个弹性布局
  build() {
   // Stack({}){
   //   Column(){}.width('80%').height('70%').backgroundColor(Color.Blue)//线性布局在底层
   //   Text('堆叠布局').width('99%').height(100).margin({top:5}).backgroundColor(Color.Yellow) //text在中层
   //   Button('按钮').width('80%').height(100).margin({top:50})//按钮在最上层
   // }
    //堆叠结合弹性布局
    Stack({alignContent:Alignment.Bottom}){
      Flex({wrap:FlexWrap.Wrap}){ //弹性布局
        ForEach(this.arr_value,(item)=>{
          Text(item)
            .width(100)
            .height(100)
            .fontSize(18)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(Color.Green)
          Text(' ')

        },item=>item)

      }.width('100%').height('100%')
      Flex({justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center}){
        Text('信息').fontSize(18).fontColor(Color.White)
        Text('通知').fontSize(18).fontColor(Color.White)
        Text('设置').fontSize(18).fontColor(Color.White)
      }
      .width('50%')
      .height(50)
      .backgroundColor(Color.Blue)
      .margin({bottom:20})
      .borderRadius(20)

    }.width('100%').height('100%').backgroundColor(Color.Gray)




  }
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

神经网络与深度学习(一)误差反传BP算法

误差反传BP算法 1多层感知机1.1XOR问题1.2多层感知机 2.BP算法2.1简述2.2详解2.2.1输入输出模型2.2.2梯度下降算法迭代2.2.3前向传播在输出端计算误差2.2.4误差反传--输出层2.2.5误差反传--隐含层2.2.6误差反传--总结 1多层感知机 1.1XOR问题 线性不可分问题: 无法…

正弦实时数据库(SinRTDB)的使用(10)-数据文件的无损压缩

前文已经将正弦实时数据库的使用进行了介绍,需要了解的可以先看下面的博客: 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…

LabVIEW双通道太阳射电频谱观测系统

LabVIEW双通道太阳射电频谱观测系统 开发了一个基于LabVIEW平台开发的双通道高速太阳射电频谱观测系统。该系统实时监测太阳射电爆发,具有随机性、持续时间短、变化快等特点。通过高速信号采集卡实现1.5 GS/s的信号采集,时间分辨率可达4ms,频…

jvm类加载机制概述

、什么是jvm的类加载机制 类加载机制是指我们将类的字节码文件所包含的数据读入内存,同时我们会生成数据的访问入口的一种 特殊机制。那么我们可以得知,类加载的最终产品是数据访问入口。 加载类文件(即.class文件)的方式有以下几…

ChatGPT chrome扩展下载与安装

官方下载地址 https://chromewebstore.google.com/detail/lpbhmlbicmgjpacbofijdfpcplfhakeo 截图 安装 离线安装 下载地址 https://static.xutongbao.top/app/chatgpt-chrome-crx-v0.0.7.zip 打开链接 chrome://extensions/ 人工智能学习网站 https://chat.xutongbao.to…

获取电商数据的几种方法分享

在数字化时代,电商数据已经成为企业决策的重要依据。无论是市场趋势的洞察、用户行为的分析,还是产品优化和营销策略的制定,都离不开电商数据的支持。本文将分享几种获取电商数据的有效方法,力求在干货满满的同时,也不…

精通【PHP循环结构知识】

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

怎么打包出release.aar包

第一种 选择build variant 更改成release 第二钟 在gradle中选择相应任务来编译 选择assemble release如果没有这个选项,可能是你没有开启那个Task 收集的选项

Acrobat Pro DC 2023 for Mac PDF编辑管理软件

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑和管理软件,旨在帮助用户轻松处理PDF文件。它提供了丰富的工具和功能,使用户可以创建、编辑、转换和注释PDF文件,以及填写和签署PDF表单。 软件下载:Acrobat Pro DC 2023 for …

2024年泰迪杯数据挖掘B题详细思路代码文章教程

目前b题已全部更新包含详细的代码模型和文章,本文也给出了结果展示和使用模型说明。 同时文章最下方包含详细的视频教学获取方式,手把手保姆级,模型高精度,结果有保障! 分析: 本题待解决问题 目标&#…

QT-左框选项卡软件界面框架

QT-左框选项卡软件界面框架 一、演示效果二、关键程序三、下载链接 一、演示效果 二、关键程序 #include <QTextBrowser> #include <QLabel> #include <QPushButton> #include <QSpacerItem> #include <QToolButton> #include <QDebug> #i…

Ribbon有哪些负载均衡策略

负载均衡类都实现了IRule接口。 RandomRule&#xff1a;随机的选用一个实例 RoundRobinRule&#xff1a;轮询的使用实例 RetryRule&#xff1a;在轮询的基础上加了一个错误重试机制&#xff0c;在deadline时间内会不断的重试 WeightResponeTimeRule&#xff1a;根据权重去做…

WebGIS 之 vue3+vite+ceisum

1.项目搭建node版本在16以上 1.1创建项目 npm create vite 项目名 1.2选择框架 vuejavaScript 1.3进入项目安装依赖 cd 项目名 npm install 1.4安装cesium依赖 pnpm i cesium vite-plugin-cesium 1.5修改vite.config.js文件 import { defineConfig } from vite import vue fr…

【Docker笔记05】【网络模式】

一、前言 本系列是根据 B 站 尚硅谷 Docker 视频 学习记录笔记。因为没有视频课件&#xff0c;部分内容摘自 https://www.yuque.com/tmfl/cloud/dketq0。 本系列仅为自身学习笔记记录使用&#xff0c;记录存在偏差&#xff0c;推荐阅读原视频内容或本文参考笔记。 二、简单介…

0.5米多光谱卫星影像在农业中进行地物非粮化、非农化监测

一、引言 随着科技的发展&#xff0c;卫星遥感技术已经成为了农业领域中重要的数据来源。其中&#xff0c;多光谱卫星影像以其独特的优势&#xff0c;在农业应用中发挥着越来越重要的作用。本文将重点探讨0.5米加2米多光谱卫星影像在农业中的应用。 二、多光谱卫星影像概述 多…

金融汽车科技LLM

汇丰银行 众安保险 1. AIGC重塑保险价值链 小额高频 2.构建智能应用的技术方案演进 增加微服务 长记忆&#xff1a;向量库短记忆&#xff1a;对话历史&#xff0c;思考路径&#xff0c;执行历史 中台架构设计 蔚来汽车在大模型的应用实践 公司介绍 应用架构 应用实践 4.大…

【洛谷 P8700】[蓝桥杯 2019 国 B] 解谜游戏 题解(字符串+映射+周期性)

[蓝桥杯 2019 国 B] 解谜游戏 题目背景 题目描述 小明正在玩一款解谜游戏。谜题由 24 24 24 根塑料棒组成&#xff0c;其中黄色塑料棒 4 4 4 根&#xff0c;红色 8 8 8 根&#xff0c;绿色 12 12 12 根 (后面用 Y 表示黄色、R 表示红色、G 表示绿色)。初始时这些塑料棒排…

学习率对精度和损失的影响研究

1 问题 在学习深度学习的过程中&#xff0c;欲探究优化器的学习率对精度和损失的影响。 2 方法 测试不同学习率下网络的性能。 控制其余变量&#xff1a; Beach_size256optimizer torch.optim.SGD网络为三层全连接网络&#xff08;784->512->10&#xff09;训练周期100 …

MySQL MHA高可用数据库

文章目录 MySQL MHA高可用数据库搭建MySQL MHA模拟故障故障修复&#xff1a; MySQL MHA高可用数据库 MHA&#xff08;MySQL High Availability&#xff09;是一个开源的高可用解决方案&#xff0c;用于实现MySQL主从复制集群的故障自动切换。MHA的主要目的是确保MySQL数据库集…

规划控制如何兼顾安全与舒适性

规划控制如何兼顾安全与舒适性 附赠自动驾驶学习资料和量产经验&#xff1a;链接 **导读&#xff1a;**自动驾驶技术研发对于“安全第一”的追求是毋庸置疑的&#xff0c;但是这中间可能就忽视了舒适性。 因此&#xff0c;今天我想给大家分享的是&#xff0c;自动驾驶研发如何…