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

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

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》:本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像