【界面开发实战】使用DevEco Studio编写支付宝首页

news2024/9/21 4:32:37

效果展示

知识点

层叠布局

上一篇文章已经介绍了，这篇文章中不再赘述，如果想了解的话可以去看上一篇文章，链接如下：

http://t.csdnimg.cn/CnBZMicon-default.png?t=N7T8http://t.csdnimg.cn/CnBZM

弹性布局

作用：提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

主轴为水平方向的Flex容器示意图

主轴

Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。

交叉轴

垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

布局方向

布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

主轴对齐方式

通过justifyContent参数设置子元素在主轴方向的对齐方式。

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

页面滚动Scroll

作用：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

属性
名称参数类型描述
scrollableScrollDirection

设置滚动方向

默认值：ScrollDirection.Vertical

scrollBarBarState

设置滚动条状态

默认值：BarState.Auto

说明：如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。

scrollBarColor

string 

number

Color

设置滚动条的颜色
scrollBarWidth

string

number

设置滚动条的宽度，不支持百分比设置

默认值：4

单位：vp

说明：如果滚动条的宽度超过其高度，则滚动条的宽度会变为默认值

scrollSnap10+ScrollSnapOptions设置Scroll组件的限位滚动模式
edgeEffectEdgeEffect

设置滑动效果

默认值：EdgeEffect.None

enableScrollInteraction10+boolean

设置是否支持滚动手势，当设置为false时，无法通过手指或鼠标滚动，但不影响控制器的滚动接口

默认值：true

nestedScroll10+NestedScrollOptions嵌套滚动选项，设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动
firction10+number
Resource

设置摩擦系数，手动划动滚动区域时生效，只对惯性运动过程中的链式效果有间接影响

默认值：非可穿戴设备为0.6，可穿戴设备为0.9

说明：设置为小于0的值时，按默认值处理

ScrollDirection枚举说明

名称描述
Horizontal仅支持水平方向滚动
Vertical仅支持竖直方向滚动
None不可滚动
Free(deprecated)支持竖直或水平方向滚动，从API version9开始废弃

代码展示

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

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 内容区域
      Stack({ alignContent: Alignment.Top }) {
        //   搜索区域
        Row() {
          // 地区和天气
          Column() {
            Row() {
              Text("北京")
                .fontColor("#fff")
              Image($r("app.media.zfb_head_down"))
                .margin({ top: 2, left: 5 })
                .width(10)
                .fillColor("#fff")
            }.alignItems(VerticalAlign.Top)

            Text("晴 2℃")
              .fontSize(12)
              .fontColor("#fff")
          }.alignItems(HorizontalAlign.Start)

          //   搜索框
          Row() {
            Image($r("app.media.zfb_head_search"))
              .width(20)
              .fillColor("#666")
            Text("北京交通一卡通")
              .margin({ left: 5 })
              .layoutWeight(1)
            Text("|")
              .fontColor("#ccc")
            Text("搜索")
              .width(55)
              .textAlign(TextAlign.Center)
              .fontWeight(700)
              .fontColor("#6792E1")
          }
          .height(40)
          .padding({ left: 10 })
          .margin({ left: 15, right: 15 })
          .layoutWeight(1)
          .backgroundColor("#fff")
          .borderRadius(10)

          //   更多
          Image($r("app.media.zfb_head_plus"))
            .width(30)
            .fillColor("#fff")
        }
        .padding(10)
        .height(60)
        .backgroundColor("#4B73EC")
        .zIndex(66)

        //   滚动区域
        Scroll() {
          Column() {
            // 扫一扫区域
            Row() {
              Column() {
                Image($r("app.media.zfb_top_scan"))
                  .width(36)
                  .fillColor("#fff")
                Text("扫一扫")
                  .fontColor("#fff")
              }

              Column() {
                Image($r("app.media.zfb_top_pay"))
                  .width(36)
                  .fillColor("#fff")
                Text("收付款")
                  .fontColor("#fff")
              }

              Column() {
                Image($r("app.media.zfb_top_travel"))
                  .width(36)
                  .fillColor("#fff")
                Text("出行")
                  .fontColor("#fff")
              }

              Column() {
                Image($r("app.media.zfb_top_card"))
                  .width(36)
                  .fillColor("#fff")
                Text("卡包")
                  .fontColor("#fff")
              }
            }
            .padding({ top: 5, bottom: 15 })
            .width("100%")
            .justifyContent(FlexAlign.SpaceAround)
            .backgroundColor("#4B73EC")

            // 主体内容区域
            Column() {
              //   快捷菜单区域
              Flex({ wrap: FlexWrap.Wrap, }) {
                Column() {
                  Image($r("app.media.zfb_nav1"))
                    .width(28)
                  Text("滴滴出行")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav2"))
                    .width(28)
                  Text("生活缴费")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav3"))
                    .width(28)
                  Text("股票")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav4"))
                    .width(28)
                  Text("蚂蚁森林")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav5"))
                    .width(28)
                  Text("手机充值")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav6"))
                    .width(28)
                  Text("余额宝")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav7"))
                    .width(28)
                  Text("花呗")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav8"))
                    .width(28)
                  Text("飞猪旅行")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav9"))
                    .width(28)
                  Text("淘票票")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav10"))
                    .width(28)
                  Text("饿了么")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav11"))
                    .width(28)
                  Text("读书听书")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav12"))
                    .width(28)
                  Text("基金")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav13"))
                    .width(28)
                  Text("直播推广")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav14"))
                    .width(28)
                  Text("医疗健康")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")

                Column() {
                  Image($r("app.media.zfb_nav15_more"))
                    .width(28)
                  Text("更多")
                    .margin({ top: 8, bottom: 10 })
                    .fontSize("13")
                    .fontColor("#666")
                }
                .width("20%")
              }
              .padding(10)

              Row() {
                Image($r("app.media.zfb_pro_pic1"))
                  .width("30%")
                Image($r("app.media.zfb_pro_pic2"))
                  .width("30%")
                Image($r("app.media.zfb_pro_pic3"))
                  .width("30%")
              }
              .width("100%")
              .justifyContent(FlexAlign.SpaceAround)

              Image($r("app.media.zfb_pro_list1"))
                .width("97%")
                .margin({ top: 10, bottom: 10 })
              Image($r("app.media.zfb_pro_list2"))
                .width("97%")
                .margin({ bottom: 10 })
            }
            .borderRadius({ topLeft: 20, topRight: 20 })
            .width("100%")
            .backgroundColor("#f6f6f6")
          }
        }
        .scrollable(ScrollDirection.Vertical)
        .width("100%")
        .padding({ top: 60, bottom: 60 })
      }
      .height("100%")

      // tabBar区域
      Row() {
        Column() {
          Image($r("app.media.zfb_tab_home"))
            .width(35)
        }
        .layoutWeight(1)

        Column({ space: 4 }) {
          Image($r("app.media.zfb_tab_money"))
            .width(28)
          Text("理财")
            .fontSize(14)
        }
        .layoutWeight(1)

        Column({ space: 4 }) {
          Image($r("app.media.zfb_tab_life"))
            .width(28)
          Text("生活")
            .fontSize(14)
        }
        .layoutWeight(1)

        Column({ space: 4 }) {
          Image($r("app.media.zfb_tab_chat"))
            .width(28)
          Text("消息")
            .fontSize(14)
        }
        .layoutWeight(1)

        Column({ space: 4 }) {
          Image($r("app.media.zfb_tab_me"))
            .width(28)
          Text("我的")
            .fontSize(14)
        }
        .layoutWeight(1)
      }
      .width("100%")
      .height(60)
      .backgroundColor("#fff")
    }
    .height("100%")
    .width("100%")
    .backgroundColor("#4B73EC")
  }
}

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

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

