鸿蒙上实现世界杯主界面

　　最近在看社区提供的appsamples，其中有一个线性容器ArrayList，看我后让我想起Android中Scroll与ListView嵌套使用时需要解决的滑动冲突问题。
　　我想在OpenHarmony系统上是否也存在类似问题，Scroll与List嵌套后是否存在滑动问题？
　　Scroll内嵌套List先说个结论：不会出现List中只显示一个item问题滑动事件不会冲突，在List区域可以滑动列表，在非List区域可以滑动Scroll滚动时，若List不设置宽高，则默认全部加载，在对性能有要求的场景下建议指定List的宽高
　　基础信息
　　Scroll和List都属于基础容器：
　　Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
　　官方介绍：https：gitee。comopenharmonydocsblobmasterzhcnapplicationdevreferencearkuitstscontainerscroll。md
　　List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
　　官方介绍：https：gitee。comopenharmonydocsblobmasterzhcnapplicationdevreferencearkuitstscontainerlist。md
　　需求
　　既然在OpenHarmony系统中Scroll与List不存在冲突问题，我们做一些其他的尝试，让Scroll与List的滚动结合实现联动。
　　场景：实现世界杯主界面，包括球员banner、赛事、积分榜。启动页，3s后进入主页面头部显示球员banner，首次显示3个球员，每隔3秒切换一个球员球赛列表，包括：对战球队、比分、比赛状态（未开赛、已结束、进行中）、赛程球赛列表拉到最后一条，触发全屏显示积分榜点击返回首页，返回到页面顶部，球赛列表返回首条显示在一个页面中实现草图如下：
　　效果如下：
　　开发环境IDE：DevEcoStudio3。0Beta4BuildVersion：3。0。0。992，builtonJuly14，2022SDK：FullSDK93。2。7。6系统：OpenHarmonyv3。2beta3
　　实践
　　声明：示例中的数据的自己构建的，只为示例显示使用，与实际比赛数据存在差异，请忽略。创建项目
　　说明：在DevEcoStudioIDE中构建OpenHarmonyStage模型项目，SDK选择9（3。2。7。6）。
　　关键代码import｛BaseDataSource｝from。。MainAbilitymodelBaseDataSourceimport｛Information｝from。。MainAbilitymodelInformationimport｛MatchInfo，MatchState｝from。。MainAbilitycommonFlagDataimport｛MatchDataResource｝from。。MainAbilitymodelMatchDataResourceimport｛BannerDataResource｝from。。MainAbilitymodelBannerDataResourceconstTAG：stringScrollList0代表滚动到List顶部，1代表中间值，2代表滚动到List底部constSCROLLLISTPOSITION｛START：0，CENTER：1，END：2｝constLISTSTART｛TOP：0，BUTTON：1｝classMatchDataSourceextendsBaseDataSourceInformation｛constructor（infos：Information〔〕）｛super（infos）｝｝classBannerDataSourceextendsBaseDataSourceBannerDataResource｛constructor（infos：BannerDataResource〔〕）｛super（infos）｝｝functionmock（）：Information〔〕｛varinfos〔〕for（vari0；i10；i）｛varitemnewInformation（）item。idiitem。stateMath。floor（Math。random（）2）获取02的随机整数varhomeIndex：numberMath。floor（Math。random（）12）获取012的随机整数item。homeNameMatchInfo〔homeIndex〕。nameitem。homeFlagMatchInfo〔homeIndex〕。resourcevarawayFieldIndex：numberMath。floor（Math。random（）12）获取012的随机整数if（awayFieldIndexhomeIndex）｛awayFieldIndexMath。floor（Math。random（）12）获取012的随机整数｝item。awayFieldNameMatchInfo〔awayFieldIndex〕。nameitem。awayFieldFlagMatchInfo〔awayFieldIndex〕。resourceif（item。state！MatchState。NOTSTART）｛item。homeScoreMath。floor（Math。random（）6）item。awayFiledScoreMath。floor（Math。random（）6）｝vardata：numberMath。floor（Math。random（）20）获取020的随机整数vartime：numberMath。floor（Math。random（）24）获取024的随机整数item。gameTime12datatime：00infos〔i〕item｝returninfos｝functionmockBanner（）：BannerDataResource〔〕｛varbanners〔｛id：1，resource：r（app。media。banner01）｝，｛id：2，resource：r（app。media。banner02）｝，｛id：3，resource：r（app。media。banner03）｝，｛id：4，resource：r（app。media。banner04）｝，｛id：5，resource：r（app。media。banner05）｝〕returnbanners｝EntryComponentstructIndex｛privatelistPosition：numberSCROLLLISTPOSITION。STARTStateprivatelistState：numberLISTSTART。TOPprivatescrollerForScroll：ScrollernewScroller（）可滚动容器组件的控制器privatescrollerForList：ScrollernewScroller（）mock数据privatematchData：Information〔〕mock（）privatematchDataSource：MatchDataSourcenewMatchDataSource（this。matchData）bannerprivatebannerData：BannerDataResource〔〕mockBanner（）privatebannerDataSource：BannerDataSourcenewBannerDataSource（this。bannerData）privateswiperController：SwiperControllernewSwiperController（）StateprivateisShowFlashscreen：booleantrueprivatetimeOutID：numberaboutToAppear（）｛this。startTimeout（）｝aboutToDisappear（）｛this。stopTimeout（）｝build（）｛Stack（）｛if（this。isShowFlashscreen）｛Image（r（app。media。flashscreen））。width（100）。height（100）。objectFit（ImageFit。Cover）｝else｛Scroll（this。scrollerForScroll）｛Column（）｛Swiper（this。swiperController）｛LazyForEach（this。bannerDataSource，（item：BannerDataResource）｛Image（item。resource）。width（33。3）。height（100）。objectFit（ImageFit。Cover）｝，itemitem。id。toString（））｝。width（100）。height（35）。cachedCount（3）。index（0）。autoPlay（true）。loop（true）。displayMode（SwiperDisplayMode。AutoLinear）。indicator（false）。indicatorStyle（｛selectedColor：r（app。color。redbg）｝）Divider（）。strokeWidth（3）。color（r（app。color。redbg））Column（）｛List（｛space：10，scroller：this。scrollerForList｝）｛LazyForEach（this。matchDataSource，（item：Information）｛ListItem（）｛Row（）｛Column（｛space：10｝）｛Image（item。homeFlag）。width（60）。height（45）。objectFit（ImageFit。Contain）Text（item。homeName）。width（100）。fontSize（16）。textAlign（TextAlign。Center）｝。width（30）Column（｛space：10｝）｛Text（this。getMatchState（item。state））。width（100）。fontSize（12）。fontColor（r（app。color。eventtext））。textAlign（TextAlign。Center）Text（this。getMatchSource（item））。width（100）。fontSize（18）。textAlign（TextAlign。Center）Text（item。gameType）。width（100）。fontSize（12）。fontColor（r（app。color。eventtext））。textAlign（TextAlign。Center）｝。width（30）Column（｛space：10｝）｛Image（item。awayFieldFlag）。width（60）。height（45）。objectFit（ImageFit。Contain）Text（item。awayFieldName）。width（100）。fontSize（16）。textAlign（TextAlign。Center）｝。width（30）｝。width（100）。height（100）。justifyContent（FlexAlign。SpaceBetween）。border（｛radius：15｝）。backgroundColor（r（app。color。white））｝。width（100）。height（95）｝，itemitem。id。toString（））｝。width（90）。height（100）。edgeEffect（EdgeEffect。Spring）滑动效果。onReachStart（（）｛滑动开始this。listPositionSCROLLLISTPOSITION。START｝）。onReachEnd（（）｛滑动结束this。listPositionSCROLLLISTPOSITION。END｝）。onScrollBegin（（dx：number，dy：number）｛console。info（TAG，listPositinotallow｛this。listPosition｝dx｛dx｝，dy｛dy｝）if（this。listPositionSCROLLLISTPOSITION。STARTdy0）｛列表顶部this。scrollerForScroll。scrollBy（0，dy）this。scrollerForScroll。scrollEdge（Edge。Start）this。listStateLISTSTART。TOP｝elseif（this。listPositionSCROLLLISTPOSITION。ENDdy0）｛列表底部this。scrollerForScroll。scrollBy（0，dy）this。scrollerForScroll。scrollEdge（Edge。Bottom）this。listStateLISTSTART。BUTTON｝this。listPositionSCROLLLISTPOSITION。CENTERreturn｛dxRemain：dx，dyRemain：dy｝｝）｝。width（100）。height（60）。padding（｛top：20，bottom：20｝）。borderRadius（｛bottomLeft：15，bottomRight：15｝）。backgroundColor（r（app。color。contentbg））Column（）｛if（this。listStateLISTSTART。TOP）｛Text（继续上滑积分排名）。width（100）。height（5）。fontColor（r（app。color。white））。fontSize（14）。textAlign（TextAlign。Center）｝else｛Text（回到首页）。width（100）。height（5）。fontColor（r（app。color。white））。fontSize（14）。textAlign（TextAlign。Center）。onClick（（）｛this。scrollerForScroll。scrollEdge（Edge。Start）this。scrollerForList。scrollToIndex（0）this。listStateLISTSTART。TOP｝）｝Stack（）｛Image（r（app。media。result1））。width（100）。height（100）。objectFit（ImageFit。Cover）Column（）｛｝。width（100）。height（100）。backgroundColor（55000000）Image（r（app。media。footballposter））。width（100）。height（100）。objectFit（ImageFit。Contain）。opacity（0。70）。borderRadius（｛topLeft：15，topRight：15｝）｝。width（100）。height（95）｝。width（100）。height（100）｝｝。width（100）。height（100）。onScrollBegin（（dx：number，dy：number）｛return｛dxRemain：dx，dyRemain：0｝｝）｝｝。width（100）。height（100）。backgroundColor（r（app。color。mainbg））｝getMatchState（state：number）：string｛varstateVal：stringswitch（state）｛caseMatchState。PROGRESS：｛stateVal进行中break；｝caseMatchState。NOTSTART：｛stateVal未开赛break；｝caseMatchState。CLOSED：｛stateVal已结束break；｝default：stateVal｝returnstateVal；｝getMatchSource（data：Information）：string｛if（data。stateMatchState。NOTSTART）｛return：｝else｛returndata。homeScore：data。awayFiledScore｝｝startTimeout（）｛this。timeOutIDsetTimeout（（）｛this。isShowFlashscreenfalse｝，3000）｝stopTimeout（）｛clearTimeout（this。timeOutID）｝｝
　　根据代码说明下实现方式：
　　3s进入主页面，主要通过定时器setTimeout（）实现，设置3s后隐藏全屏图片。
　　全屏图片父容器使用堆叠容器Stack包裹，通过this。isShowFlashscreen变量判断是否隐藏全屏图片，显示主页面。
　　主页面中，最外层通过Scroll容器，作为主页面的根容器。
　　球员banner使用滑块视图容器Swiper，内部使用LazyForEach懒加载方式加载球员图片，单屏横向显示三个球员，所以球员的图片高度为屏幕总宽度的33。3。
　　并将滑块组件的displayMode属性设置为SwiperDisplayMode。AutoLinear，让Swiper滑动一页的宽度为子组件宽度中的最大值，这样每次滑动的宽度就是33。3，一个球员的图片。
　　赛程列表，使用List组件进行加载，赛事item使用LazyForEach懒加载的方式提交列表加载效率。
　　通过List中的事件监听器onReachStart（event：（）void）和onReachEnd（event：（）void）监听列表达到起始位置或底末尾位置。
　　并在onScrollBegin（event：（dx：number，dy：number）｛dxRemain：number，dyRemain：number｝）函数中监听列表的滑动量，如果滑动到List底部，再向上滑动界面时触发显示积分排行界面。
　　积分排行界面内容，初始化时超屏显示，只有在滑动到List底部是，才被拉起显示。
　　积分排行界面设置在Scroll容器中，通过this。scrollerForScroll。scrollEdge（Edge。Bottom）拉起页面。
　　点击返回首页，通过设置this。scrollerForScroll。scrollEdge（Edge。Start），返回到Scroll顶部。
　　代码中使用到的组件关键APIScroll
　　说明：若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect。None。Swiper
　　List
　　完整代码：https：gitee。comxjszzz9openharmonyarkuiscrolllisto
　　如果您能看到最后，还希望您能动动手指点个赞，一个人能走多远关键在于与谁同行，我用跨越山海的一路相伴，希望得到您的点赞。