织梦系统 子网站,叫人做网站要注意,卫计局网站建设信息公开总结,成免费crm软件UI开发
1. 布局概述
1.1 开发流程 1.先确定开发流程 - 2.分析页面元素构成 -3.选用合适的布局容器组件 1.3 布局元素组成#xff1a;盒模型 2.1 布局分类
2.1 线性布局 线性布局是开发中最常用、最基础的布局#xff0c;通过线性容器Row和Column构建 2.1.1 线性布…UI开发
1. 布局概述
1.1 开发流程 1.先确定开发流程 - 2.分析页面元素构成 -3.选用合适的布局容器组件 1.3 布局元素组成盒模型 2.1 布局分类
2.1 线性布局 线性布局是开发中最常用·、最基础的布局通过线性容器Row和Column构建 2.1.1 线性布局子元素排列方向主轴 布局子元素在排列方向上的间距 在布局容器内可以通过space属性设置排列方向上子元素的间距 线性布局容器在布局方向的轴线子元素默认沿主轴排列
.justifyContent(FlexAlign.End)//主轴对齐
.alignItems(HorizontalAlign.Center)//交叉轴对齐 2.1.2 设置主轴对齐方式 .justifyContent(FlexAlign.End)//主轴对齐.alignItems(HorizontalAlign.Center)//交叉轴对齐 不管容器是Coloum还是Row,它们默认的排列方式都是主轴为始端交叉轴为居中对齐 设置主轴对齐的方式JustifyContent(FlexAlign.Center)设置交叉轴的对齐方式alignItems()
自适应拉伸Blank组件 线性布局下常用空白填充组件Blank,在容器主轴方向自动填充空白空间达到自适应的拉伸效果 打个比方就是你竖屏在看小说然后你横屏了小说的内容会跟着横屏的屏幕去调整 2.2 层叠布局 层叠布局用于在屏幕上预留一块区域来显示组件中的元素提供元素可以重叠的布局 层叠布局通过Stack容器组件实现位置的固定定位与层叠容器中的子元素子组件一次入栈后一个子元素覆盖前一个子元素子元素可以叠加也可设置元素 2.1.1 层叠布局的对齐方式 Stack组件通过alignContent参数实现位置的相对移动 在层叠布局中如果后面子元素尺寸大于前面子元素的尺寸则前面子元素完全隐藏 2.1.2 层叠布局的层级控制Z控制
如何显示前面的元素呢
Stack容器中兄弟组件显示层级关系可以通过Z序控制ZIndex属性改变zIndex值越大显示的层级越高即zIndex值大的组件会覆盖在zIndex值小的组件上方
2.1.3 层叠布局的应用场景 使用层叠布局快速搭建手机页面显示模型 2.3 弹性布局
2.3.1 弹性布局的概念 弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间 容器默认存在主轴与交叉轴子元素默认沿主轴排列子元素在主轴方向的尺寸称为主轴尺寸在交叉轴方向的尺寸称为交叉尺寸弹性布局常用在以下场景如页面头部均匀分布的导航栏、页面框架的搭建、多行数据的排列
2.3.2 弹性布局的元素排列方向direction 弹性布局中容器的子元素可以按照任意方向排列通过设置参数direction,可以决定主轴的反向从而控制子组件的排列方向 2.3.3 案例解析 通过参数FlexDirection.Row和FlexDirection.RowReverse来控制容器主轴为水平方向 通过参数FlexDirection.Column和FlexDirection.ColumnReverse来控制容器主轴为垂直方向 2.4 相对布局
2.4.1 概念 布局容器内子元素支持指定锚点可以为兄弟元素或者父元素基于锚点做相应位置布局 RelativeContainer为采用相对布局的容器。支持容器内部的子元素设置相对未知关系 2.4.2 相对布局的依赖关系 锚点设置 锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系 水平方向上可以设置left、middle、right的锚点在竖值方向上可以设置top、center、bottom的锚点为了明确定义锚点必须为RelativeContainer及其子元素设置ID,用于指定锚点信息RelativeConrainer的ID默认为“container”,其余子元素的ID通过这只id属性。未设置ID的子元素在RelativeContainer中不会显示在使用锚点时要注意子元素的相对位置关系避免出现错位或者遮挡的情况
2.4.3 相对布局的依赖关系以容器为锚点 RelativeContainer父组件为锚点__container__代表父容器的id 2.4.4 相对布局的依赖关系以子元素为锚点 只要在RelativeContainer容器内均可以通过alignRules进行相应的位置移动 代码案例
Entry
Component
struct RelativeContainer1{build() {RelativeContainer() {//父容器组件Text(1111).width(80).height(80).backgroundColor(Color.Gray).alignRules({top:{anchor:__container__,align:VerticalAlign.Top},left:{anchor:__container__,align:HorizontalAlign.Start}}).id(Text)Text(2222).width(80).height(80).backgroundColor(Color.Pink).alignRules({top:{anchor:Text,align:VerticalAlign.Bottom},left:{anchor:Text,align:HorizontalAlign.End}}).id(Text1)}}
}
