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

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.mzph.cn/news/874722.shtml

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

相关文章

I can‘t link the chatbot model with react

题意:我无法将聊天机器人模型 chatbot 与React连接起来 问题背景: This is the model from flask import Flask, request, jsonify from flask_cors import CORS import json import nltk import numpy as np import random import pickle from time i…

科研绘图系列:R语言热图(heatmap)

介绍 热图是一种数据可视化技术,通常用于展示数据的分布情况。它通过颜色的变化来表示数据的大小或密度,使得观察者能够直观地理解数据集中的模式和趋势。以下是热图的一些关键特点和应用场景: 数据分布:热图可以显示数据在不同区域的分布情况,比如在地图上显示不同地区的…

【cocos creator】ts中export的模块管理

在 TypeScript(TS)中,export 和 import 的概念与 Java 中的 public 类、接口以及 import 语句有一些相似之处。可以用以下方式来类比理解: Export 在 TypeScript 中,export 用于将模块中的变量、函数、类等暴露给外部…

Mac 下华为鸿蒙 :DevEco Studio 开发工具下载

1.登录:华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 ,安装,并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报:淘宝镜像源错误: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…

优略解距离法—Topsis模型【清风数模学习笔记】

层次分析法的局限性 (1)决策层不能太多 (2)数据已知,使用层次分析法不准确 构造计算评分 相较于取卷面理论上的最高分(100)和最低分(0),取分数区间上的最…

Visio绘制的Tanh激活函数结构图,可导出高清图片,可修改,无水印。

Visio绘制的Tanh激活函数结构图,可导出高清图片,可修改,无水印。 方便用于小论文写作,方便用于毕业设计。 Visio版本为2021版,可用更高版本打开。 下载地址:tanh 图片展示:

C语言程序设计10

程序设计10 问题10_1代码10_1结果10_1 问题10_2代码10_2结果10_2 问题10_3代码10_3结果10_3 问题10_1 下列给定程序中已建立一个带结点的单向链表,链表中的各结点数据中的数据递增有序链接,函数 f u n fun fun 的功能是:把形参 x x x 的值放…

【echarts】存在左右Y轴,多个图例切换时,图宽度会缩短(没有右轴,图宽度正常。 高亮右轴,图宽度会变窄。)- 已解决

问题描述: 在绘制图表时,左侧 Y 轴有一条曲线,右侧 Y 轴有三条曲线。初始化时发现,图表的宽度变窄了,这在 PC 端不太明显,但在移动端特别明显。 没有右轴,图宽度正常。 高亮右轴,图…

Windows系统设置暂停更新,暂停时间可达3000天,“永久”暂停更新,亲测有效

好多小伙伴被Windows系统的更新搞得很烦,经常在使用中自己下载更新包,占用网路资源,过段时间就要更新,特别讨厌 今天教你一招,可以暂停更新长达3000天,亲测有效 1、打开系统CMD命令执行窗口,输…

英伟达、Mistral AI 开源企业级大模型,120亿参数、可商用

全球AI领导者英伟达(Nvidia)和著名开源大模型平台Mistral.ai联合开源了,企业级大模型Mistral NeMo 12B。(以下简称“MN 12B”) 据悉,MN 12B一共有基础和指令微调两种模型,支持128K上下文长度&a…

因为很会用工具,拿下了很多客户!

作为一名想要得到更多业绩的打工人,能提高工作效率的工具一定要拥有! 今天,就给大家分享一个职场必备的提效神器,一起来看看它都有哪些功能吧! 1、多渠道客源 它可以从多个渠道去获取你想要的客户资源,无…

代码随想录——一和零(Leetcode474)

题目链接 0-1背包 class Solution {public int findMaxForm(String[] strs, int m, int n) {// 本题m,n为背包两个维度// dp[i][j]:最多右i个0和j个1的strs的最大子集大小int[][] dp new int[m 1][n 1];// 遍历strs中字符串for(String str : strs){int num0 …

免费【2024】springboot 必录德健身器材用品网的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

java面向对象进阶进阶篇--《包和final》

一、前言 今天还是面向对象相关知识点的分享,包是写小型项目时不可或缺的存在,final关键字用的地方不算太多。idea会提示我们导包,有时会自动导包,确实十分方便。但是我们也不能不会自己去导包。 面向对象篇不出意外的话本周就要…

22集 如何minimax密钥和groupid-《MCU嵌入式AI开发笔记》

22集 如何获取minimax密钥和groupid-《MCU嵌入式AI开发笔记》 minimax密钥获取 https://www.minimaxi.com/platform 进入minimax网站,注册登录后,进入“账户管理”, 然后再点击“接口密钥”,然后再点击“创建新的密钥”。 之…

《0基础》学习Python——第十九讲__爬虫/<2>

一、用get请求爬取一般网页 首先由上节课我们可以找到URL、请求方式、User-Agent以及content-type 即:在所在浏览器页面按下F12键,之后点击网路-刷新,找到第一条双击打开标头即可查看上述所有内容,将上述URL、User-Agent所对应的…

1.6、计算机系结构

Flynn分类法 Flynn分类法是1966年,M. J. Flynn提出的根据指令流、数据流的多倍性特征对计算机系统的分类方法。 指令流为机器执行的指令序列。数据流是由指令调用的数据序列。包括输入数据和中间结果,不包括输出数据 分类 Flynn把计算机系统的结构分…

初学MWA(Modern Web App)那些事-3-做一个简单的计算器

初学MWA(Modern Web App)那些事-3-做一个简单的计算器 目录 初学MWA(Modern Web App)那些事-3-做一个简单的计算器前言一、本节学习目标二、计算器实例项目创建过程2.1 创建一个HTML文档2.2 查看新建的html文档2.3 Web应用开发:初始化设置2.4…

linux C++ onnxruntime yolov8 视频检测Demo

linux C onnxruntime yolov8 视频检测Demo 目录 项目目录 效果 ​编辑CMakeLists.txt 代码 下载 项目目录 效果 ./yolov8_demo --help ./yolov8_demo -c2 -ptrue ./yolov8_demo -c1 -strue CMakeLists.txt # cmake needs this line cmake_minimum_required(VERSION 3…

AMD EPYC处理器性能宣称远超Nvidia Grace CPU

AMD近期发布了一份博客文章,其中对比了其EPYC处理器与Nvidia Grace Hopper Superchip(基于Arm架构的72核CPU)在一系列基准测试中的性能,声称EPYC处理器在多种工作负载下的表现最多可高出两倍。这一比较突显了AMD在数据中心CPU市场…