相关文章

YOLOV5 改进：替换backbone为MobileVIT

YOLOV5 改进：替换backbone为MobileVIT

1. 介绍 yolov5替换主干网络的步骤如下，依旧和之前的一样 2. 更改common文件 将下面代码加入common最下面即可： from einops import rearrange import torch import torch.nn as nn# Transformer Attention模块定义 class TAttention(nn.Module):def __init__(self, dim, …
阅读更多...
string的底层简单实现（造轮子）

string的底层简单实现（造轮子）

文件：String.h ----- 头文件 String.cpp ----- 源文件 Test.cpp ----- 源文件 实现细节： 实现带参构造： 在实现带参构造建议不使用初始化列表，初始化去写不太好： :_str(new char[strlen(str)1]) 用初始化列表要在…
阅读更多...
如何在 Jupyter Notebook 中直接设置全局随机种子的方法及易错地方、notebook和pycharm中设置随机种子的区别

如何在 Jupyter Notebook 中直接设置全局随机种子的方法及易错地方、notebook和pycharm中设置随机种子的区别

结论： 在 Jupyter Notebook 中直接设置全局随机种子的方法是确保每个单独的代码块中都调用相同的 set_seed 函数。这是最简单且有效的方法。在每个代码块开头设置随机种子，确保代码在每次执行时具有相同的随机数生成顺序。 易错地方： …
阅读更多...
mac配置git的sshkey

mac配置git的sshkey

在MAC中配置Git的SSH Key： 1.打开终端 2.生成SSH密钥，输入以下命令： ssh-keygen -t rsa -b 4096 -C “你自己的账号电子邮件地址” 按回车键后，系统会提示你输入文件保存路径，默认为~/.ssh/id_rsa直接按回车键使用默…
阅读更多...
数据结构初阶之排序（上）

数据结构初阶之排序（上）

排序的概念及其应用 排序的概念 排序：所谓排序，就是使⼀串记录，按照其中的某个或某些关键字的⼤⼩，递增或递减的排列起来的操作。 排序的应用 如下图： 样例数组 下面我们给出一组乱序的数组，接下来的算…
阅读更多...
程序员进阶架构知识体系、开发运维工具使用、Java体系知识扩展、前后端分离流程详解、设计模式开发实例汇总专栏分享

程序员进阶架构知识体系、开发运维工具使用、Java体系知识扩展、前后端分离流程详解、设计模式开发实例汇总专栏分享

