{"id":86658,"date":"2026-07-29T00:08:37","date_gmt":"2026-07-28T16:08:37","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/86658.html"},"modified":"2026-07-29T00:08:37","modified_gmt":"2026-07-28T16:08:37","slug":"harmonyos%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%ef%bc%9a%e7%8c%ab%e7%8c%ab%e5%a4%a7%e4%bd%9c%e6%88%98-scroll-%e5%ae%b9%e5%99%a8%e3%80%81scroller-%e6%8e%a7%e5%88%b6%e5%99%a8%e3%80%81","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/86658.html","title":{"rendered":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd"},"content":{"rendered":"

\"\u6587\u7ae0\u914d\u56fe\uff1aScroll<\/p>\n

\"\u9875\u9762\u9884\u89c8\"<\/p>\n

\u524d\u8a00<\/h3>\n

\u524d\u51e0\u7bc7\u6211\u4eec\u7528 Column\/Row\/Blank\/layoutWeight \u642d\u597d\u4e86 HUD\u3001\u5e95\u90e8\u680f\u3001\u68cb\u76d8\u2014\u2014\u6240\u6709\u5185\u5bb9\u90fd\u4e00\u5c4f\u88c5\u5f97\u4e0b\u3002\u4f46\u5b9e\u6218\u4e2d\u7ecf\u5e38\u9047\u5230\u5185\u5bb9\u8d85\u51fa\u5c4f\u5e55\u7684\u573a\u666f：\u6e38\u620f\u89c4\u5219\u8bf4\u660e\u592a\u957f\u3001\u6218\u7ee9\u5386\u53f2\u51e0\u5341\u6761\u3001\u8bbe\u7f6e\u9875\u5341\u51e0\u9879\u3002\u8fd9\u65f6\u5019\u9700\u8981\u6eda\u52a8\u5bb9\u5668\u8ba9\u7528\u6237\u4e0a\u4e0b\/\u5de6\u53f3\u6ed1\u52a8\u67e5\u770b\u3002<\/p>\n

HarmonyOS \u63d0\u4f9b\u4e86 Scroll \u6eda\u52a8\u5bb9\u5668 + Scroller \u6eda\u52a8\u63a7\u5236\u5668\u2014\u2014\u524d\u8005\u8d1f\u8d23\u53ef\u6eda\u52a8\u533a\u57df，\u540e\u8005\u8d1f\u8d23\u7f16\u7a0b\u5f0f\u6eda\u52a8（scrollTo\u3001scrollEdge）\u3002\u672c\u7bc7\u4ee5\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u89c4\u5219\u8bf4\u660e\u9762\u677f\u6269\u5c55\u4e3a\u951a\u70b9，\u628a Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd\u4e09\u5927\u8981\u70b9\u8bb2\u900f\u3002<\/p>\n

\u63d0\u793a：\u672c\u7cfb\u5217\u4e0d\u8bb2 ArkTS \u57fa\u7840\u8bed\u6cd5\u4e0e\u73af\u5883\u642d\u5efa，\u5047\u8bbe\u4f60\u5df2\u8ddf\u5b8c\u7b2c 1\u201324 \u7bc7\u3002\u672c\u7bc7\u662f\u5e03\u5c40\u8fdb\u9636\u7684\u7b2c\u4e94\u7bc7\u3002<\/p>\n

\u4e00\u3001\u573a\u666f\u62c6\u89e3：\u89c4\u5219\u9762\u677f\u9700\u8981\u6eda\u52a8<\/h3>\n

\u56de\u987e\u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u4e3b\u83dc\u5355\u7684\u89c4\u5219\u9762\u677f（\u7b2c 4 \u7bc7）：<\/p>\n

\/\/ \u6765\u6e90：entry\/src\/main\/ets\/pages\/Index.ets MainMenuView() \u89c4\u5219\u9762\u677f<\/span>
\nColumn<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u6e38\u620f\u89c4\u5219'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#2C3E50'<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u70b9\u51fb\u5217\u6295\u653e\u732b\u54aa'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u76f8\u90bb\u540c\u7ea7\u732b\u54aa\u81ea\u52a8\u5408\u5e76\u5347\u7ea7'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u8fde\u7eed\u5408\u5e76\u89e6\u53d1\u8fde\u51fb\u52a0\u5206'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u732b\u54aa\u5806\u5230\u9876\u90e8\u5219\u6e38\u620f\u7ed3\u675f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
\n}<\/span>
\n.<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>
\n.<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>
\n.<\/span>backgroundColor<\/span>(<\/span>'rgba(255,255,255,0.7)'<\/span>)<\/span>
\n.<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span>
\n.<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span><\/p>\n

\u73b0\u5728\u89c4\u5219\u6269\u5c55\u5230 10 \u6761，Column \u9ad8\u5ea6\u6491\u7206\u5c4f\u5e55，\u5e95\u90e8\u6309\u94ae\u88ab\u63a8\u51fa\u53ef\u89c6\u533a\u3002\u9700\u8981\u7ed9\u89c4\u5219\u9762\u677f\u5957\u4e00\u5c42 Scroll \u8ba9\u5b83\u53ef\u4e0a\u4e0b\u6eda\u52a8\u3002<\/p>\n

