!17017 修改ScrollBar示例图

Merge pull request !17017 from 张荣杰/cherry-pick-1680937928

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md

@@ -45,7 +45,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
 @Component
 struct ScrollBarExample {
   private scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
 
   build() {
     Column() {
@@ -55,8 +55,8 @@ struct ScrollBarExample {
             ForEach(this.arr, (item) => {
               Row() {
                 Text(item.toString())
-                  .width('90%')
-                  .height(100)
+                  .width('80%')
+                  .height(60)
                   .backgroundColor('#3366CC')
                   .borderRadius(15)
                   .fontSize(16)
@@ -64,17 +64,18 @@ struct ScrollBarExample {
                   .margin({ top: 5 })
               }
             }, item => item)
-          }.margin({ right: 52 })
+          }.margin({ right: 15 })
         }
+        .width('90%')
         .scrollBar(BarState.Off)
         .scrollable(ScrollDirection.Vertical)
         ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
           Text()
-            .width(30)
+            .width(20)
             .height(100)
             .borderRadius(10)
             .backgroundColor('#C0C0C0')
-        }.width(30).backgroundColor('#ededed')
+        }.width(20).backgroundColor('#ededed')
       }
     }
   }