场景 作为一名开发者，势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼，再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者，秉承持续学习、持续优化的信念…
阅读更多...
中国象棋 纯网页前端 演示与下载

中国象棋 纯网页前端 演示与下载

https://andi.cn/app/chess/
阅读更多...
GitHub推出全新AI模型平台：简化开发者体验

GitHub推出全新AI模型平台：简化开发者体验

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…
阅读更多...
《计算机网络》（第8版）第8章 互联网上的音频/视频服务 复习笔记

《计算机网络》（第8版）第8章 互联网上的音频/视频服务 复习笔记

第 8 章 互联网上的音频/视频服务 一、概述 1 多媒体信息的特点 多媒体信息（包括声音和图像信息）最主要的两个特点如下： （1）多媒体信息的信息量往往很大； （2）在传输多媒体数据时&a…
阅读更多...
【网络】TCP协议——TCP连接相关、TCP连接状态相关、TCP数据传输与控制相关、TCP数据处理和异常、基于TCP应用层协议

【网络】TCP协议——TCP连接相关、TCP连接状态相关、TCP数据传输与控制相关、TCP数据处理和异常、基于TCP应用层协议

文章目录 Linux网络1. TCP协议1.1 TCP连接相关1.1.1 TCP协议段格式1.1.2 确定应答(ACK)机制1.1.3 超时重传机制 1.2 TCP连接状态相关1.2.1 TIME_WAIT状态1.2.2 CLOSE_WAIT 状态 1.3 TCP数据传输与控制相关1.3.1 滑动窗口1.3.2 流量控制1.3.3 拥塞控制1.3.4 延迟应答1.3.5 捎带应…
阅读更多...
草的渲染理论

草的渲染理论

Unity引擎提供了基础的terrain工具，可以制作地形，在上面刷树刷草。对于树，Unity是支持带LOD的Prefab，不同距离显示不同细节的模型，效果还不错。对于草，Unity支持两种方式来刷草，一种是Add Grass…
阅读更多...
汇凯金业：解读区块链概念、类型与独特优势

汇凯金业：解读区块链概念、类型与独特优势

区块链作为一种具有革命性的创新技术，正在逐渐改变我们的生活和商业模式。它的去中心化、安全可靠、不可篡改等特性，为解决许多传统领域中的问题提供了新的思路和方法。 一、区块链的基本概念 区块链是一种具有创新性的计算机技术应用模式，…
阅读更多...
C#复习之类和对象

C#复习之类和对象

知识点一：什么是类 基本概念： 具有相同特征 具有相同行为 一类事物的抽象 类是对象的模板 可以通过类创建出对象 类的关键字 Class 知识点二：类声明在哪里 类一般声明在namespace语句块中 知识点三：类声明的语法 知识点四&#xf…
阅读更多...
html+css 实现文字滚动的按钮

html+css 实现文字滚动的按钮

前言：哈喽，大家好，今天给大家分享htmlcss 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 文…
阅读更多...
qtcreator调试器断点不进入qml，要检查这里默认设置

qtcreator调试器断点不进入qml，要检查这里默认设置

阅读更多...
2024年前端趋势：全栈或许是不容错过的选择！

2024年前端趋势：全栈或许是不容错过的选择！

近年来，前端开发的技术不断推陈出新，2024年也不例外。在这个变化迅速的领域，全栈开发逐渐成为一股不容忽视的趋势。无论你是经验丰富的开发者，还是刚刚入门的新手，掌握全栈技术都能让你在竞争中脱颖而出。而在这个过程…
阅读更多...
Spring -- 拦截器

Spring -- 拦截器

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 今天你敲代码了吗 文章目录 1. 自定义拦截器2. 注册配置拦截器3. 拦截器详解3.1 拦截路径3.2 拦截器执行流程 3.3 DispatcherServlet源码分析3.3.1 初始化:3.3.2 处理请求3.3.3 适配器 拦截器是Spring框架提供的…
阅读更多...
vue项目删除无用的依赖

vue项目删除无用的依赖

1.安装依赖检查工具 npm i depcheck 2.查看无用的依赖 npx depcheck 3.手动删除pageage.json中的无用的依赖（如果有sass和sass-loader不要删，会引起项目报错） 4.全部删除完成之后，删除package-lock.json和yarn.lock文件&#x…
阅读更多...
【文件解析漏洞复现】

【文件解析漏洞复现】

一．IIS解析漏洞复现 1.IIS6.X 方式一：目录解析 搭建IIS环境 在网站下建立文件夹的名字为.asp/.asa 的文件夹，其目录内的任何扩展名的文件都被IIS当作asp文件来解析并执行。 访问成功被解析 方式一：目录解析 在IIS 6处理文件解…
阅读更多...
图纸加密与零信任沙箱：构建企业数据安全的双重保障

图纸加密与零信任沙箱：构建企业数据安全的双重保障

在这个信息爆炸的时代，数据安全如同一场没有硝烟的战争。深信达SDC沙盒防泄密系统，以其零信任沙盒技术，为企业提供了一个坚不可摧的“金钟罩铁布衫”，确保企业图纸安全“坚如磐石”。 一、数据安全的“冰与火之歌” 数据安全是一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023