鸿蒙前端-1. 层叠效果

news2024/11/28 18:55:21

代码Stack({alignContent:Alignment.Center}){
Item1()
Item2()
Item3()} 默认是居中对齐,后面的Item的优先级比前面的要高。
特点:代码简洁,效率更高(绝对定位来说的)

“设置浮动位置”指的是在界面布局中调整某个组件(在你的例子中是按钮)相对于其父容器的位置。在你的代码中,使用 .position({ x: 70, y: 100 }) 来设置按钮的位置。这意味着按钮会在父容器(Stack)的坐标系中,以 x=70y=100 的位置来展示。

下面是个例子你可以试试:

@Entry
@Component
struct CardWithButton {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 卡片层
      Divider()
        .width(200)
        .height(150)
        .backgroundColor(Color.Orange)

      // 浮动按钮
      Button('Button')

        .width(70)
        .height(30)
        .backgroundColor(Color.Pink)
        .position({ x: 70, y: 100 })  // 设置浮动位置
        .borderRadius(10) // 圆形按钮
    }
  }
}

在这里插入图片描述


@Entry
@Component
struct StackExample {
build() {
Stack({ alignContent: Alignment.Center }) {
// 第一层矩形
Divider()
.width(200)
.height(100)
.backgroundColor(Color.Yellow)

  // 第二层矩形
 Divider()
   .width(180)
    .height(90)
    .backgroundColor(Color.Green)

  // 第三层矩形
  Divider()
    .width(160)
    .height(80)
    .backgroundColor(Color.Blue)
}

}
}


在这里插入图片描述


@Entry //页面的入口文件,一个文件只能有一个
@Component  //  组件
struct Index // 这个是index是 组件的名字, 只有写在第一个component里面的内容的首内容,下面写的所有都是第一个component的子组件
{
  @State message: string = 'Hello World??';
  // 用于声明全局(可修改的)变量
  build() {
    //build只能有一个根元素,一个根节点,row和colum可以嵌套

Stack({
  alignContent:Alignment.TopEnd
}){

Text("第一个")
  .width(250)
  .height(250)
  .backgroundColor(Color.Green)
  //可以手动调层级  .zIndex(3)
  .padding(50)

  Text("第二个")
    .width(150)
    .height(150)
    .backgroundColor(Color.Blue)

  //可以手动调层级  .zIndex(5)
  Text("第三个")
    .width(50)
    .height(50)
    .backgroundColor(Color.Red)
   //可以手动调层级 .zIndex(3)
}

.width(300)
    .height(600)
    .backgroundColor(Color.Pink)


  }
}


在这里插入图片描述

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

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

相关文章

stm32实现esp8266连接到TCP服务器(二)

1.2 连接到TCP Server 1.2.1 使用网络助手,设立TCP服务器 ​ 编辑 1.2.2 连接服务器 ATCIPSTART"TCP","192.168.1.18",8080 //指令,注意双引号逗号都要半角(英文)输入 CONNECT //结果:成功 OK //结果:成功 …

08 实战:色彩空间展示(本程序以视频为主)

程序效果如下: 我在这里讲解RGB和YCbCr的原理: 一、RGB颜色空间 1.1 基本概念 RGB颜色空间是一种最基础和常用的颜色表示方式,它基于人眼感知色彩的三原色原理。RGB分别代表: R(Red):红色G(Green):绿色B(Blue):蓝色通过这三种基本颜色的不同组合,可以产生人眼…

c#编写的各类应用程序、类库的引用(黑白盒)

001 课程简介,C# 语言简介,开发环境准备 (yuque.com)https://www.yuque.com/yuejiangliu/dotnet/timothy-csharp-001 一个Solution里包含多个Project 一、见识 C# 编写的各类应用程序 二、类库的引用(黑/白盒引用) 1、黑盒引用&a…

杨辉三角算法

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRows 1 输出: [[1]]提示: 1 <…

2024ideaUI切换和svn与git的切换,svn的安装和配置,idea集成svn ,2024-10-18日

2024-10-18日 2024的UI实在很不舒服&#xff0c;隐藏了很多按键&#xff1b; 第一步&#xff1a; 视图 -》 外观 -》 工具栏选出来&#xff1b; 结果出来&#xff1a; 运行的按键和设置的按钮 第二步 点击设置的按钮&#xff0c;选择最后一个&#xff0c;重启就行 结果 舒服&…

LabVIEW提高开发效率技巧----用户权限控制

在LabVIEW开发中&#xff0c;用户权限控制是一个重要的设计模块&#xff0c;尤其在多用户系统中&#xff0c;它可以确保数据安全并控制不同用户的操作权限。为了实现用户权限控制&#xff0c;可以通过角色与权限管理模块来进行设计和实施。以下将从多个角度详细说明如何在LabVI…

Quarto ppt模板制作与Rstudio git连接

本篇记录下当前ppt演示中比较流行的quarto document使用情况以及Rstudio与git相连接的一些实操。 1 Quarto ppt模板制作 1.1 Quarto简介&#xff08;来自Kimi&#xff09; Quarto 是一个由 RStudio 的母公司 Posit 团队开发的开源科学和技术出版系统&#xff0c;它建立在 Pan…

