百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

玩转HarmonyOS NEXT之常用布局一 harmonyos next开发者预览版下载

yuyutoo 2024-10-19 11:09 11 浏览 0 评论

线性布局（Row/Column）

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。

基本属性

线性布局组件中存在两根轴：主轴和交叉轴。它们始终相互垂直，但它们的方向取决于容器的类型。

  • 主轴：在Column容器中，子组件按垂直方向从上到下排列，主轴方向是垂直的。在Row容器中，子组件按水平方向从左到右排列，主轴方向是水平的。
  • 交叉轴：交叉轴与主轴垂直相交，如果主轴是垂直的，交叉轴就是水平的，反之亦然。

属性名称

描述

justifyContent

设置主轴上的对齐格式。

alignItems

设置交叉轴上的对齐格式。

主轴方向

对齐格式

描述

Start

元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

Center

元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。

End

元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

SpaceBetween

元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

SpaceAround

元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

SpaceEvenly

元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

交叉轴方向

  • Column
  • 对齐格式描述Start设置子组件在水平方向上按照起始端对齐。Center (默认值)设置子组件在水平方向上居中对齐。End设置子组件在水平方向上按照末端对齐。
  • Row
  • 对齐格式描述Top设置子组件在垂直方向上居顶部对齐。Center (默认值)设置子组件在垂直方向上居中对齐。Bottom设置子组件在垂直方向上居底部对齐。

层叠布局（Stack）

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

基本属性

Stack组件通过alignContent参数实现位置的相对移动，支持9种对齐方式。

对齐格式

描述

TopStart

顶部起始端。

Top

顶部横向居中。

TopEnd

顶部尾端。

Start

起始端纵向居中。

Center

横向和纵向居中。

End

尾端纵向居中。

BottomStart

底部起始端。

Bottom

底部横向居中。

TopEnd

顶部尾端。

BottomEnd

底部尾端。

弹性布局（Flex）

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

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

基本概念

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

布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

属性值

说明

FlexDirection.Row（默认值）

主轴为水平方向，子元素从起始端沿着水平方向开始排布。

FlexDirection.RowReverse

主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。

FlexDirection.Column

主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。

FlexDirection.ColumnReverse

主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。

布局换行

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

属性值

说明

FlexWrap. NoWrap（默认值）

不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

FlexWrap. Wrap

换行，每一行子元素按照主轴方向排列。

FlexWrap. WrapReverse

换行，每一行子元素按照主轴反方向排列。

主轴对齐方式

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

属性值

说明

FlexAlign.Start（默认值）

不子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。

FlexAlign.Center

子元素在主轴方向居中对齐。

FlexAlign.End

子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。

FlexAlign.SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。

FlexAlign.SpaceAround

Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。

FlexAlign.SpaceEvenly

Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。

交叉轴对齐

可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。

属性值

说明

ItemAlign.Auto

使用Flex容器中默认配置。

ItemAlign.Start

交叉轴方向首部对齐。

ItemAlign.End

交叉轴方向底部对齐。

ItemAlign.Stretch

交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

ItemAlign.Baseline

交叉轴方向文本基线对齐。

子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。

属性值

说明

ItemAlign.Auto

使用Flex容器中默认配置。

ItemAlign.Start

交叉轴方向首部对齐。

ItemAlign.End

交叉轴方向底部对齐。

ItemAlign.Stretch

交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

ItemAlign.Baseline

交叉轴方向文本基线对齐。

内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效。

属性值

说明

FlexAlign.Start

子元素各行与交叉轴起点对齐。

FlexAlign.Center

子元素各行在交叉轴方向居中对齐。

FlexAlign.End

子元素各行与交叉轴终点对齐。

FlexAlign.SpaceBetween

子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。

FlexAlign.SpaceAround

子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

FlexAlign.SpaceEvenly

子元素各行间距，子元素首尾行与交叉轴两端距离都相等。

FlexAlign.SpaceAround

子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

FlexAlign.SpaceAround

子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。

  • flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
  • flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
  • flexShrink: 当父容器空间不足时，子元素的压缩比例。

相关推荐

微软Win10/Win11版Copilot上线:支持OpenAI o3推理模型

IT之家4月3日消息，科技媒体WindowsLatest昨日（4月2日）发布博文，报道称Windows10、Windows11新版Copilot应用已摘掉Beta帽...

WinForm 双屏幕应用开发:原理、实现与优化

在当今的软件开发领域，多屏幕显示技术的应用越来越广泛。对于WinForm应用程序来说，能够支持双屏幕显示不仅可以提升用户体验，还能满足一些特定场景下的业务需求，比如在演示、监控或者多任务处理等场景...

推荐一个使用 C# 开发的 Windows10 磁贴美化小工具

...

OpenJDK 8 安装（openjdk 8 windows）

通常OpenJDK8和11都能互相编译和通用。我们建议使用11，但是如果你使用JDK8的话也是没有问题的。建议配置使用OpenJDK，不建议使用OracleJDK，主要是因为版...

基于 Linux 快速部署 OpenConnect VPN 服务(ocserv 实战指南)

一、前言在如今远程办公和内网穿透需求日益增长的背景下，搭建一套安全、稳定、高效的VPN系统显得尤为重要。OpenConnectServer（ocserv）是一个开源、高性能的VPN服务端软件...

巧妙设置让Edge浏览器更好用（edge怎么设置好用）

虽然现在新版本的Edge浏览器已经推出，但是毕竟还处于测试的状态中。而Win10系统里面自带的老版Edge浏览器，却越来越不被人重视。其实我们只需要根据实际情况对老版本的Edge浏览器进行一些简单的设...

WPF做一个漂亮的登录界面（wpf页面设计）

...

微软开源博客工具Open Live Writer更新:多项Bug修复

OpenLiveWriter前身是WindowsLiveWriter，是微软WindowsLive系列软件之一，曾经是博主们非常喜爱的一款所见即所得博文编辑工具，支持离线保存，还支持图像编辑...

基于OpenVINO的在线设计和虚拟试穿 | OPENAIGC大赛企业组优秀作品

在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。...

C#开源免费的Windows右键菜单管理工具

...

Windows10或11中隐藏的功能，用它再也不用担心电脑中病毒!

...

Python open函数详解（python open函数源码）

演示环境，操作系统：Win1021H2（64bit）；Python解释器：3.8.10。open是Python的一个内置函数，一般用于本地文件的读写操作。用法如下。my_file=open(fi...

Windows 11 安装 Docker Desktop（Windows 11 安装助手 Windows 易升 关系）

...

Windows 11 新版发布:屏幕亮度自适应控制，小组件界面重新设计!

...

世界上最好用的Linux发行版之一，OpenSUSE安装及简单体验

背景之前无意在论坛里看到openSUSE的Linux发行版，被称为世界上最好用的Linux发行版之一（阔怕），一直想体验一下，于是这期做一个安装和简单体验教程吧。...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表