【界面开发实战】使用DevEco Studio编写支付宝首页

效果展示

知识点

层叠布局

上一篇文章已经介绍了，这篇文章中不再赘述，如果想了解的话可以去看上一篇文章，链接如下：

http://t.csdnimg.cn/CnBZMhttp://t.csdnimg.cn/CnBZM

弹性布局

作用：提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。

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

主轴为水平方向的Flex容器示意图

主轴

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

交叉轴

垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

布局方向

布局换行

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

主轴对齐方式

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

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

页面滚动Scroll

作用：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

属性

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向 默认值：ScrollDirection.Vertical
scrollBar	BarState	设置滚动条状态 默认值：BarState.Auto 说明：如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。
scrollBarColor	string  number Color	设置滚动条的颜色
scrollBarWidth	string number	设置滚动条的宽度，不支持百分比设置 默认值：4 单位：vp 说明：如果滚动条的宽度超过其高度，则滚动条的宽度会变为默认值
scrollSnap10+	ScrollSnapOptions	设置Scroll组件的限位滚动模式
edgeEffect	EdgeEffect	设置滑动效果 默认值：EdgeEffect.None
enableScrollInteraction1