阅读量:0
效果展示
知识点
层叠布局
上一篇文章已经介绍了，这篇文章中不再赘述，如果想了解的话可以去看上一篇文章，链接如下：
http://t.csdnimg.cn/CnBZM
http://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 |
| enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或鼠标滚动，但不影响控制器的滚动接口 默认值：true |
| nestedScroll10+ | NestedScrollOptions | 嵌套滚动选项，设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动 |
| firction10+ | number Resource | 设置摩擦系数，手动划动滚动区域时生效，只对惯性运动过程中的链式效果有间接影响 默认值：非可穿戴设备为0.6，可穿戴设备为0.9 说明：设置为小于0的值时，按默认值处理 |
ScrollDirection枚举说明
| 名称 | 描述 |
|---|---|
| Horizontal | 仅支持水平方向滚动 |
| Vertical | 仅支持竖直方向滚动 |
| None | 不可滚动 |
| Free(deprecated) | 支持竖直或水平方向滚动，从API version9开始废弃 |
代码展示
@Entry @Component struct Index { @State message: string = 'Hello World'; build() { Stack({ alignContent: Alignment.Bottom }) { // 内容区域 Stack({ alignContent: Alignment.Top }) { // 搜索区域 Row() { // 地区和天气 Column() { Row() { Text("北京") .fontColor("#fff") Image($r("app.media.zfb_head_down")) .margin({ top: 2, left: 5 }) .width(10) .fillColor("#fff") }.alignItems(VerticalAlign.Top) Text("晴 2℃") .fontSize(12) .fontColor("#fff") }.alignItems(HorizontalAlign.Start) // 搜索框 Row() { Image($r("app.media.zfb_head_search")) .width(20) .fillColor("#666") Text("北京交通一卡通") .margin({ left: 5 }) .layoutWeight(1) Text("|") .fontColor("#ccc") Text("搜索") .width(55) .textAlign(TextAlign.Center) .fontWeight(700) .fontColor("#6792E1") } .height(40) .padding({ left: 10 }) .margin({ left: 15, right: 15 }) .layoutWeight(1) .backgroundColor("#fff") .borderRadius(10) // 更多 Image($r("app.media.zfb_head_plus")) .width(30) .fillColor("#fff") } .padding(10) .height(60) .backgroundColor("#4B73EC") .zIndex(66) // 滚动区域 Scroll() { Column() { // 扫一扫区域 Row() { Column() { Image($r("app.media.zfb_top_scan")) .width(36) .fillColor("#fff") Text("扫一扫") .fontColor("#fff") } Column() { Image($r("app.media.zfb_top_pay")) .width(36) .fillColor("#fff") Text("收付款") .fontColor("#fff") } Column() { Image($r("app.media.zfb_top_travel")) .width(36) .fillColor("#fff") Text("出行") .fontColor("#fff") } Column() { Image($r("app.media.zfb_top_card")) .width(36) .fillColor("#fff") Text("卡包") .fontColor("#fff") } } .padding({ top: 5, bottom: 15 }) .width("100%") .justifyContent(FlexAlign.SpaceAround) .backgroundColor("#4B73EC") // 主体内容区域 Column() { // 快捷菜单区域 Flex({ wrap: FlexWrap.Wrap, }) { Column() { Image($r("app.media.zfb_nav1")) .width(28) Text("滴滴出行") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav2")) .width(28) Text("生活缴费") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav3")) .width(28) Text("股票") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav4")) .width(28) Text("蚂蚁森林") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav5")) .width(28) Text("手机充值") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav6")) .width(28) Text("余额宝") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav7")) .width(28) Text("花呗") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav8")) .width(28) Text("飞猪旅行") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav9")) .width(28) Text("淘票票") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav10")) .width(28) Text("饿了么") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav11")) .width(28) Text("读书听书") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav12")) .width(28) Text("基金") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav13")) .width(28) Text("直播推广") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav14")) .width(28) Text("医疗健康") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") Column() { Image($r("app.media.zfb_nav15_more")) .width(28) Text("更多") .margin({ top: 8, bottom: 10 }) .fontSize("13") .fontColor("#666") } .width("20%") } .padding(10) Row() { Image($r("app.media.zfb_pro_pic1")) .width("30%") Image($r("app.media.zfb_pro_pic2")) .width("30%") Image($r("app.media.zfb_pro_pic3")) .width("30%") } .width("100%") .justifyContent(FlexAlign.SpaceAround) Image($r("app.media.zfb_pro_list1")) .width("97%") .margin({ top: 10, bottom: 10 }) Image($r("app.media.zfb_pro_list2")) .width("97%") .margin({ bottom: 10 }) } .borderRadius({ topLeft: 20, topRight: 20 }) .width("100%") .backgroundColor("#f6f6f6") } } .scrollable(ScrollDirection.Vertical) .width("100%") .padding({ top: 60, bottom: 60 }) } .height("100%") // tabBar区域 Row() { Column() { Image($r("app.media.zfb_tab_home")) .width(35) } .layoutWeight(1) Column({ space: 4 }) { Image($r("app.media.zfb_tab_money")) .width(28) Text("理财") .fontSize(14) } .layoutWeight(1) Column({ space: 4 }) { Image($r("app.media.zfb_tab_life")) .width(28) Text("生活") .fontSize(14) } .layoutWeight(1) Column({ space: 4 }) { Image($r("app.media.zfb_tab_chat")) .width(28) Text("消息") .fontSize(14) } .layoutWeight(1) Column({ space: 4 }) { Image($r("app.media.zfb_tab_me")) .width(28) Text("我的") .fontSize(14) } .layoutWeight(1) } .width("100%") .height(60) .backgroundColor("#fff") } .height("100%") .width("100%") .backgroundColor("#4B73EC") } }