【HarmonyOS NEXT星河版开发学习】小型测试案例03-QQ音乐登录

news2024/11/13 9:28:57

个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面(暂未发布)

 

前言

本案例使用的还是一些基础的语法,主要是知道如何去布局以及分析,Harmony的布局方式也是特别多,没必要每一个都去死记硬背。要灵活的去运用好各种布局。

 知识点概述

在鸿蒙(HarmonyOS)开发中,布局元素是指用来定义界面结构和排版的重要组成部分。在使用ArkUI或其他UI开发框架时,可以利用各种布局元素来构建用户界面,以确保应用在不同设备上的显示效果和交互体验一致。

常见的布局元素和用法:

DirectionalLayout(方向布局)

DirectionalLayout 是鸿蒙中常用的一种布局元素,支持水平和垂直两种方向的排列。开发者可以通过指定 horizontal 或 vertical 属性来决定其排列方式。

DirectionalLayout {
    orientation: 'vertical', // 或 'horizontal'
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要垂直或水平堆叠子视图的场景,如列表、导航栏等。

StackLayout(层叠布局)

StackLayout 允许开发者将子视图按照层叠方式放置,类似于CSS中的Flex布局,但不同于DirectionalLayout,子视图可以重叠显示。

StackLayout {
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要灵活控制子视图层次和位置的复杂布局结构。

GridLayout(网格布局)

GridLayout 允许开发者将子视图放置在网格中,通过行和列的定义来确定每个子视图的位置。可以设置每个格子的大小和对齐方式。

GridLayout {
    columns: 3,
    rows: 2,
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种布局适合于需要分割界面成网格状的场景,如图标排列、表格显示等。

FlexLayout(弹性布局)

FlexLayout 类似于Web开发中的Flexbox布局,支持灵活的子元素排列和对齐方式,能够自适应父容器的大小和变化。

FlexLayout {
    flexDirection: 'row', // 或 'column'
    width: 'match_parent',
    height: 'match_parent',
    justifyContent: 'space-between',
    alignItems: 'center',
    content: [
        // 子元素
    ]
}

这种布局适合于需要动态调整子元素位置和大小的场景,如自适应导航栏、动态列表等。

Component(组件布局)

除了以上的布局元素,鸿蒙还支持自定义的组件化布局方式,开发者可以根据业务需求自由组合和定制布局结构。

Component {
    id: 'custom_layout',
    width: 'match_parent',
    height: 'match_parent',
    content: [
        // 子元素
    ]
}

这种方式可以根据具体业务逻辑创建和管理复杂的自定义布局结构。

界面效果展示

代码展示 

@Entry
@Component
struct Index {
  build() {
    Column(){
      Image($r('app.media.tx_02'))
        .width(100)
        .margin(20)
        .borderRadius(100)
      Text('VON')
        .fontWeight(700)
        .margin({
          bottom:20
        })
      Button('QQ登录')
        .width('100%')
        .margin(10)
      Button('微信登录')
        .width('100%')
        .backgroundColor('#ddd')
        .fontColor('#000')
    }
    .width('100%')
    .padding(10)
  }
}

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

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

相关文章

java基础 之 重写equals时为什么要重写hashCode

文章目录 前言回答了解哈希hashCode()总结 前言 了解equals戳这里→java基础 之 equals和的区别 请记住这句话:两个对象相同,哈希码一定相同。哈希码相同,两个对象不一定相同。 回答 只重写equals()方法,不重写hashCode()方法&…

【漏洞复现】致远互联FE协作办公平台 apprvaddNew.jsp SQL注入

文章目录 0x00 漏洞描述影响范围 0x01 测绘工具0x02 漏洞复现0x03 Nuclei检测脚本0x04 修复建议0x05 免责声明 0x00 漏洞描述 致远互联FE协作办公平台是一款为企业提供全方位协同办公解决方案的产品。 在受影响的版本中,攻击者可以未授权访问/witapprovemanage/app…

Animate软件动画类型简介

在Animate软件中,有三种基本的补间动画和一种逐帧动画,这里就简单讲一下这几种动画的概念。 FlashASer:AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer:实用的各种Adobe Animate软件教程…

Java第一个程序的开发

开发三步骤 编写: a.创建一个文本文档,将后缀名改成.java,变成一个java文件 b.注意:我们需要将文件的后缀名显示出来 编译: a.命令:javac java文件名.java b.注意:javac会将java文件编译,生成一个.class文件(字节码文件),jvm运行只认class文件 运行: a.命令:java class文件名…

开发一个自己的VSCode插件

1、前言 对于一个前端开发者来说,开发工具,最常用的应该就是VSCode了,因为它免费,速度快,提供了丰富了插件等优点,使得越来越多的前端开发者都来使用它了,在开发的时候如果有丰富的插件提供支持…

Spring Cloud微服务项目集成MyBatis

在现代软件开发中,微服务架构已经成为一种流行的解决方案,它能够将应用程序拆分成多个小的、独立的服务。每个服务负责一个特定的业务功能,并可以独立部署和扩展。Spring Cloud是一个提供各种工具和框架以支持微服务开发的开源框架&#xff0…

【工具】Sublime配置Anaconda的Python环境的简单方法

1 背景 Sublime Text对Python特别友好,自带Python编译器。只需CtrlB就能编译并控制台输出,特别适合小脚本的调试。 在安装了Anaconda后,如何使用Sublime Text调用Anaconda的Python以及Anaconda附带的众多实用的库呢? 也很简单。…

一个全新低代码快速开发平台,基于Activiti7和Vue3全开放式流程,简洁且强大(附源码)

前言 在当今数字化时代,企业面临着快速变化的市场环境和日益复杂的业务需求。现有的软件开发模式往往存在开发周期长、成-本高、迭代速度慢等问题,难以满足企业对快速响应市场变化的需求。此外,传统的开发平台往往缺乏灵活性和扩展性&#x…

servlet内存马

参考视频&#xff1a;java内存马专题1-servlet内存马 创建javaweb项目&#xff0c;勾选servlet 我们可以将idea给的注释写法&#xff0c;改到web.xml里面 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xm…

C++详解->函数模板+类模版

文章目录 前言1、反泛型编程2、函数模板(1)、函数模板概念(2)、函数模板定义格式(3)、函数模板实例化(4)函数模板参数匹配原则 3、类模版(1)类模板实例化(2)类模板实现Stack&#xff08;压/出栈函数&#xff09; 前言 此篇主要描述函数模板的概念、格式以及实例化等&#xff1b…

AppInventor做的APP支持安卓14吗?

目前MIT最新版本也是Android13&#xff0c;我们与mit同步更新。如果官方支持14我们会第一时间跟进。不过&#xff0c;根据用户反馈&#xff0c;蓝牙相关的好像不兼容~ 有关安卓 14 的补充&#xff1a;根据反馈&#xff0c;是支持14的&#xff0c;不过需要手动开启蓝牙权限 …

【HarmonyOS】鸿蒙应用实现截屏

【HarmonyOS】鸿蒙应用实现截屏 组件截屏 通过componentSnapshot的get函数&#xff0c;将需要截图的组件设置id传进去即可。 import { componentSnapshot } from kit.ArkUI; import { image } from kit.ImageKit;/*** 截图*/ Entry Component Preview struct SnapShotPage {S…

16.2 商品秒杀场景处理

16.2 商品秒杀场景处理 1. 秒杀业务流程解析2. 限速手段************************************************************************ 1. 秒杀业务流程解析 VIP秒杀 通过前端验证码限速 2. 限速手段 ********************************************************************…

VMware虚拟机Ubuntu20.04的安装和配置

Ubuntu20.04和VMware安装 Windows系统下Ubuntu20.04镜像源下载&#xff1a;Ubuntu20.04系统下载 VMware下载 百度网盘链接&#xff1a;https://pan.baidu.com/s/1Fp6GYPDFksEGCNZ0JikfAg 提取码: 8jhs 虚拟机配置Ubuntu 打开VMware点击创建新的虚拟机 - > 典型 - …

golang Goroutine协程和Channel管道

同步/并发/并行概念 在计算机科学和软件开发中&#xff0c;同步、并发和并行是三个重要的概念&#xff0c;它们描述了程序执行的不同方式 同步 (Synchronization) 定义&#xff1a;同步指的是一种操作或任务在进行时&#xff0c;调用者需要等待该操作或任务完成才能继续执行…

SD-WAN组网技术的九大应用场景

SD-WAN组网&#xff0c;即软件定义广域网&#xff0c;为企业提供了高效、灵活且安全的网络连接。这种新兴网络技术不仅改变了传统WAN的组网方式&#xff0c;更带来了诸多应用场景和解决方案。接下来&#xff0c;我们将深入探讨SD-WAN的主要应用场景。 1、首先&#xff0c;SD-WA…

[Bugku] MISC-CTF靶场系列系列详解⑤!!!

平台为“山东安信安全技术有限公司”自研CTF/AWD一体化平台&#xff0c;部分赛题采用动态FLAG形式&#xff0c;避免直接抄袭答案。 平台有题库、赛事预告、工具库、Writeup库等模块。 ------------------------------ 社工-进阶收集 开启环境&#xff1a; --------- 下载附件…

医院AR导航系统的实现:科技助力智慧医疗构建

在快节奏的现代医疗环境中&#xff0c;患者与医护人员对高效、便捷的院内导航需求日益增长。随着科技的飞速发展&#xff0c;传统的纸质地图已难以满足复杂多变的医疗空间需求。在此背景下&#xff0c;集成AR&#xff08;增强现实&#xff09;技术的院内导航系统应运而生&#…

3.表的操作

目录 创建表 创建表案例&#xff1a; 查看表结构 修改表 1.增加新列 2.修改列的属性 3.删除列 4.修改表名 5.修改列 删除表 创建表 语法&#xff1a; CREATE TABLE [IF NOT EXISTS] table_name(field1 datatype1 [COMMENT 注释信息],field2 datatype2 [COMMENT 注释…

华清day7 24-8-5

文章目录 使用有名管道实现&#xff0c;一个进程用于给另一个进程发消息&#xff0c;另一个进程收到消息后&#xff0c;展示到终端上&#xff0c;并且将消息保存到文件上一份使用有名管道实现两个进程间相互通信 使用有名管道实现&#xff0c;一个进程用于给另一个进程发消息&a…