Vue3 Composition Admin——基于 Vue 3 的现代化后台管理模板

Vue3 Composition Admin,这是一个基于 Vue 3 的现代化后台管理模板,旨在为开发者提供一个高效、灵活的开发基础。借助 Vue 3 的 Composition API,我们构建了一个可扩展的架构,使得代码更加清晰易读,同时提升了开发效率。 本项目集成了丰富的 UI 组件、动态路由管理和权限…

Android OpenGL光照效果

在计算机图形学领域&#xff0c;光照仿真是一个重要的研究领域&#xff0c;它对游戏画面的提升、电影和电视节目中的电脑生成图像&#xff08;CGI&#xff09;等方面产生了显著影响。通过使用不同的光照算法&#xff0c;我们可以改变场景的外观&#xff0c;例如模拟从白天到夜晚…

安装好的 Nginx 增加 nginx-module-vts 模块

目录 1. nginx-module-vts 准备 2.查看已安装的的 nginx 编译参数 3. 重新编译 nginx 添加 nginx-module-vts 模块 4. 验证 1. nginx-module-vts 准备 # 解压 unzip nginx-module-vts-master.zip # 将解压包移动到/usr/local/目录 mv nginx-module-vts-master /usr/local/ …

杭州威雅学校一席谈:企业家精神的传承

威雅一席谈 ABBEYTALK 《威雅一席谈》是杭州威雅学校为促进家校沟通推出的社区交流平台。我们将定期邀请家长代表分享自身经验与观点&#xff0c;通过真诚且深度的交谈探寻教育新契机。 本期一席谈&#xff0c;我们邀请了杭州威雅优秀学生家长Robin王先生。终身学习、工匠精神是…

Linux系统——dns域名解析

Linux系统——dns域名解析 一、dns域名解析介绍1、DNS核心概念1.1 区域 zone1.2 记录 record 二、DNS服务的配置1、正向解析的配置2、测试dns正常工作3、配置反向解析4、dns复制 三、DNS查询类型四、hosts文件的使用 一、dns域名解析介绍 dns&#xff0c;应用层协议 作用&…

arp代答观察

文章目录 代答和代理简述实验前提先不开启proxy代答的配置开启代答总结 代答和代理简述 ARP&#xff08;地址解析协议&#xff09;是在局域网中用于将IP地址映射到MAC地址的协议。在理解 ARP 代答和 ARP 代理之前&#xff0c;让我们先澄清一下 ARP 的基本工作原理。 ARP 代答&…

标题PLSQL 里面怎么在文件窗口下 ,创建文件夹,并做好常用sql语句的分类

标题PLSQL 里面怎么在文件窗口下 &#xff0c;创建文件夹&#xff0c;并做好常用sql语句的分类&#xff1f; 效果如图&#xff1a; 标题打开plsql,找到文件窗口 找到&#xff0c;窗口下的这个类似文件夹带扳手的这个图标&#xff0c;打开&#xff0c; 打开后&#xff0c;定位…

十一、pico+Unity交互开发教程——手指触控交互(Poke Interaction)

一、XR Poke Interactor 交互包括发起交互的对象&#xff08;Interactor&#xff09;和可被交互的对象&#xff08;Interactable&#xff09;。XR Interaction Toolkit提供了XR Poke Interactor脚本用于实现Poke功能。在LeftHand Controller和RightHand Controller物体下创建名…

LeetCode做题笔记第202题:快乐数

题目描述 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 1.对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 2.然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 3.如果这个过程 结…

「C/C++」C++ STL容器库 之 std::set 唯一键的集合容器

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

小鹏汽车股价分析:看涨信号已出现,技术指标显示还有40%的上涨空间

猛兽财经核心观点&#xff1a; &#xff08;1&#xff09;小鹏汽车的股价过去几天有所回落。 &#xff08;2&#xff09;随着需求的上升&#xff0c;该公司的业务发展的还算不错。 &#xff08;3&#xff09;猛兽财经对小鹏汽车股价的技术分析&#xff1a;多头已经将目标指向15…

【通俗理解】Neurosymbolic AI——融合神经网络与符号推理的智慧之力

【通俗理解】Neurosymbolic AI——融合神经网络与符号推理的智慧之力 关键词提炼 #Neurosymbolic AI #神经网络 #符号推理 #感知能力 #逻辑能力 #认知水平 #智慧与力量 第一节&#xff1a;Neurosymbolic AI的类比与核心概念 Neurosymbolic AI就像是给神经网络这位“大力士”…

排序算法 —— 计数排序

目录 1.计数排序的思想 2.计数排序的实现 3.计数排序的分析 时间复杂度 空间复杂度 稳定性 优点 缺点 1.计数排序的思想 顾名思义&#xff0c;计数排序就是通过计数的方式来排序&#xff0c;其基本思想为&#xff1a; 开辟一个计数数组&#xff0c;统计每个数出现的次…