Harmony学习(二)------ArkUI(2)

news2024/11/12 17:34:17

1.主轴对齐方式.justifyContent

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin(10)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)  
  }
}

2.交叉轴对齐方式.alignItems()

交叉轴水平方向:HorizontalAlign

交叉轴垂直方向:VerticalAlign

build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin({top:10,bottom:10})
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.End)
  }

3.自适应伸缩.layoutWeight()

按照份数权重,分配剩余空间

build() {
    Row(){
      Text('老大')
        .backgroundColor(Color.Blue)
        .layoutWeight(1)  //占剩余空间权重
      Text('老二')
        .backgroundColor(Color.Yellow)
        .layoutWeight(2)
      Text('老三')
        .backgroundColor(Color.Red)
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }

4.Blank() 填充空白区域,像弹簧

5.Checkbox()复选框

6.Text(){Span(‘1’)Span(‘2’)}

7.弹性布局Flex

build() {
    Flex({
      direction:FlexDirection.Row,      //主轴方向
      justifyContent:FlexAlign.SpaceBetween,   //主轴方式
      alignItems:ItemAlign.Center    //交叉轴方式
    }){
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('90%')
    .backgroundColor(Color.Green)
  }

弹性布局Flex 多行

Column(){
      Flex({
        wrap:FlexWrap.Wrap    //设置多行
      }){
        Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)
        Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('你是?').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)
      }
    }
    .width('100%')
    .height('100%')
  }

8.绝对定位:控制组件位置,实现层叠效果

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Blue)
        .border({
          width:2
        })
        //绝对定位 控制位置,层叠效果
        .position({
          x:0,
          y:0
        })
        //zindex设置层级
        .zIndex(-1)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Red)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
  }

9.层叠布局Stack(){}

build() {
    //层叠方位
    Stack({alignContent:Alignment.TopEnd}){
      Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)
      Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)
      Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)
    }
    .width(300).height(600)
    .backgroundColor(Color.Pink)
  }

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

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

相关文章

现货黄金布林线怎么看?又应如何使用?

在现货黄金投资中,技术指标是很多人做交易分析和决策时所需要的工具。当然,由于电脑技术的发达,现在各种技术指标已经有成千上万种,其中一些经典的指标还是很受市场欢迎,比方说布林线。下面我们就来简单地介绍布林线在…

【调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gitee 仓库的 URL】

调试笔记-系列文章目录 调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gitee 仓库的 URL 文章目录 调试笔记-系列文章目录调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gite…

Python爬虫(5) --爬取网页视频

