鸿蒙开发基础知识-页面布局【第三篇】

2024-09-05 15:52

本文主要是介绍鸿蒙开发基础知识-页面布局【第三篇】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

层叠布局 Stack 容器内的子元素的顺序为Item1->Item2->Item3 越往后层级越高,当然zIndex()也是可以修改层级的

在这里插入图片描述
demo
在这里插入图片描述

在这里插入图片描述
code
在这里插入图片描述

上难度

在这里插入图片描述

底部布局解析

在这里插入图片描述

上代码

底部布局 :利用layoutWeight(1) 等份  将来需要增加或者删除模块 也不会影响布局 
利用`alignContent:Alignment.Bottom`底部对齐
@Entry
@Component
struct Index {build() {Stack({alignContent:Alignment.Bottom}){Stack({alignContent:Alignment.Top}){// 头部菜单Row() {// 左边Column() {Text('北京').fontSize(18).fontColor('#fff')Text('晴 2°C').fontSize(12).fontColor('#fff')}//中间Row(){TextInput({placeholder:'支付宝搜索'}).layoutWeight(1).backgroundColor('#fff')Text('搜索').width(60).fontColor('blue').fontSize(14).textAlign(TextAlign.Center).border({width:{left:1}})}.backgroundColor('#fff').layoutWeight(1).height('auto').borderRadius(20)// 右边Column() {Text('+').width(30).height(30).fontSize(18).fontColor('#fff').border({width:1}).borderColor('#fff').borderRadius('50').textAlign(TextAlign.Center)}}.height(60).width('100%').zIndex(2).padding(10).backgroundColor('#5b73de')//主体内容Scroll(){Column(){//Top快捷键盘Row(){Column(){Image($r('app.media.sys_icon')).width(35)Text('扫一扫').fontColor('#fff')}.layoutWeight(1)Column(){Image($r('app.media.sfk_icon')).width(35)Text('收付款').fontColor('#fff')}.layoutWeight(1)Column(){Image($r('app.media.cx_icon')).width(35)Text('出行').fontColor('#fff')}.layoutWeight(1)Column(){Image($r('app.media.kb_icon')).width(35)Text('卡包').fontColor('#fff')}.layoutWeight(1)}.width('100%').height(80).backgroundColor('#5b73de')Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)Text('6666').height(300)}}.width('100%').padding({top:60})}.width('100%').height('100%')//底部菜单Row(){Column(){Image($r('app.media.zfb_icon')).width(35)}.layoutWeight(1)Column(){Image($r('app.media.lc_icon')).width(35)Text('理财')}.layoutWeight(1)Column(){Image($r('app.media.life_icon')).width(35)Text('生活')}.layoutWeight(1)Column(){Image($r('app.media.msg_icon')).width(35)Text('消息')}.layoutWeight(1)Column(){Image($r('app.media.my_icon')).width(35)Text('我的')}.layoutWeight(1)}.width('100%').height(60).backgroundColor('#fbfcfe')}.width('100%').height('100%').backgroundColor('#ccc')}
}

这篇关于鸿蒙开发基础知识-页面布局【第三篇】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139398

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

linux-基础知识3

打包和压缩 zip 安装zip软件包 yum -y install zip unzip 压缩打包命令: zip -q -r -d -u 压缩包文件名 目录和文件名列表 -q:不显示命令执行过程-r:递归处理,打包各级子目录和文件-u:把文件增加/替换到压缩包中-d:从压缩包中删除指定的文件 解压:unzip 压缩包名 打包文件 把压缩包从服务器下载到本地 把压缩包上传到服务器(zip

计组基础知识

操作系统的特征 并发共享虚拟异步 操作系统的功能 1、资源分配,资源回收硬件资源 CPU、内存、硬盘、I/O设备。2、为应⽤程序提供服务操作系统将硬件资源的操作封装起来,提供相对统⼀的接⼝(系统调⽤)供开发者调⽤。3、管理应⽤程序即控制进程的⽣命周期:进程开始时的环境配置和资源分配、进程结束后的资源回收、进程调度等。4、操作系统内核的功能(1)进程调度能⼒: 管理进程、线

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识