Scroll \u7684\u89e3\u6cd5：<\/p>\n

Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n \/* 10 \u6761\u89c4\u5219 *\/<\/span>
\n }<\/span>
\n}<\/span>
\n.<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span> \/\/ \u7eb5\u5411\u6eda\u52a8<\/span>
\n.<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span> \/\/ \u81ea\u52a8\u663e\u793a\u6eda\u52a8\u6761<\/span>
\n.<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>
\n.<\/span>height<\/span>(<\/span>200<\/span>)<\/span> \/\/ \u56fa\u5b9a\u9ad8\u5ea6，\u8d85\u51fa\u6eda\u52a8<\/span>
\n}<\/span><\/p>\n

\u5173\u952e\u7ecf\u9a8c：Scroll \u5fc5\u987b\u8bbe\u56fa\u5b9a height\u2014\u2014\u4e0d\u8bbe\u9ad8\u5ea6，Scroll \u4f1a\u6491\u5f00\u5230\u5185\u5bb9\u5168\u9ad8，\u5931\u53bb\u6eda\u52a8\u610f\u4e49\u3002<\/p>\n

\u4e8c\u3001Scroll \u6eda\u52a8\u5bb9\u5668<\/h3>\n

2.1 \u57fa\u672c\u7ed3\u6784<\/h4>\n

Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span> \/\/ \u6216 Row，\u53ea\u80fd\u6709\u4e00\u4e2a\u76f4\u63a5\u5b50\u7ec4\u4ef6<\/span>
\n \/* \u5185\u5bb9 *\/<\/span>
\n }<\/span>
\n}<\/span>
\n.<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span>
\n.<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span>
\n.<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>
\n.<\/span>height<\/span>(<\/span>200<\/span>)<\/span><\/p>\n

\u6838\u5fc3\u7ea6\u675f：<\/p>\n\n\u7ea6\u675f\u8bf4\u660e<\/tr>\n\n\n\n\n\n
\u53ea\u80fd\u6709\u4e00\u4e2a\u76f4\u63a5\u5b50\u7ec4\u4ef6<\/td>\n\u591a\u4e2a\u9700\u7528 Column\/Row \u5305\u88f9<\/td>\n<\/tr>\n
\u5fc5\u987b\u8bbe height（\u7eb5\u5411）<\/td>\n\u5426\u5219\u6491\u5f00\u5230\u5185\u5bb9\u5168\u9ad8，\u4e0d\u6eda\u52a8<\/td>\n<\/tr>\n
\u5fc5\u987b\u8bbe width（\u6a2a\u5411）<\/td>\n\u5426\u5219\u6491\u5f00\u5230\u5185\u5bb9\u5168\u5bbd<\/td>\n<\/tr>\n
\u5185\u5bb9\u8d85\u51fa\u5bb9\u5668\u5c3a\u5bf8\u624d\u4f1a\u6eda\u52a8<\/td>\n\u5185\u5bb9\u77ed\u4e0d\u6eda\u52a8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.2 scrollable \u6eda\u52a8\u65b9\u5411<\/h4>\n

.<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span> \/\/ \u7eb5\u5411（\u9ed8\u8ba4）<\/span>
\n.<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Horizontal)<\/span> \/\/ \u6a2a\u5411<\/span><\/p>\n\n\u65b9\u5411\u9002\u7528height \u8981\u6c42<\/tr>\n\n\n\n
Vertical<\/td>\n\u5217\u8868\u3001\u6587\u7ae0<\/td>\n\u5fc5\u987b\u8bbe<\/td>\n<\/tr>\n
Horizontal<\/td>\n\u6a2a\u5411\u8f6e\u64ad\u3001Tab \u6761<\/td>\n\u5fc5\u987b\u8bbe width<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.3 scrollBar \u6eda\u52a8\u6761<\/h4>\n

.<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span> \/\/ \u81ea\u52a8：\u6eda\u52a8\u65f6\u663e\u793a，\u505c\u6b62\u540e\u6de1\u51fa<\/span>
\n.<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>On)<\/span> \/\/ \u5e38\u663e：\u4e00\u76f4\u663e\u793a<\/span>
\n.<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Off)<\/span> \/\/ \u9690\u85cf：\u4e0d\u663e\u793a\u6eda\u52a8\u6761<\/span><\/p>\n

\u5b9e\u6218\u7ecf\u9a8c：\u6e38\u620f\u5185\u89c4\u5219\u9762\u677f\u7528 BarState.Auto\u2014\u2014\u6eda\u52a8\u65f6\u7ed9\u89c6\u89c9\u53cd\u9988，\u4e0d\u6eda\u52a8\u65f6\u4e0d\u6253\u6270\u3002<\/p>\n

\u4e09\u3001Scroller \u6eda\u52a8\u63a7\u5236\u5668<\/h3>\n

3.1 \u521b\u5efa Scroller<\/h4>\n

private<\/span> scroller:<\/span> Scroller =<\/span> new<\/span> Scroller<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

Scroll<\/span>(<\/span>this<\/span>.<\/span>scroller)<\/span> {<\/span> \/\/ \u628a Scroller \u4f20\u7ed9 Scroll<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
\n}<\/span>
\n.<\/span>height<\/span>(<\/span>200<\/span>)<\/span><\/p>\n

Scroller \u662f\u4e00\u4e2a\u63a7\u5236\u5668\u5bf9\u8c61，\u4f20\u7ed9 Scroll \u540e，\u5c31\u80fd\u7528\u5b83\u7684 API \u7f16\u7a0b\u5f0f\u63a7\u5236\u6eda\u52a8\u3002<\/p>\n

3.2 scrollTo \u6eda\u52a8\u5230\u6307\u5b9a\u4f4d\u7f6e<\/h4>\n

this<\/span>.<\/span>scroller.<\/span>scrollTo<\/span>(<\/span>{<\/span>
\n xOffset:<\/span> 0<\/span>,<\/span> \/\/ \u6a2a\u5411\u504f\u79fb（vp）<\/span>
\n yOffset:<\/span> 100<\/span>,<\/span> \/\/ \u7eb5\u5411\u504f\u79fb（vp）：\u5411\u4e0b\u6eda 100vp<\/span>
\n animation:<\/span> {<\/span> duration:<\/span> 300<\/span>,<\/span> curve:<\/span> Curve.<\/span>EaseOut }<\/span> \/\/ \u5e26\u52a8\u753b<\/span>
\n}<\/span>)<\/span><\/p>\n

\u573a\u666f：\u70b9\u51fb\u300c\u8df3\u5230\u7b2c 5 \u6761\u89c4\u5219\u300d\u6309\u94ae，\u5e73\u6ed1\u6eda\u5230\u5bf9\u5e94\u4f4d\u7f6e\u3002<\/p>\n

3.3 scrollEdge \u6eda\u52a8\u5230\u8fb9\u7f18<\/h4>\n

this<\/span>.<\/span>scroller.<\/span>scrollEdge<\/span>(<\/span>Edge.<\/span>Top)<\/span> \/\/ \u6eda\u5230\u9876<\/span>
\nthis<\/span>.<\/span>scroller.<\/span>scrollEdge<\/span>(<\/span>Edge.<\/span>Bottom)<\/span> \/\/ \u6eda\u5230\u5e95<\/span><\/p>\n

\u573a\u666f：\u804a\u5929\u9875\u6536\u5230\u65b0\u6d88\u606f\u81ea\u52a8\u6eda\u5230\u5e95\u90e8\u3002<\/p>\n

3.4 scrollToIndex \u6eda\u5230\u6307\u5b9a\u9879（\u9700\u914d\u5408 List）<\/h4>\n

\/\/ Scroller \u4e3b\u8981\u914d\u5408 List \u4f7f\u7528<\/span>
\nList<\/span>(<\/span>{<\/span> scroller:<\/span> this<\/span>.<\/span>scroller }<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
\nthis<\/span>.<\/span>scroller.<\/span>scrollToIndex<\/span>(<\/span>10<\/span>)<\/span> \/\/ \u6eda\u5230\u7b2c 10 \u9879<\/span><\/p>\n

\u63d0\u793a：scrollToIndex \u4e3b\u8981\u7528\u4e8e List \u7ec4\u4ef6，\u666e\u901a Scroll \u7528 scrollTo\u3002\u672c\u7cfb\u5217\u7b2c 68 \u7bc7\u4f1a\u4e13\u8bb2 LazyForEach \u5927\u5217\u8868\u3002<\/p>\n

3.5 currentOffset \u83b7\u53d6\u5f53\u524d\u504f\u79fb<\/h4>\n

const<\/span> offset =<\/span> this<\/span>.<\/span>scroller.<\/span>currentOffset<\/span>(<\/span>)<\/span>;<\/span>
\nconsole<\/span>.<\/span>info<\/span>(<\/span>`<\/span>x: <\/span>${<\/span>offset.<\/span>xOffset}<\/span><\/span>, y: <\/span>${<\/span>offset.<\/span>yOffset}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span><\/p>\n

\u573a\u666f：\u6839\u636e\u6eda\u52a8\u4f4d\u7f6e\u663e\u793a\u300c\u56de\u5230\u9876\u90e8\u300d\u6309\u94ae\u2014\u2014yOffset > 200 \u65f6\u663e\u793a\u3002<\/p>\n

\u56db\u3001\u7528 Scroll \u6539\u9020\u89c4\u5219\u9762\u677f<\/h3>\n

4.1 \u6539\u9020\u4e3a\u53ef\u6eda\u52a8\u89c4\u5219\u9762\u677f<\/h4>\n

@<\/span>Builder<\/span><\/span>
\nMainMenuView<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n Spacer<\/span>(<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'15%'<\/span>)<\/span><\/p>\n

\/\/ \u6e38\u620f\u6807\u9898<\/span>
\n Text<\/span>(<\/span>'🐱'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>72<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u732b\u732b\u5927\u4f5c\u6218'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>36<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#2C3E50'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u5408\u5e76\u8fdb\u5316 \u00b7 \u7b56\u7565\u6d88\u9664'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#95A5A6'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 48<\/span> }<\/span>)<\/span><\/p>\n

\/\/ \u6700\u9ad8\u5206<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>highScore ><\/span> 0<\/span>)<\/span> {<\/span>
\n Row<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'🏆 \u6700\u9ad8\u5206: '<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#F1C40F'<\/span>)<\/span>
\n Text<\/span>(<\/span>this<\/span>.<\/span>highScore.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>20<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#F1C40F'<\/span>)<\/span>
\n }<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 32<\/span> }<\/span>)<\/span>
\n }<\/span><\/p>\n

\/\/ \u5f00\u59cb\u6e38\u620f\u6309\u94ae<\/span>
\n Button<\/span>(<\/span>'\u5f00\u59cb\u6e38\u620f'<\/span>)<\/span>
\n .<\/span>width<\/span>(<\/span>'70%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>56<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>20<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>'#FFFFFF'<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>'#2ECC71'<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>28<\/span>)<\/span>
\n .<\/span>shadow<\/span>(<\/span>{<\/span> radius:<\/span> 8<\/span>,<\/span> color:<\/span> 'rgba(46, 204, 113, 0.4)'<\/span>,<\/span> offsetY:<\/span> 4<\/span> }<\/span>)<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>startGame<\/span>(<\/span>)<\/span>;<\/span> }<\/span>)<\/span><\/p>\n

Spacer<\/span>(<\/span>)<\/span>.<\/span>height<\/span>(<\/span>24<\/span>)<\/span><\/p>\n

\/\/ \u6e38\u620f\u89c4\u5219\u9762\u677f（\u672c\u7bc7\u6539\u9020：\u5957 Scroll \u8ba9\u89c4\u5219\u53ef\u6eda\u52a8）<\/span>
\n Scroll<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n Text<\/span>(<\/span>'\u6e38\u620f\u89c4\u5219'<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>
\n .<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
\n .<\/span>fontColor<\/span>(<\/span>'#2C3E50'<\/span>)<\/span>
\n .<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span><\/p>\n

Text<\/span>(<\/span>'\u2022 \u70b9\u51fb\u5217\u6295\u653e\u732b\u54aa'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u76f8\u90bb\u540c\u7ea7\u732b\u54aa\u81ea\u52a8\u5408\u5e76\u5347\u7ea7'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u8fde\u7eed\u5408\u5e76\u89e6\u53d1\u8fde\u51fb\u52a0\u5206'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u732b\u54aa\u5806\u5230\u9876\u90e8\u5219\u6e38\u620f\u7ed3\u675f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u540c\u7ea7\u732b\u54aa\u76f8\u90bb 2 \u4e2a\u81ea\u52a8\u5408\u5e76'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u5408\u5e76\u540e\u7b49\u7ea7 +1，\u5f97\u5206\u6309 3^n \u589e\u957f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u8fde\u51fb\u7a97\u53e3 1.5s，\u8fde\u7eed\u5408\u5e76\u500d\u7387\u53e0\u52a0'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u6700\u9ad8\u7b49\u7ea7\u4f20\u5947\u732b，\u5f97\u5206 2430'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u81ea\u52a8\u751f\u6210\u95f4\u9694 2s，\u6700\u591a 40 \u53ea'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
\n Text<\/span>(<\/span>'\u2022 \u68cb\u76d8 5 \u5217 8 \u884c，\u7b2c 2 \u884c\u5806\u79ef\u5219\u7ed3\u675f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
\n }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
\n }<\/span>
\n .<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span>
\n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span>
\n .<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>180<\/span>)<\/span> \/\/ \u56fa\u5b9a 180vp \u9ad8，\u8d85\u51fa\u6eda\u52a8<\/span>
\n .<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>'rgba(255,255,255,0.7)'<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

Spacer<\/span>(<\/span>)<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
\n .<\/span>linearGradient<\/span>(<\/span>{<\/span>
\n direction:<\/span> GradientDirection.<\/span>Bottom,<\/span>
\n colors:<\/span> [<\/span>[<\/span>'#E8F4F8'<\/span>,<\/span> 0.0<\/span>]<\/span>,<\/span> [<\/span>'#D6EEF5'<\/span>,<\/span> 0.5<\/span>]<\/span>,<\/span> [<\/span>'#C9E8F2'<\/span>,<\/span> 1.0<\/span>]<\/span>]<\/span>
\n }<\/span>)<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
\n}<\/span><\/p>\n

\u6539\u9020\u5bf9\u6bd4：<\/p>\n\n\u7ef4\u5ea6\u539f Column \u7248\u6539\u9020 Scroll \u7248<\/tr>\n\n\n\n\n\n
\u89c4\u5219\u6761\u6570<\/td>\n4 \u6761<\/td>\n10 \u6761<\/td>\n<\/tr>\n
\u9ad8\u5ea6<\/td>\n\u6491\u5f00\u5230\u5185\u5bb9\u5168\u9ad8<\/td>\n\u56fa\u5b9a 180vp<\/td>\n<\/tr>\n
\u8d85\u51fa\u5904\u7406<\/td>\n\u9876\u51fa\u5e95\u90e8\u6309\u94ae<\/td>\n\u5185\u90e8\u6eda\u52a8<\/td>\n<\/tr>\n
\u6eda\u52a8\u6761<\/td>\n\u65e0<\/td>\nAuto \u81ea\u52a8\u663e\u793a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

4.2 \u5173\u952e：height(180) \u56fa\u5b9a\u9ad8\u5ea6<\/h4>\n

Scroll<\/span>(<\/span>)<\/span> {<\/span> \/* 10 \u6761\u89c4\u5219 *\/<\/span> }<\/span>
\n .<\/span>height<\/span>(<\/span>180<\/span>)<\/span> \/\/ \u56fa\u5b9a\u9ad8\u5ea6<\/span><\/p>\n

\u89c4\u5219：\u5185\u5bb9\u603b\u9ad8 > 180vp \u65f6\u6eda\u52a8；\u5185\u5bb9\u603b\u9ad8 < 180vp \u65f6\u4e0d\u6eda\u52a8（Scroll \u6491\u5f00\u5230\u5185\u5bb9\u9ad8）\u3002<\/p>\n

\u8e29\u5751：\u5982\u679c\u4e0d\u8bbe height，Scroll \u4f1a\u6491\u5f00\u5230 10 \u6761\u89c4\u5219\u7684\u5168\u9ad8（\u7ea6 400vp），\u628a\u5e95\u90e8\u6309\u94ae\u9876\u51fa\u5c4f\u5e55\u2014\u2014\u8fd9\u65f6 Scroll \u7b49\u4e8e\u666e\u901a Column，\u5931\u53bb\u6eda\u52a8\u80fd\u529b\u3002<\/p>\n

\u4e94\u3001Scroll \u4e0e Scroller \u914d\u5408：\u8df3\u5230\u9876\u90e8\u6309\u94ae<\/h3>\n

5.1 \u573a\u666f<\/h4>\n

\u89c4\u5219\u9762\u677f\u6eda\u5230\u5e95\u90e8\u540e，\u7528\u6237\u60f3\u5feb\u901f\u56de\u5230\u9876\u90e8\u3002\u6211\u4eec\u5728\u9762\u677f\u53f3\u4e0a\u89d2\u653e\u4e00\u4e2a\u300c\u2191\u300d\u6309\u94ae，\u70b9\u51fb\u8c03\u7528 scroller.scrollEdge(Edge.Top) \u5e73\u6ed1\u6eda\u5230\u9876\u3002<\/p>\n

5.2 \u5b9e\u73b0<\/h4>\n

@<\/span>Entry<\/span><\/span>
\n@<\/span>Component<\/span><\/span>
\nstruct Index {<\/span>
\n private<\/span> ruleScroller:<\/span> Scroller =<\/span> new<\/span> Scroller<\/span>(<\/span>)<\/span>;<\/span>
\n @<\/span>State<\/span><\/span> showBackToTop:<\/span> boolean<\/span> =<\/span> false<\/span>;<\/span> \/\/ \u662f\u5426\u663e\u793a\u300c\u56de\u9876\u300d\u6309\u94ae<\/span><\/p>\n

@<\/span>Builder<\/span><\/span>
\n MainMenuView<\/span>(<\/span>)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span>
\n \/* \u6807\u9898\u3001\u6309\u94ae\u7b49 *\/<\/span><\/p>\n

\/\/ \u89c4\u5219\u9762\u677f（\u5e26 Scroller）<\/span>
\n Stack<\/span>(<\/span>)<\/span> {<\/span>
\n Scroll<\/span>(<\/span>this<\/span>.<\/span>ruleScroller)<\/span> {<\/span>
\n Column<\/span>(<\/span>)<\/span> {<\/span> \/* 10 \u6761\u89c4\u5219 *\/<\/span> }<\/span>
\n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
\n }<\/span>
\n .<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span>
\n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span>
\n .<\/span>onScroll<\/span>(<\/span>(<\/span>xOffset:<\/span> number<\/span>,<\/span> yOffset:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
\n \/\/ \u6eda\u52a8\u8d85\u8fc7 100vp \u663e\u793a\u56de\u9876\u6309\u94ae<\/span>
\n this<\/span>.<\/span>showBackToTop =<\/span> yOffset ><\/span> 100<\/span>;<\/span>
\n }<\/span>)<\/span>
\n .<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>
\n .<\/span>height<\/span>(<\/span>180<\/span>)<\/span>
\n .<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>'rgba(255,255,255,0.7)'<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

\/\/ \u53f3\u4e0a\u89d2\u56de\u9876\u6309\u94ae<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>showBackToTop)<\/span> {<\/span>
\n Button<\/span>(<\/span>'\u2191'<\/span>)<\/span>
\n .<\/span>width<\/span>(<\/span>32<\/span>)<\/span>.<\/span>height<\/span>(<\/span>32<\/span>)<\/span>
\n .<\/span>fontSize<\/span>(<\/span>18<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#FFFFFF'<\/span>)<\/span>
\n .<\/span>backgroundColor<\/span>(<\/span>'rgba(44, 62, 80, 0.6)'<\/span>)<\/span>
\n .<\/span>borderRadius<\/span>(<\/span>16<\/span>)<\/span>
\n .<\/span>position<\/span>(<\/span>{<\/span> x:<\/span> '85%'<\/span>,<\/span> y:<\/span> 8<\/span> }<\/span>)<\/span> \/\/ \u53f3\u4e0a\u89d2<\/span>
\n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n this<\/span>.<\/span>ruleScroller.<\/span>scrollEdge<\/span>(<\/span>Edge.<\/span>Top)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n .<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>180<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\u6267\u884c\u6d41\u7a0b：<\/p>\n

  • \u7528\u6237\u5411\u4e0b\u6eda\u89c4\u5219\u9762\u677f\u3002<\/li>\n
  • onScroll \u56de\u8c03\u89e6\u53d1，yOffset > 100 \u65f6 showBackToTop = true\u3002<\/li>\n
  • if (this.showBackToTop) \u6e32\u67d3\u300c\u2191\u300d\u6309\u94ae\u3002<\/li>\n
  • \u7528\u6237\u70b9\u51fb\u300c\u2191\u300d，scrollEdge(Edge.Top) \u5e73\u6ed1\u6eda\u5230\u9876\u3002<\/li>\n

    5.3 onScroll \u56de\u8c03<\/h4>\n

    .<\/span>onScroll<\/span>(<\/span>(<\/span>xOffset:<\/span> number<\/span>,<\/span> yOffset:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
    \n console<\/span>.<\/span>info<\/span>(<\/span>`<\/span>\u6eda\u52a8\u504f\u79fb: x=<\/span>${<\/span>xOffset}<\/span><\/span>, y=<\/span>${<\/span>yOffset}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>
    \n}<\/span>)<\/span><\/p>\n\n\u53c2\u6570\u542b\u4e49<\/tr>\n\n\n\n
    xOffset<\/td>\n\u6a2a\u5411\u6eda\u52a8\u504f\u79fb（vp）<\/td>\n<\/tr>\n
    yOffset<\/td>\n\u7eb5\u5411\u6eda\u52a8\u504f\u79fb（vp）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u6ce8\u610f：onScroll \u6eda\u52a8\u65f6\u9ad8\u9891\u89e6\u53d1（\u6bcf\u5e27\u4e00\u6b21），\u56de\u8c03\u5185\u4e0d\u8981\u505a\u91cd\u8ba1\u7b97\u3002<\/p>\n

    \u516d\u3001Scroll \u6027\u80fd\u4f18\u5316<\/h3>\n

    6.1 Scroll vs List \u7684\u53d6\u820d<\/h4>\n\n\u7ef4\u5ea6ScrollList<\/tr>\n\n\n\n\n\n
    \u5b50\u7ec4\u4ef6<\/td>\n\u4e00\u4e2a（Column\/Row \u5305\u5185\u5bb9）<\/td>\n\u591a\u4e2a ListItem<\/td>\n<\/tr>\n
    \u590d\u7528\u673a\u5236<\/td>\n\u274c \u65e0，\u5168\u90e8\u6e32\u67d3<\/td>\n\u2705 LazyForEach \u6309\u9700\u6e32\u67d3<\/td>\n<\/tr>\n
    \u9002\u5408<\/td>\n\u5185\u5bb9\u6761\u6570\u56fa\u5b9a\u4e14\u5c11（\u89c4\u5219\u9762\u677f\u3001\u8bf4\u660e\u9875）<\/td>\n\u5185\u5bb9\u6761\u6570\u591a\u6216\u52a8\u6001（\u804a\u5929\u3001\u6218\u7ee9\u5217\u8868）<\/td>\n<\/tr>\n
    \u6027\u80fd<\/td>\n\u6761\u6570\u591a\u65f6\u5361\u987f<\/td>\n\u5343\u6761\u6d41\u7545<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u5b9e\u6218\u7ecf\u9a8c：\u6761\u6570 < 20 \u7528 Scroll，\u6761\u6570 \u2265 20 \u7528 List + LazyForEach\u3002\u672c\u7cfb\u5217\u7b2c 68 \u7bc7\u4f1a\u4e13\u8bb2 LazyForEach \u5927\u5217\u8868\u3002<\/p>\n

    6.2 \u907f\u514d\u5d4c\u5957 Scroll<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u5d4c\u5957 Scroll，\u624b\u52bf\u51b2\u7a81<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span>
    \n Scroll<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n}<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u7528 List \u5d4c\u5957，\u6216\u7528 Scroll + Column \u5206\u6bb5<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n HeaderSection<\/span>(<\/span>)<\/span>
    \n ContentSection<\/span>(<\/span>)<\/span>
    \n }<\/span>
    \n}<\/span><\/p>\n

    6.3 contentScrollEnabled \u52a8\u6001\u7981\u6eda<\/h4>\n

    \u67d0\u4e9b\u573a\u666f\u9700\u8981\u4e34\u65f6\u7981\u7528\u6eda\u52a8（\u5982\u5185\u5bb9\u6b63\u5728\u52a0\u8f7d）：<\/p>\n

    Scroll<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
    \n .<\/span>enabled<\/span>(<\/span>this<\/span>.<\/span>isContentReady)<\/span> \/\/ \u5185\u5bb9\u672a\u5c31\u7eea\u65f6\u7981\u6eda<\/span><\/p>\n

    \u4e03\u3001\u5b8c\u6574\u4ee3\u7801：\u53ef\u6eda\u52a8\u89c4\u5219\u9762\u677f<\/h3>\n

    \/\/ \u6539\u9020\u7248：\u89c4\u5219\u9762\u677f\u5957 Scroll，10 \u6761\u89c4\u5219\u53ef\u6eda\u52a8<\/span>
    \n@<\/span>Builder<\/span><\/span>
    \nMainMenuView<\/span>(<\/span>)<\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n Spacer<\/span>(<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'15%'<\/span>)<\/span><\/p>\n

    Text<\/span>(<\/span>'🐱'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>72<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u732b\u732b\u5927\u4f5c\u6218'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>36<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#2C3E50'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u5408\u5e76\u8fdb\u5316 \u00b7 \u7b56\u7565\u6d88\u9664'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#95A5A6'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 48<\/span> }<\/span>)<\/span><\/p>\n

    if<\/span> (<\/span>this<\/span>.<\/span>highScore ><\/span> 0<\/span>)<\/span> {<\/span>
    \n Row<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>'🏆 \u6700\u9ad8\u5206: '<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>16<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#F1C40F'<\/span>)<\/span>
    \n Text<\/span>(<\/span>this<\/span>.<\/span>highScore.<\/span>toString<\/span>(<\/span>)<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>20<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#F1C40F'<\/span>)<\/span>
    \n }<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 32<\/span> }<\/span>)<\/span>
    \n }<\/span><\/p>\n

    Button<\/span>(<\/span>'\u5f00\u59cb\u6e38\u620f'<\/span>)<\/span>
    \n .<\/span>width<\/span>(<\/span>'70%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>56<\/span>)<\/span>
    \n .<\/span>fontSize<\/span>(<\/span>20<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>
    \n .<\/span>fontColor<\/span>(<\/span>'#FFFFFF'<\/span>)<\/span>.<\/span>backgroundColor<\/span>(<\/span>'#2ECC71'<\/span>)<\/span>
    \n .<\/span>borderRadius<\/span>(<\/span>28<\/span>)<\/span>
    \n .<\/span>shadow<\/span>(<\/span>{<\/span> radius:<\/span> 8<\/span>,<\/span> color:<\/span> 'rgba(46, 204, 113, 0.4)'<\/span>,<\/span> offsetY:<\/span> 4<\/span> }<\/span>)<\/span>
    \n .<\/span>onClick<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>startGame<\/span>(<\/span>)<\/span>;<\/span> }<\/span>)<\/span><\/p>\n

    Spacer<\/span>(<\/span>)<\/span>.<\/span>height<\/span>(<\/span>24<\/span>)<\/span><\/p>\n

    \/\/ \u89c4\u5219\u9762\u677f（Scroll \u6539\u9020）<\/span>
    \n Scroll<\/span>(<\/span>)<\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>'\u6e38\u620f\u89c4\u5219'<\/span>)<\/span>
    \n .<\/span>fontSize<\/span>(<\/span>14<\/span>)<\/span>.<\/span>fontWeight<\/span>(<\/span>FontWeight.<\/span>Bold)<\/span>.<\/span>fontColor<\/span>(<\/span>'#2C3E50'<\/span>)<\/span>
    \n .<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 8<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u70b9\u51fb\u5217\u6295\u653e\u732b\u54aa'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u76f8\u90bb\u540c\u7ea7\u732b\u54aa\u81ea\u52a8\u5408\u5e76\u5347\u7ea7'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u8fde\u7eed\u5408\u5e76\u89e6\u53d1\u8fde\u51fb\u52a0\u5206'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u732b\u54aa\u5806\u5230\u9876\u90e8\u5219\u6e38\u620f\u7ed3\u675f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u540c\u7ea7\u732b\u54aa\u76f8\u90bb 2 \u4e2a\u81ea\u52a8\u5408\u5e76'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u5408\u5e76\u540e\u7b49\u7ea7 +1，\u5f97\u5206\u6309 3^n \u589e\u957f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u8fde\u51fb\u7a97\u53e3 1.5s，\u8fde\u7eed\u5408\u5e76\u500d\u7387\u53e0\u52a0'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u6700\u9ad8\u7b49\u7ea7\u4f20\u5947\u732b，\u5f97\u5206 2430'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u81ea\u52a8\u751f\u6210\u95f4\u9694 2s，\u6700\u591a 40 \u53ea'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>.<\/span>margin<\/span>(<\/span>{<\/span> bottom:<\/span> 4<\/span> }<\/span>)<\/span>
    \n Text<\/span>(<\/span>'\u2022 \u68cb\u76d8 5 \u5217 8 \u884c，\u7b2c 2 \u884c\u5806\u79ef\u5219\u7ed3\u675f'<\/span>)<\/span>.<\/span>fontSize<\/span>(<\/span>13<\/span>)<\/span>.<\/span>fontColor<\/span>(<\/span>'#7F8C8D'<\/span>)<\/span>
    \n }<\/span>
    \n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Start)<\/span>
    \n }<\/span>
    \n .<\/span>scrollable<\/span>(<\/span>ScrollDirection.<\/span>Vertical)<\/span>
    \n .<\/span>scrollBar<\/span>(<\/span>BarState.<\/span>Auto)<\/span>
    \n .<\/span>width<\/span>(<\/span>'80%'<\/span>)<\/span>
    \n .<\/span>height<\/span>(<\/span>180<\/span>)<\/span>
    \n .<\/span>padding<\/span>(<\/span>16<\/span>)<\/span>
    \n .<\/span>backgroundColor<\/span>(<\/span>'rgba(255,255,255,0.7)'<\/span>)<\/span>
    \n .<\/span>borderRadius<\/span>(<\/span>12<\/span>)<\/span><\/p>\n

    Spacer<\/span>(<\/span>)<\/span>
    \n }<\/span>
    \n .<\/span>width<\/span>(<\/span>'100%'<\/span>)<\/span>.<\/span>height<\/span>(<\/span>'100%'<\/span>)<\/span>
    \n .<\/span>linearGradient<\/span>(<\/span>{<\/span>
    \n direction:<\/span> GradientDirection.<\/span>Bottom,<\/span>
    \n colors:<\/span> [<\/span>[<\/span>'#E8F4F8'<\/span>,<\/span> 0.0<\/span>]<\/span>,<\/span> [<\/span>'#D6EEF5'<\/span>,<\/span> 0.5<\/span>]<\/span>,<\/span> [<\/span>'#C9E8F2'<\/span>,<\/span> 1.0<\/span>]<\/span>]<\/span>
    \n }<\/span>)<\/span>
    \n .<\/span>alignItems<\/span>(<\/span>HorizontalAlign.<\/span>Center)<\/span>
    \n}<\/span><\/p>\n

    \u516b\u3001\u8e29\u5751\u63d0\u793a<\/h3>\n

    8.1 Scroll \u4e0d\u8bbe height \u4e0d\u6eda\u52a8<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u6ca1\u8bbe height，Scroll \u6491\u5f00\u5230\u5185\u5bb9\u5168\u9ad8<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span> Column<\/span>(<\/span>)<\/span> {<\/span> \/* 10 \u6761\u89c4\u5219 *\/<\/span> }<\/span> }<\/span>
    \n\/\/ \u5185\u5bb9\u5168\u663e\u793a，\u4e0d\u6eda\u52a8<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u8bbe\u56fa\u5b9a height<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>.<\/span>height<\/span>(<\/span>180<\/span>)<\/span><\/p>\n

    8.2 Scroll \u5185\u591a\u4e2a\u76f4\u63a5\u5b50\u7ec4\u4ef6<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u591a\u4e2a\u76f4\u63a5\u5b50\u7ec4\u4ef6，\u53ea\u6e32\u67d3\u7b2c\u4e00\u4e2a<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>'A'<\/span>)<\/span>
    \n Text<\/span>(<\/span>'B'<\/span>)<\/span>
    \n}<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u7528 Column \u5305\u88f9<\/span>
    \nScroll<\/span>(<\/span>)<\/span> {<\/span>
    \n Column<\/span>(<\/span>)<\/span> {<\/span>
    \n Text<\/span>(<\/span>'A'<\/span>)<\/span>
    \n Text<\/span>(<\/span>'B'<\/span>)<\/span>
    \n }<\/span>
    \n}<\/span><\/p>\n

    8.3 onScroll \u56de\u8c03\u5185\u6539 state \u5361\u987f<\/h4>\n

    \/\/ \u274c \u9519\u8bef：\u6bcf\u5e27\u6539 state，\u89e6\u53d1\u91cd\u6e32\u67d3，\u5361\u987f<\/span>
    \n.<\/span>onScroll<\/span>(<\/span>(<\/span>_,<\/span> yOffset)<\/span> =><\/span> {<\/span>
    \n this<\/span>.<\/span>currentY =<\/span> yOffset;<\/span> \/\/ \u9ad8\u9891\u6539 state<\/span>
    \n}<\/span>)<\/span><\/p>\n

    \/\/ \u2705 \u6b63\u786e：\u8282\u6d41，\u6216\u53ea\u5728\u9608\u503c\u8de8\u8d8a\u65f6\u6539<\/span>
    \n.<\/span>onScroll<\/span>(<\/span>(<\/span>_,<\/span> yOffset)<\/span> =><\/span> {<\/span>
    \n const<\/span> shouldShow =<\/span> yOffset ><\/span> 100<\/span>;<\/span>
    \n if<\/span> (<\/span>shouldShow !==<\/span> this<\/span>.<\/span>showBackToTop)<\/span> {<\/span>
    \n this<\/span>.<\/span>showBackToTop =<\/span> shouldShow;<\/span> \/\/ \u53ea\u5728\u72b6\u6001\u53d8\u5316\u65f6\u6539<\/span>
    \n }<\/span>
    \n}<\/span>)<\/span><\/p>\n

    \u4e5d\u3001\u8c03\u8bd5\u6280\u5de7<\/h3>\n
  • DevEco \u9884\u89c8\u5668：\u9f20\u6807\u5728 Scroll \u533a\u57df\u5185\u6eda\u8f6e\u5373\u53ef\u6d4b\u8bd5\u6eda\u52a8\u3002<\/li>\n
  • console.info \u6253\u504f\u79fb：onScroll \u56de\u8c03\u91cc log yOffset，\u8ffd\u6eda\u52a8\u4f4d\u7f6e\u3002<\/li>\n
  • \u4e0d\u6eda\u52a8\u6392\u67e5：\u68c0\u67e5 height \u662f\u5426\u8bbe\u7f6e；\u68c0\u67e5\u5185\u5bb9\u662f\u5426\u771f\u8d85\u51fa height\u3002<\/li>\n
  • \u771f\u673a\u624b\u611f\u5dee：\u68c0\u67e5 scrollBar(BarState.Auto) \u662f\u5426\u8bef\u8bbe\u4e3a Off \u9690\u85cf\u4e86\u53cd\u9988\u3002<\/li>\n

    \u5341\u3001\u6027\u80fd\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h3>\n
  • \u6761\u6570\u5c11（<20）\u7528 Scroll，\u6761\u6570\u591a\u7528 List + LazyForEach\u3002<\/li>\n
  • Scroll \u5fc5\u987b\u8bbe\u56fa\u5b9a height\u2014\u2014\u5426\u5219\u6491\u5f00\u5931\u53bb\u6eda\u52a8\u80fd\u529b\u3002<\/li>\n
  • Scroll \u53ea\u80fd\u6709\u4e00\u4e2a\u76f4\u63a5\u5b50\u7ec4\u4ef6\u2014\u2014\u591a\u4e2a\u7528 Column\/Row \u5305\u3002<\/li>\n
  • onScroll \u9ad8\u9891\u56de\u8c03\u5185\u522b\u6539 state\u2014\u2014\u8282\u6d41\u6216\u9608\u503c\u8de8\u8d8a\u624d\u6539\u3002<\/li>\n
  • \u907f\u514d\u5d4c\u5957 Scroll\u2014\u2014\u624b\u52bf\u51b2\u7a81，\u7528 List \u6216\u5206\u6bb5 Column\u3002<\/li>\n

    \u603b\u7ed3<\/h3>\n

    \u672c\u7bc7\u6211\u4eec\u4ece Scroll \u6eda\u52a8\u5bb9\u5668\u5207\u5165，\u638c\u63e1\u4e86Scroll \u57fa\u672c\u7ed3\u6784（\u5fc5\u987b\u8bbe height）\u3001Scroller \u63a7\u5236\u5668（scrollTo\/scrollEdge\/currentOffset）\u3001onScroll \u6eda\u52a8\u76d1\u542c\u4e0e\u56de\u9876\u6309\u94ae\u3001Scroll vs List \u53d6\u820d\u56db\u5927\u8981\u70b9，\u5e76\u7ed9\u51fa\u4e86\u53ef\u6eda\u52a8\u89c4\u5219\u9762\u677f\u5b8c\u6574\u4ee3\u7801\u3002\u6838\u5fc3\u8981\u70b9：Scroll \u8bbe\u56fa\u5b9a height \u624d\u6eda\u52a8；Scroller \u7f16\u7a0b\u5f0f\u63a7\u5236；onScroll \u9ad8\u9891\u56de\u8c03\u522b\u6539 state；\u6761\u6570\u591a\u7528 List\u3002<\/p>\n

    \u4e0b\u4e00\u7bc7\u6211\u4eec\u5c06\u62c6\u89e3 Badge\u2014\u2014\u6d88\u606f\u89d2\u6807\u7684\u5b9e\u73b0\u3002<\/p>\n

    \u5982\u679c\u8fd9\u7bc7\u6587\u7ae0\u5bf9\u4f60\u6709\u5e2e\u52a9，\u6b22\u8fce\u70b9\u8d5e👍\u3001\u6536\u85cf\u2b50\u3001\u5173\u6ce8🔔，\u4f60\u7684\u652f\u6301\u662f\u6211\u6301\u7eed\u521b\u4f5c\u7684\u52a8\u529b！<\/p>\n

    \n

    \u76f8\u5173\u8d44\u6e90：<\/p>\n

      \n
    • \u300c\u732b\u732b\u5927\u4f5c\u6218\u300d\u9879\u76ee\u6e90\u7801：\u672c\u4ed3\u5e93 entry\/src\/main\/ets\/pages\/Index.ets<\/li>\n
    • Scroll \u6eda\u52a8\u5bb9\u5668\u5b98\u65b9\u6307\u5357<\/li>\n
    • Scroller \u6eda\u52a8\u63a7\u5236\u5668\u5b98\u65b9\u6307\u5357<\/li>\n
    • List \u5217\u8868\u7ec4\u4ef6\u5b98\u65b9\u6307\u5357<\/li>\n
    • ArkUI \u6eda\u52a8\u6027\u80fd\u6700\u4f73\u5b9e\u8df5<\/li>\n
    • \u5f00\u6e90\u9e3f\u8499\u8de8\u5e73\u53f0\u793e\u533a<\/li>\n
    • HarmonyOS \u5f00\u53d1\u8005\u5b98\u65b9\u6587\u6863\u9996\u9875<\/li>\n
    • \u7cfb\u5217\u7d22\u5f15：\u672c\u4ed3\u5e93 articles\/INDEX.md<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      \u524d\u8a00
      \n\u524d\u51e0\u7bc7\u6211\u4eec\u7528 Column\/Row\/Blank\/layoutWeight \u642d\u597d\u4e86 HUD\u3001\u5e95\u90e8\u680f\u3001\u68cb\u76d8\u2014\u2014\u6240\u6709\u5185\u5bb9\u90fd\u4e00\u5c4f\u88c5\u5f97\u4e0b\u3002\u4f46\u5b9e\u6218\u4e2d\u7ecf\u5e38\u9047\u5230\u5185\u5bb9\u8d85\u51fa\u5c4f\u5e55\u7684\u573a\u666f：\u6e38\u620f\u89c4\u5219\u8bf4\u660e\u592a\u957f\u3001\u6218\u7ee9\u5386\u53f2\u51e0\u5341\u6761\u3001\u8bbe\u7f6e\u9875\u5341\u51e0\u9879\u3002\u8fd9\u65f6\u5019\u9700\u8981\u6eda\u52a8\u5bb9\u5668\u8ba9\u7528\u6237\u4e0a\u4e0b\/\u5de6\u53f3\u6ed1\u52a8\u67e5\u770b\u3002
      \nHarmonyOS \u63d0\u4f9b\u4e86 Scroll \u6eda\u52a8\u5bb9\u5668 Scroller \u6eda\u52a8\u63a7\u5236\u5668\u2014\u2014\u524d\u8005\u8d1f\u8d23\u53ef\u6eda\u52a8\u533a\u57df，\u540e\u8005\u8d1f\u8d23\u7f16\u7a0b\u5f0f\u6eda\u52a8（scrollTo\u3001scrollEdge&#x<\/p>\n","protected":false},"author":2,"featured_media":86656,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[280,1737],"topic":[],"class_list":["post-86658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-harmonyos","tag-1737"],"yoast_head":"\nHarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/86658.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u524d\u8a00 \u524d\u51e0\u7bc7\u6211\u4eec\u7528 Column\/Row\/Blank\/layoutWeight \u642d\u597d\u4e86 HUD\u3001\u5e95\u90e8\u680f\u3001\u68cb\u76d8\u2014\u2014\u6240\u6709\u5185\u5bb9\u90fd\u4e00\u5c4f\u88c5\u5f97\u4e0b\u3002\u4f46\u5b9e\u6218\u4e2d\u7ecf\u5e38\u9047\u5230\u5185\u5bb9\u8d85\u51fa\u5c4f\u5e55\u7684\u573a\u666f：\u6e38\u620f\u89c4\u5219\u8bf4\u660e\u592a\u957f\u3001\u6218\u7ee9\u5386\u53f2\u51e0\u5341\u6761\u3001\u8bbe\u7f6e\u9875\u5341\u51e0\u9879\u3002\u8fd9\u65f6\u5019\u9700\u8981\u6eda\u52a8\u5bb9\u5668\u8ba9\u7528\u6237\u4e0a\u4e0b\/\u5de6\u53f3\u6ed1\u52a8\u67e5\u770b\u3002 HarmonyOS \u63d0\u4f9b\u4e86 Scroll \u6eda\u52a8\u5bb9\u5668 Scroller \u6eda\u52a8\u63a7\u5236\u5668\u2014\u2014\u524d\u8005\u8d1f\u8d23\u53ef\u6eda\u52a8\u533a\u57df，\u540e\u8005\u8d1f\u8d23\u7f16\u7a0b\u5f0f\u6eda\u52a8（scrollTo\u3001scrollEdge&#x\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/86658.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-28T16:08:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/07\/20260728160834-6a68d40216b27.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/86658.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/86658.html\",\"name\":\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-07-28T16:08:37+00:00\",\"dateModified\":\"2026-07-28T16:08:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/86658.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/86658.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/86658.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/86658.html","og_locale":"zh_CN","og_type":"article","og_title":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u524d\u8a00 \u524d\u51e0\u7bc7\u6211\u4eec\u7528 Column\/Row\/Blank\/layoutWeight \u642d\u597d\u4e86 HUD\u3001\u5e95\u90e8\u680f\u3001\u68cb\u76d8\u2014\u2014\u6240\u6709\u5185\u5bb9\u90fd\u4e00\u5c4f\u88c5\u5f97\u4e0b\u3002\u4f46\u5b9e\u6218\u4e2d\u7ecf\u5e38\u9047\u5230\u5185\u5bb9\u8d85\u51fa\u5c4f\u5e55\u7684\u573a\u666f：\u6e38\u620f\u89c4\u5219\u8bf4\u660e\u592a\u957f\u3001\u6218\u7ee9\u5386\u53f2\u51e0\u5341\u6761\u3001\u8bbe\u7f6e\u9875\u5341\u51e0\u9879\u3002\u8fd9\u65f6\u5019\u9700\u8981\u6eda\u52a8\u5bb9\u5668\u8ba9\u7528\u6237\u4e0a\u4e0b\/\u5de6\u53f3\u6ed1\u52a8\u67e5\u770b\u3002 HarmonyOS \u63d0\u4f9b\u4e86 Scroll \u6eda\u52a8\u5bb9\u5668 Scroller \u6eda\u52a8\u63a7\u5236\u5668\u2014\u2014\u524d\u8005\u8d1f\u8d23\u53ef\u6eda\u52a8\u533a\u57df，\u540e\u8005\u8d1f\u8d23\u7f16\u7a0b\u5f0f\u6eda\u52a8（scrollTo\u3001scrollEdge&#x","og_url":"https:\/\/www.wsisp.com\/helps\/86658.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-07-28T16:08:37+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/07\/20260728160834-6a68d40216b27.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/86658.html","url":"https:\/\/www.wsisp.com\/helps\/86658.html","name":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-07-28T16:08:37+00:00","dateModified":"2026-07-28T16:08:37+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/86658.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/86658.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/86658.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"HarmonyOS\u5e94\u7528\u5f00\u53d1\u5b9e\u6218\uff1a\u732b\u732b\u5927\u4f5c\u6218-Scroll \u5bb9\u5668\u3001Scroller \u63a7\u5236\u5668\u3001\u6eda\u52a8\u76d1\u542c\u4e0e\u6027\u80fd"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/86658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=86658"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/86658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/86656"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=86658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=86658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=86658"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=86658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}