文章目录 爬虫爬取视频指定url发送请求UA伪装请求页面 获取想要的数据解析定位定位音视频位置 存放视频完整代码实现总结 爬虫 Python 爬虫是一种自动化工具,用于从互联网上抓取网页数据并提取有用的信息。Python 因其简洁的语法和丰富的库支持(如 requ…

typora激活问题

不使用激活码解决。 1.右键桌面图标,打开文件位置 2.按照 Typora路径到 —> resources —> page-dist —> static —> js 这个路径找到这两个文件 LicenseIndex.180dd4c7.xxxxxxx.chunk.js LicenseIndex.180dd4c7.xxxxxxx.chunk.js (也可…

MySQL简介(超详细)

课程目标 • 了解数据库基本概念 • 熟悉MySQL数据库的常用操作 • 掌握Insert、Delete、Update、Select等常用SQL语句 • 理解MySQL数据库的事务,索引以及函数 • 了解MySQL数据库的存储过程和触发器 一、什么是数据库? 概念:数据库(D…

立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统

本文主要是在sfud的基础上进行fatfs文件系统的移植,并不对sfud的移植再进行过多的讲解了哦,所以如果想了解sfud的移植过程,请参考我的另外一篇文章:传送门 正文开始咯 首先我们需要先准备资料准备好,这里对于fatfs的…

Windows图形界面(GUI)-MFC-C/C++ - MFC项目工程框架解析

公开视频 -> 链接点击跳转公开课程博客首页 -> e​​​​​​链接点击跳转博客主页 目录 MFC项目 项目选择 配置安装 程序引导 MFC框架 环境设置 程序框架 代码编写 MFC解析 程序入口 执行流程 代码结构 应用程序类 窗口框架类 消息处理 消息类型 消息…

探索扫描二维码登录的奥秘:从前端到后端的无缝连接

🎉 博客主页:【剑九 六千里-CSDN博客】 🎨 上一篇文章:【React中的无状态组件:简约之美】 🎠 系列专栏:【面试题-八股系列】 💖 感谢大家点赞👍收藏⭐评论✍ 文章目录 1、…

[Jenkins]jenkins-cli.jar调用用户token启动任务

背景:项目入了一群od伙伴,但是od伙伴有单独的构建工程需要提交,由于jenkins的版本太拉闸,不能配置根据role和项目分权限,插件安装失败,不得已想到一个办法。让OD伙伴,在本地,用java&…

音频剪辑里的几种基础操作

音频对于视频的重要性,怎么强调都不为过,它在视频里扮演着举足轻重的角色,对观众有着极为深远的影响。下面为您阐述音频在视频中的关键意义: ① 情感传递:音频有强大的情感传达能力,借助声音的起伏变化、音…

windows网络应急排查

一、系统排查 msinfo32 #GUI显示的系统信息systeminfo #简单了解系统信息用户信息排查 排查恶意账号: 黑客喜欢建立相关账号用作远控: 1.建立新账号2.激活默认账号3.建立隐藏账号(windows中账号名$)cmd方法 net user #打印用户账号信息 ---看不到$结尾的隐藏账…

postgresql 使用navicat 导出报 gs_package 关系不存在问题解决。

1. 问题描述 临时接手的项目,使用的数据库是postgresql,使用navicat 17 Lite 免费版,导出就会报如下图所示的错误:2. 尝试的办法: 1) 换navicat 17 和navicat 17 for postgresql 试用版本 还是一样的错误。 2) 换pos…

大数据-43 Redis 功能扩展 Lua 脚本 对Redis扩展 eval redis.call redis.pcall

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

运维团队如何借助分布式部署提升监控效率与可靠性

随着企业IT基础设施的日益复杂和分布式架构的广泛应用,传统的监控解决方案已经难以满足现代运维团队的需求。在这样的背景下,分布式部署作为一种新型的监控架构,以其灵活性、可扩展性和高可用性,成为了运维团队提升监控效率与可靠…

uni-app pinia搭建

1.新建store文件 新建index.js,代码: // import { // createPinia // } from pinia //const store createPinia() import * as Pinia from pinia const pinia Pinia.createPinia() export * from "./modules/user" export * from ".…

MATLAB算法实战应用案例精讲-【数模应用】Kappa一致性检验(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 Kappa系数 什么是一致性检验? 如何完成一致性检验? (一)ICC组内相关系数 (二)Kappa一致性系数 (三)Kendall W 协调系数 (四)Bland-Altman图 检验一致性方法 SPSS SPSSAU 一、案例介绍 二、问题分析 三、软件操作及结果解读 四、结…

【中项】系统集成项目管理工程师-第4章 信息系统架构-4.8云原生架构

前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”&…

【BUG】已解决:ValueError: All arrays must be of the same length

ValueError: All arrays must be of the same length 目录 ValueError: All arrays must be of the same length 【常见模块错误】 【解决方案】 问题原因 解决方法 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰&…

Transformer论文理解

学习一个东西之前首先要明白要去了解什么? 概念(组成),性质,特点,作用(用处) 概念: transformer是一种自然语言处理(NLP)和其他序列到序列(seq2seq)任务&…

大数据技术--实验01-Hadoop的安装与使用【实测可行】

使用下面表中的软件版本进行配置: 准备好后,按照下面的步骤进行配置。 配置VMware网络 在VMWare主界面,点击“编辑”>“虚拟网络编辑”菜单进入虚拟网卡参数设置界面。选择VMnet8条目,点击“NAT设置”按钮后可以看到我们的VM…