【鸿蒙开发从0到1 支付宝界面布局实现day11】

news2025/11/4 20:55:43

鸿蒙开发案例-支付宝界面

  • 一.布局思路
  • 二.页面搭建
    • 1.整体stack布局+底部的tab
    • 2.主体区域的架子:头部+主体界面(层叠关系,主题页面可以滚动)
    • 3.给主体内容填内容
      • (1).完成快捷导航
      • (2)服务导航
    • 4.装饰图片
  • 三.整体效果展示
    • 1.效果展示
    • 2.完整代码演示
  • 四.总结

一.布局思路

  • 整体stack布局+底部的tab
  • 主体区域的架子:头部+主体界面(层叠关系,主题页面可以滚动)
  • 给主体内容填内容
  • 装饰图片
  • 整体效果展示

二.页面搭建

1.整体stack布局+底部的tab

我们设置好后我们可以看到,我们设置的区块居中显示,而我们需要将它固定在底部,我们可以使用层叠布局将白色区域固定在页面底部在这里插入图片描述
在这里插入图片描述
给组件内部添加图标
我这里采用的是layoutweight让他们进行子使用缩放,为的就是使得整个导航栏更加灵活,无论我们是往里面添加还是删除子菜单都不会影响到底部导航栏的排版,他们之间的间距都会自适应缩放
在这里插入图片描述
在这里插入图片描述
添加一个子菜单,依然会自适应子菜单之间的宽度
在这里插入图片描述

2.主体区域的架子:头部+主体界面(层叠关系,主题页面可以滚动)

层叠关系依然是使用我们的stack()组件,这里要想我们的主体页面达到滚动的效果,我们可以让一个scroll组件将主体部分包裹即可
在这里插入图片描述
在这里插入图片描述
设置了宽高,却没有显示,是因为头部的层级太低了,被遮住了,我们只需要使zIndex将头部的层级调大就可以了
在这里插入图片描述
在这里插入图片描述
继续是通过stack中的方位,将导航栏固定到顶部
在这里插入图片描述

  • 完成主体内容的滚动
  • 可以看到.会有一部分区域在我们内容区的外面,我们需要将此问题解决,我们只需要给主体部分的组件设置一个外边距,外边距的高度与导航窗格的高度保持一致
    在这里插入图片描述
    解决后
    在这里插入图片描述
    实现顶部导航栏,只需要给中间的搜索框设置一个layoutweight自适应,左右的宽高就让他由内容撑开,间距直接用内外边距就可以解决
  • 实际上搜索框也可以让中间部分自适应,左右两侧通过内外边距调整间距,
  • 这样就可以直接实现导航栏
    在这里插入图片描述

3.给主体内容填内容

(1).完成快捷导航

布局: 一个行包裹四个列,为了实现四个快捷菜单之间的间距自适应,我们依然可以给每个column设置layoutweight(1)属性,我们可以不用给此设置高度,最后面只需要给row设置一个内边距,把区域撑大就可以了

在这里插入图片描述

(2)服务导航

服务导航的布局我们清晰的可以看到,是一个column包裹三个row,然后每个row中包裹五个column,因为每一个快捷菜单之间的间距都是一致的,我们依然使用自适应去做,只需要给row中的每个column加上layoutweight(1)即可,在row中的想要调节五个column之间的间距,我们可以直接给row传入对象space:
进行设置,同理,我们想要拉开三个row垂直的间距,可以直接给最外层的column设置一个space即可
在这里插入图片描述

4.装饰图片

下面的图片我都是直接使用图片进行装饰的,因为它这里是要通过点击图片跳转,我暂时只能做到这样,就直接给图片了,这里的布局与上面也是类似,一个row包含三个image,这里也一样不用设置图片的宽高,直接给三种图片都加上layoutWeight(1)即可,最后面就直接用两个image组件就可以完成整个页面啦

在这里插入图片描述

三.整体效果展示

1.效果展示

下面还有图片,我们可以按住鼠标左键拖拽,实现滚动效果哦
在这里插入图片描述

2.完整代码演示

