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

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

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经