OpenHarmony——ArkTS声明式开发与应用 课件 项目2-任务3-1 弹性布局与层叠布局.pptxVIP

弹性布局与层叠布局

目录CONTENTS弹性布局Flex的使用1层叠布局Stack的使用2

01弹性布局Flex的使用知识储备

弹性布局FlexArkTS中的Flex弹性布局组件，通过设置方向的方式来实现Row和Column的效果。当方向设置为Row时，则主轴为水平方向，交叉轴为垂直方向；当方向设置为Column时，则主轴为垂直方向，交叉轴为水平方向。弹性布局默认能够使子组件压缩或拉伸，在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充容器效果。//弹性布局接口interfaceFlexInterface{(value?:FlexOptions):FlexAttribute;}Value用来设置子组件的排列样式

弹性布局的选项接口declareinterfaceFlexOptions{direction?:FlexDirection;//设置方向wrap?:FlexWrap;//设置子组件是单行/列还是多行/列排序justifyContent?:FlexAlign;//设置子组件在主轴上的对齐方式alignItems?:ItemAlign;//设置子组件在交叉轴上的对齐方式alignContent?:FlexAlign;//当交叉轴有额外的空间时，设置多行内容的对齐方式}Flex