import { text } from '@kit.ArkGraphics2D';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    //整体stack布局+底部导航
    //布局顶部的导航和实现主体内容的滚动


    Stack({ alignContent: Alignment.Bottom }) {
      //头部导航
      //头部导航,我们需要让其固定在页面的顶部,
      //直接给stack设置
      Stack({ alignContent: Alignment.Top }) {
        Row() {
          //左
          Column() {
            Row() {
              Text('北京')
                .fontColor('#ffff')

              Image($r('app.media.xiajiantou'))
                .width(20)
                .fillColor('#fff')
            }

            Text('晴27℃')
              .fontSize(12)
              .fontColor('#fff')


          }.padding({
            left: 10,
            right: 10
          })
          .alignItems(HorizontalAlign.Start)

          //中
          Row() {

            Image($r('app.media.sousuo'))
              .width(20)
              .margin({
                left: 5,
                right: 5
              })

            Text('北京交通一卡通')
              .fontSize(14)
              .layoutWeight(1)

            Text('搜索')
              .fontColor('#5b73e1')
              .width(55)
              .textAlign(TextAlign.Center)
              .border({
                width: { left: 1 },
                color: '#ccc',
              })
          }.layoutWeight(1)
          .height(32)
          .backgroundColor('#fff')
          .borderRadius(5)

          //右
          Image($r('app.media.gengduo'))
            .width(30)
            .margin({ left: 12, right: 10 })
            .fillColor('#fff')

        }
        .width('100%')
        .height(60)
        .backgroundColor('#5b73e1')

        //主体展示区域

        Scroll() {
          Column() {
            //tap快捷导航
            Row(){
              Column(){
                Image($r('app.media.saoyisao'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.shoufukuan'))
                  .width(36)
                  .fillColor('#fff')
                Text('收付款')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.chuhang'))
                  .width(36)
                  .fillColor('#fff')
                Text('出行')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.kabao'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }.layoutWeight(1)

            }.width('100%')
            .backgroundColor('#5b73e1')
            .padding({
              top:5,
              bottom:15
            })

            //中间部分的快捷导航
            Column({space:10}){
              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

            }

            .borderRadius({
              topLeft:20,
              topRight:20
            })
            .padding({top:10})

            //装饰图片
            Row({space:5}){
              Image($r('app.media.math'))
                .layoutWeight(1)
                .borderRadius(10)

              Image($r('app.media.moco'))
                .layoutWeight(1)
                .borderRadius(10)

              Image($r('app.media.math'))
                .layoutWeight(1)
                .borderRadius(10)
            }

            Image($r('app.media.tieyi'))
              .width('100%')
            Image($r('app.media.tieyi'))
              .width('100%')


          }
          .width('100%')
          .backgroundColor('#fff')
          .layoutWeight(1)




        }
        .scrollable(ScrollDirection.Vertical)
        //让滚动条一直显示
        .scrollBar(BarState.On)
        .margin({ top: 60, bottom: 60 })


      }
      .width('100%')
      .zIndex(666)


      //底部导航栏
      //底部是一行,选择组件row
      Row() {
        //图标
        Column() {
          Image($r('app.media.zhifubao'))
            .width(35)
        }
        .layoutWeight(1)

        Column() {
          Image($r('app.media.licai'))
            .width(28)
            .margin({ bottom: 3 })
          Text('理财')
            .fontSize(10)

        }.layoutWeight(1)


        Column() {
          Image($r('app.media.shenghuofuwu'))
            .width(28)
            .margin({ bottom: 3 })

          Text('生活')
            .fontSize(10)

        }.layoutWeight(1)


        Column() {
          Image($r('app.media.xiaoxi'))
            .margin({ bottom: 3 })
            .width(28)
          Text('消息')
            .fontSize(10)

        }.layoutWeight(1)

        Column() {
          Image($r('app.media.wode'))
            .margin({ bottom: 3 })
            .width(28)
          Text('我的')
            .fontSize(10)

        }.layoutWeight(1)

      }.width('100%')
      .height('100%')
      .height(60)
      .backgroundColor('#ccc')

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#5b73e1')
  }
}

四.总结

本章呢主要是给前面学的知识点的一个总结,还有提升自己在鸿蒙界面开发中一个整体布局的能力,要注意的是,我们在设计界面的时候尽量不要随意给高度,就像最外层的column组件一定不要给,因为在我们实现滚动的时候就会被高度限制,导致滚动失效,本章我用到了两个新组件一个stack层叠组件,一个scroll滚动组件,还有一个属性layoutweight特别好用的一个组件属性,特别是当组件间的间隔相同且有规律,这可以作为首选

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

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

相关文章

成型的程序

成型的程序

加一个提示信息 加上python 常用的包 整个程序打包完 250M 安装 960MB matplot numpy pandas scapy pysearial 常用的包 (pyvisa)… … 啥都有 Python 解释器组件构建 要比 lua 容易的多 （C/Rust 的组件库)
阅读更多...
Vue3 父组件向子组件传值：异步数据处理的显示问题

Vue3 父组件向子组件传值：异步数据处理的显示问题

一、问题场景 假设我们有一个父组件和一个子组件，父组件需要经过一些复杂的计算或者异步操作才能得到要传递给子组件的值。在数据还没有准备好的时候，子组件尝试获取并显示这个值，这就可能导致子组件没有数据可显示或者显示了一个不正确的初…
阅读更多...
简单有趣的python小程序（涵源代码）

简单有趣的python小程序（涵源代码）

目录 tkinter 计算器 2.计算题练习 猜数字 烦人的程序 无法拒绝的请假条。。。 爬虫 你想看豆瓣评分前十的电影? WXpython 记事本（可保存）​编辑 数字逻辑 解方程 tkinter 计算器 import tkinter as tk import tkinter.messagebox as mroot…
阅读更多...
使用ChatGPT撰写论文，一定要掌握加强理论深度的八个策略！

使用ChatGPT撰写论文，一定要掌握加强理论深度的八个策略！

大家好，感谢关注。我是七哥，一个在高校里不务正业，折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者多多交流，相互成就，共同进步，为大家带来最酷最有效的智能AI学术科研写作攻略。 在学术论文的写作中，加强论文的理论深度是非常重要的一个…
阅读更多...
nacos明明配置了远程连接地址却一直连接本地的详细配置解释

nacos明明配置了远程连接地址却一直连接本地的详细配置解释

大家时间都很珍贵，我直接把方法放这 这个是yml文件，我们配置yml文件的时候，一定要把他的服务发现地址写了 这里是针对bootstrap做出的文件，注意名字，要和我们在yml文件里面的spring名字一样 yml discovery:是发现的意…
阅读更多...
C到C++入门基础知识

C到C++入门基础知识

一：命名空间：namespace （一）：命名空间的定义 注：命名空间只能定义在全局，不能定义在函数内部。 （1）类似于C语言的结构体，C语言的命名空间定义为&#xff1…
阅读更多...
Java Enterprise System 体系结构

Java Enterprise System 体系结构

本章概述了 Java Enterprise System 部署所基于的体系结构概念。 章中描述了一个框架，在此框架内从三维角度对 Java Enterprise System部署体系结构进行了分析，它们分别是：逻辑层、基础结构服务级别和服务质量。这三维在下图中以图解形式显示为正交坐标轴，它们有助于在体系…
阅读更多...
Word使用手册

Word使用手册

修改样式 编辑word文档时，标题和正文文本通常有不同的格式，如果能将这些格式保存为样式，下一次就能直接调用样式，而不需要重复手动设置格式。 可以将样式通常保存为不同的 样式模板.docx，要调用不同样式集&#xff0…
阅读更多...
看Threejs好玩示例，学习创新与技术

看Threejs好玩示例，学习创新与技术

我把在一些好玩的ThreeJS的效果，认真分析技术，写成博客，欢迎大家去看。 后面慢慢补充。 看Threejs好玩示例，学习创新与技术(一)https://mp.weixin.qq.com/s/eJeGmnla0D4zEMl4AwFsVw
阅读更多...
波克城市 x NebulaGraph｜高效数据血缘系统在游戏领域的构建实战

波克城市 x NebulaGraph｜高效数据血缘系统在游戏领域的构建实战

关于波克城市和作者‍‍ 波克城市，一家专注于研发精品休闲游戏的全球化公司，连续七年入选中国互联网综合实力百强，2023 年位列 17 位。波克城市旗下拥有《捕鱼达人》《猫咪公寓2》等精品休闲游戏，全球注册用户超 5 亿，…
阅读更多...
AB 1756-L62 与 AB 5069 通过串口通信

AB 1756-L62 与 AB 5069 通过串口通信

PLC AB L62 控制器 插槽2 Path, RS232=2, 3 PLC Compactlogix 5069-SERIAL 配置
阅读更多...
【提示词】浅谈GPT等大模型中的Prompt

【提示词】浅谈GPT等大模型中的Prompt

Prompt是人工智能（AI）提示词，是一种利用自然语言来指导或激发人工智能模型完成特定任务的方法。在AI语境中，Prompt是一种自然语言输入，通常指的是向模型提出的一个请求或问题，这个请求或问题的形式和内容会…
阅读更多...
【QT】系统-上

【QT】系统-上

欢迎来到Cefler的博客😁 🕌博客主页：折纸花满衣 🏠个人专栏：QT 目录 👉🏻事件QWidget中常见的事件 👉🏻处理鼠标事件：leaveEvent和enterEvent👉&a…
阅读更多...
epoll接口使用 -- 非阻塞式网络io(仅读事件)

epoll接口使用 -- 非阻塞式网络io(仅读事件)

目录 epoll接口使用 思路 注意点 代码 封装epoll接口 epoll.sever.hpp 运行结果 epoll接口使用 接口epoll原理介绍 -- epoll接口介绍,epoll模型介绍原理,接口和模型的关系,epoll优点(和select/poll进行对比)-CSDN博客 思路 我们可以先将系统提供的epoll简单封装一下…
阅读更多...
Java 入门指南：Java 并发编程模式 —— 生产者-消费者模式

Java 入门指南：Java 并发编程模式 —— 生产者-消费者模式

文章目录 生产者-消费者问题解决方案 生产者-消费者模式模式的核心问题基本原理生产者消费者 优点实现方式使用阻塞队列示例代码 使用 wait/notify 机制wait()notify()notifyAll()示例代码 使用 Exchanger示例代码 应用场景总结 生产者-消费者问题 生产者消费者问题是一个经典…
阅读更多...
Java项目: 基于SpringBoot+mybatis+maven旅游管理系统(含源码+数据库+毕业论文)

Java项目: 基于SpringBoot+mybatis+maven旅游管理系统(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven旅游管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、…
阅读更多...
【SqlServer】SQL Server Management Studio (SSMS) 下载、安装、配置使用及卸载——保姆级教程

【SqlServer】SQL Server Management Studio (SSMS) 下载、安装、配置使用及卸载——保姆级教程

超详细的 SQL Server Management Studio (SSMS) 下载、安装、连接数据库配置及卸载教程 SQL Server Management Studio (SSMS) 是微软提供的图形化管理工具，主要用于连接、管理和开发 SQL Server 数据库。以下是详细的 SSMS 下载、安装、连接数据库以及卸载的完整教…
阅读更多...
CLIP:Learning Transferable Visual Models From Natural Language Supervision

CLIP:Learning Transferable Visual Models From Natural Language Supervision

论文：https://arxiv.org/abs/2103.00020 代码：https://github.com/openai/CLIP 官博：https://openai.com/index/clip/ 复现：https://github.com/mlfoundations/open_clip 基础知识 InfoNCE loss
阅读更多...
S7-1500T分布式同步功能

S7-1500T分布式同步功能

1. 功能描述工控人加入PLC工业自动化精英社群 在一些实际应用中，会需要很多轴进行同步运行，如印刷机、纸尿裤生产线等。由于一个 PLC 的运动控制资源有限，控制轴的数量也是有限的，就会需要多个 PLC 间协调实现轴工艺对象的跨CPU的…
阅读更多...
使用Cerbot---Let’s Encrypt生成免费的ssl证书，并设置自动更新证书

使用Cerbot---Let’s Encrypt生成免费的ssl证书，并设置自动更新证书

安装Certbot客户端 yum install certbot 获取证书 certbot certonly --webroot -w /var/www/demo.com -d demo.com 按照步骤 输入邮箱 同意条例 成功申请证书 修改对应的nginx的conf文件 server {listen 80;listen [::]:80;server_name demo.com;# 将 HTTP 请求重定向到 H…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023