diff --git a/WaterFlowSample/entry/src/main/ets/pages/CustomItemHeightPage.ets b/WaterFlowSample/entry/src/main/ets/pages/CustomItemHeightPage.ets
index 17ac9f9c80987b55f06d3a2ef440e1f5e2eb20b5..28450297986781f6912cda2ac19ca549643e8086 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/CustomItemHeightPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/CustomItemHeightPage.ets
@@ -16,7 +16,7 @@
 // [Start quick_start]
 import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSource";
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -77,17 +77,17 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 export struct CustomItemHeightPage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State minSize: number = 120;
   @State maxSize: number = 260;
   scroller: Scroller = new Scroller();
   dataSource: SectionsWaterFlowDataSource = new SectionsWaterFlowDataSource();
   private itemHeightArray: number[] = [];
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   // 1、Create group information.
   @State sections: WaterFlowSections = new WaterFlowSections();
   sectionMargin: Margin = {
@@ -107,7 +107,7 @@ export struct CustomItemHeightPage {
       return 120;
     }
   };
-  // [StartExclude method_declare]
+  // [StartExclude quick_start]
   twoColumnSection: SectionOptions = {
     itemsCount: 2,
     crossCount: 2,
@@ -184,7 +184,7 @@ export struct CustomItemHeightPage {
     }
   }
 
-  // [EndExclude method_declare]
+  // [EndExclude quick_start]
 }
 
 // [End quick_start]
\ No newline at end of file
diff --git a/WaterFlowSample/entry/src/main/ets/pages/DataLoadMorePage.ets b/WaterFlowSample/entry/src/main/ets/pages/DataLoadMorePage.ets
index 2fc3199183ff3129c2f0227c51aedd3144f09006..1d00e59562c0f512bcfe984e5ec5dcde028bed1e 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/DataLoadMorePage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/DataLoadMorePage.ets
@@ -20,7 +20,7 @@ import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSourc
 
 const TAG: string = 'DataLoadMorePage';
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -81,13 +81,13 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct DataLoadMorePage {
   @State sections: WaterFlowSections = new WaterFlowSections();
   dataSource: SectionsWaterFlowDataSource = new SectionsWaterFlowDataSource();
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State isRefreshing: boolean = false;
   @State currentItem: number = -1;
   @State minSize: number = 80;
@@ -219,17 +219,17 @@ struct DataLoadMorePage {
     this.sections.update(sectionIndex, newSection);
   }
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     this.initSections();
   }
 
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   build() {
     Column({ space: 0 }) {
       Refresh({ refreshing: $$this.isRefreshing, builder: this.headerRefresh() }) {
         WaterFlow({ scroller: this.scroller, sections: this.sections }) {
-          // [StartExclude water_flow_data]
+          // [StartExclude quick_start]
           LazyForEach(this.dataSource, (item: number) => {
             FlowItem() {
               Stack() {
@@ -267,7 +267,7 @@ struct DataLoadMorePage {
             .borderRadius(8)
             .backgroundColor(Color.Gray)
           }, (item: string) => item)
-          // [EndExclude water_flow_data]
+          // [EndExclude quick_start]
         }
         .cachedCount(12)
         .columnsGap(8)
@@ -291,13 +291,13 @@ struct DataLoadMorePage {
           }
         })
       }
-      // [StartExclude refresh]
+      // [StartExclude quick_start]
       .refreshOffset(56)
       .onRefreshing(() => {
         this.refresh();
       })
 
-      // [EndExclude refresh]
+      // [EndExclude quick_start]
     }
     .padding({
       top: this.statusBarHeight
diff --git a/WaterFlowSample/entry/src/main/ets/pages/DataUpdateAndAnimationPage.ets b/WaterFlowSample/entry/src/main/ets/pages/DataUpdateAndAnimationPage.ets
index a8bc4a49ce9d745d6bd33dbe15880e03bc705636..a9ab26ce62b1d9f4d7dd26e88a6e0c067655f0b3 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/DataUpdateAndAnimationPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/DataUpdateAndAnimationPage.ets
@@ -20,12 +20,12 @@ import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSourc
 
 const TAG: string = 'DataUpdateAndAnimationPage';
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
 
-  aboutToReuse(params: Record<string, number>) {
+  aboutToReuse(params: Record<string, number>): void {
     this.item = params.item;
   }
 
@@ -78,13 +78,13 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct DataUpdateAndAnimationPage {
   @State isRefreshing: boolean = false;
   @State currentItem: number = -1;
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State minSize: number = 80;
   @State maxSize: number = 180;
   scroller: Scroller = new Scroller();
@@ -125,7 +125,7 @@ struct DataUpdateAndAnimationPage {
     }
   };
 
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   // 1、Refresh Loading Animation Component.
   @Builder
   headerRefresh(): void {
@@ -178,7 +178,7 @@ struct DataUpdateAndAnimationPage {
     }, 1000);
   }
 
-  // [StartExclude section_init]
+  // [StartExclude quick_start]
   getSize(): number {
     let ret: number = Math.floor(Math.random() * this.maxSize);
     return (ret > this.minSize ? ret : this.minSize);
@@ -234,12 +234,12 @@ struct DataUpdateAndAnimationPage {
     this.sections.update(sectionIndex, newSection);
   }
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     this.initSections();
   }
 
-  // [EndExclude section_init]
+  // [EndExclude quick_start]
   build() {
     Column({ space: 0 }) {
       Row() {
@@ -252,7 +252,7 @@ struct DataUpdateAndAnimationPage {
 
       // 2、Pull-to-refresh control.
       Refresh({ refreshing: $$this.isRefreshing, builder: this.headerRefresh() }) {
-        // [StartExclude water_flow_init]
+        // [StartExclude quick_start]
         WaterFlow({ scroller: this.scroller, sections: this.sections }) {
           LazyForEach(this.dataSource, (item: number) => {
             FlowItem() {
@@ -298,7 +298,7 @@ struct DataUpdateAndAnimationPage {
         .width('100%')
         .height('100%')
         .layoutWeight(1)
-        // [EndExclude water_flow_init]
+        // [EndExclude quick_start]
         // For better experience, pre load data.
         .onScrollIndex((first: number, last: number) => {
           this.loadMore(last);
diff --git a/WaterFlowSample/entry/src/main/ets/pages/ElementByOrderPage.ets b/WaterFlowSample/entry/src/main/ets/pages/ElementByOrderPage.ets
index cb533a3cf0ccc9237b80c22541d1d4fc0b13a3f5..aa2129c40eeb57339a8ae701ca98a3510b1bfacf 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/ElementByOrderPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/ElementByOrderPage.ets
@@ -14,7 +14,7 @@
  */
 
 import { CommonConstants } from '../common/constants/CommonConstants';
-
+// [Start quick_start]
 @Entry
 @Component
 struct ElementByOrderPage {
@@ -75,4 +75,5 @@ struct ElementByOrderPage {
       top: this.statusBarHeight
     })
   }
-}
\ No newline at end of file
+}
+// [End quick_start]
\ No newline at end of file
diff --git a/WaterFlowSample/entry/src/main/ets/pages/FadingEdgePage.ets b/WaterFlowSample/entry/src/main/ets/pages/FadingEdgePage.ets
index b544513055eb5b430a019de80bd94b2e3ba08a64..3063ac427f2d224f47510997759040dab43e5e09 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/FadingEdgePage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/FadingEdgePage.ets
@@ -18,7 +18,7 @@ import { LengthMetrics } from '@kit.ArkUI';
 import { CommonConstants } from "../common/constants/CommonConstants";
 import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSource";
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -76,15 +76,15 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct FadingEdgePage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State minSize: number = 120;
   @State maxSize: number = 260;
   scroller: Scroller = new Scroller();
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   dataSource: SectionsWaterFlowDataSource = new SectionsWaterFlowDataSource();
   private itemHeightArray: number[] = [];
   sectionMargin: Margin = {
@@ -124,7 +124,7 @@ struct FadingEdgePage {
     }
   }
 
-  // [StartExclude method_declare]
+  // [StartExclude quick_start]
   getSize(): number {
     let ret: number = Math.floor(Math.random() * this.maxSize);
     return (ret > this.minSize ? ret : this.minSize);
@@ -136,7 +136,7 @@ struct FadingEdgePage {
     }
   }
 
-  // [EndExclude method_declare]
+  // [EndExclude quick_start]
 
   aboutToAppear(): void {
     this.setItemSizeArray();
@@ -178,7 +178,7 @@ struct FadingEdgePage {
 
       // 6、Link the grouping information to WaterFlow.
       WaterFlow({ scroller: this.scroller, sections: this.sections }) {
-        // [StartExclude water_flow_data]
+        // [StartExclude quick_start]
         LazyForEach(this.dataSource, (item: number) => {
           FlowItem() {
             ReusableFlowItem({ item: item })
@@ -187,7 +187,7 @@ struct FadingEdgePage {
           .borderRadius(8)
           .backgroundColor(Color.Gray)
         }, (item: string) => item)
-        // [EndExclude water_flow_data]
+        // [EndExclude quick_start]
       }
       .cachedCount(12)
       .columnsGap(8)
diff --git a/WaterFlowSample/entry/src/main/ets/pages/FlowItemAutoPlayPage.ets b/WaterFlowSample/entry/src/main/ets/pages/FlowItemAutoPlayPage.ets
index da170fc9159e2711b1687e67812b22619494f959..b37dd9b25159031e6428b55e1ee2fbfa3e19d5f6 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/FlowItemAutoPlayPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/FlowItemAutoPlayPage.ets
@@ -57,7 +57,7 @@ struct FlowVideoItem {
           })
       }
     } else {
-      // [StartExclude image_item]
+      // [StartExclude quick_start]
       RelativeContainer() {
         Image(this.item.imageUri)
           .objectFit(ImageFit.Cover)
@@ -107,12 +107,12 @@ struct FlowVideoItem {
       .borderRadius(8)
       .backgroundColor(Color.Gray)
 
-      // [EndExclude image_item]
+      // [EndExclude quick_start]
     }
   }
 }
 
-// [StartExclude water_flow_init]
+// [StartExclude quick_start]
 @Entry
 @Component
 struct FlowItemAutoPlayPage {
@@ -176,7 +176,7 @@ struct FlowItemAutoPlayPage {
     }
   }
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     let sectionOptions: SectionOptions[] = [];
     let count: number = 0;
@@ -227,5 +227,5 @@ struct FlowItemAutoPlayPage {
   }
 }
 
-// [EndExclude water_flow_init]
+// [EndExclude quick_start]
 // [End quick_start]
\ No newline at end of file
diff --git a/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemoveAnimationPage.ets b/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemoveAnimationPage.ets
index 08dd92795c7f368587dfdf6bc20011376804f491..cd9c6a5e9f0383f25499bfac7e2e97788e2abf0e 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemoveAnimationPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemoveAnimationPage.ets
@@ -20,7 +20,7 @@ import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSourc
 
 const TAG: string = 'FlowItemRemoveAnimationPage';
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -78,11 +78,11 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct FlowItemRemoveAnimationPage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State currentItem: number = -1;
   @State isRefreshing: boolean = false;
   @State minSize: number = 80;
@@ -194,7 +194,7 @@ struct FlowItemRemoveAnimationPage {
     this.sections.splice(0, 0, sectionOptions);
   }
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     this.initSections();
   }
@@ -221,7 +221,7 @@ struct FlowItemRemoveAnimationPage {
     this.sections.update(sectionIndex, newSection);
   }
 
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   build() {
     Column({ space: 0 }) {
       Refresh({ refreshing: $$this.isRefreshing, builder: this.headerRefresh() }) {
@@ -244,7 +244,7 @@ struct FlowItemRemoveAnimationPage {
                       }
                     })
                 }
-                // [StartExclude row_setting]
+                // [StartExclude quick_start]
                 .width('100%')
                 .height('100%')
                 .borderRadius(8)
@@ -254,7 +254,7 @@ struct FlowItemRemoveAnimationPage {
                 .backgroundColor('#33000000')
 
                 ReusableFlowItem({ item: item })
-                // [EndExclude row_setting]
+                // [EndExclude quick_start]
               }
             }
             // 1、Add a transition property to FlowItem and configure the transition parameters.
@@ -268,7 +268,7 @@ struct FlowItemRemoveAnimationPage {
             .backgroundColor(Color.Gray)
           }, (item: string) => item)
         }
-        // [StartExclude water_flow_setting]
+        // [StartExclude quick_start]
         .cachedCount(12)
         .columnsGap(8)
         .rowsGap(8)
@@ -290,15 +290,15 @@ struct FlowItemRemoveAnimationPage {
           }, 1000);
         })
 
-        // [EndExclude water_flow_setting]
+        // [EndExclude quick_start]
       }
-      // [StartExclude water_flow_refresh]
+      // [StartExclude quick_start]
       .refreshOffset(56)
       .onRefreshing(() => {
         this.refresh();
       })
 
-      // [EndExclude water_flow_refresh]
+      // [EndExclude quick_start]
     }
     .padding({
       top: this.statusBarHeight
diff --git a/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemovePage.ets b/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemovePage.ets
index 269829cb9f80cbb7c0d7583ef85d7acc7f721ffa..bef61d2798424f4ee57a4393de5d4e79c2e10f95 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemovePage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/FlowItemRemovePage.ets
@@ -19,7 +19,7 @@ import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSourc
 
 const TAG: string = 'FlowItemRemovePage';
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -77,13 +77,13 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct FlowItemRemovePage {
   // 1、Select the index of the FlowItem.
   @State currentItem: number = -1;
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State isRefreshing: boolean = false;
   @State minSize: number = 80;
   @State maxSize: number = 180;
@@ -198,7 +198,7 @@ struct FlowItemRemovePage {
     this.initSections();
   }
 
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   removeItem(item: number): void {
     // 5、Delete source data.
     let index: number = this.dataSource.indexOf(item);
@@ -268,7 +268,7 @@ struct FlowItemRemovePage {
             .backgroundColor(Color.Gray)
           }, (item: string) => item)
         }
-        // [StartExclude water_flow_setting]
+        // [StartExclude quick_start]
         .cachedCount(12)
         .columnsGap(8)
         .rowsGap(8)
@@ -295,7 +295,7 @@ struct FlowItemRemovePage {
         this.refresh();
       })
 
-      // [EndExclude water_flow_setting]
+      // [EndExclude quick_start]
     }
   }
 }
diff --git a/WaterFlowSample/entry/src/main/ets/pages/ForceShowOnTopLeftPage.ets b/WaterFlowSample/entry/src/main/ets/pages/ForceShowOnTopLeftPage.ets
index e12d5d9b0c1bb7dd46539397f08d531f5172d4e6..37b530c8edec6da8c1a12e5c1d9e7f40553284bc 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/ForceShowOnTopLeftPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/ForceShowOnTopLeftPage.ets
@@ -20,7 +20,7 @@ import { MyDataSource } from '../model/MyDataSource'
 @Entry
 @Component
 struct ForceShowOnTopLeftPage {
-  // [StartExclude data_init]
+  // [StartExclude quick_start]
   private data: MyDataSource = new MyDataSource();
   @StorageProp(CommonConstants.AS_KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0;
 
@@ -30,7 +30,7 @@ struct ForceShowOnTopLeftPage {
     }
   }
 
-  // [EndExclude data_init]
+  // [EndExclude quick_start]
   build() {
     Column({ space: 0 }) {
       Row() {
diff --git a/WaterFlowSample/entry/src/main/ets/pages/MergeDoubleWaterFlowPage.ets b/WaterFlowSample/entry/src/main/ets/pages/MergeDoubleWaterFlowPage.ets
index 19dfba6f216cafd2affb52068a3f0aae23f473c2..f65348b0e7959e822e6f5d9184539b65281b0bec 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/MergeDoubleWaterFlowPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/MergeDoubleWaterFlowPage.ets
@@ -20,7 +20,7 @@ import { MyDataSource } from '../model/MyDataSource'
 @Entry
 @Component
 struct MergeDoubleWaterFlowPage {
-  // [StartExclude data_init]
+  // [StartExclude quick_start]
   @State minSize: number = 80
   @State maxSize: number = 210;
   @State fontSize: number = 24;
@@ -86,7 +86,7 @@ struct MergeDoubleWaterFlowPage {
     this.sections.splice(0, 0, sectionOptions);
   }
 
-  // [EndExclude data_init]
+  // [EndExclude quick_start]
   build() {
     Column({ space: 2 }) {
       Row() {
diff --git a/WaterFlowSample/entry/src/main/ets/pages/SectionOptionsUsePage.ets b/WaterFlowSample/entry/src/main/ets/pages/SectionOptionsUsePage.ets
index 5f93de32ae7bba3094827dbb25f51578a35987aa..753d16ffbc9c1850a70e1ad37573279bc4c7f4cb 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/SectionOptionsUsePage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/SectionOptionsUsePage.ets
@@ -17,7 +17,7 @@
 import { CommonConstants } from "../common/constants/CommonConstants";
 import { SectionsWaterFlowDataSource } from "../model/SectionsWaterFlowDataSource";
 
-// [StartExclude flow_item_layout]
+// [StartExclude quick_start]
 @Reusable
 struct ReusableFlowItem {
   @State item: number = 0;
@@ -75,15 +75,15 @@ struct ReusableFlowItem {
   }
 }
 
-// [EndExclude flow_item_layout]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct SectionOptionsUsePage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State minSize: number = 120;
   @State maxSize: number = 260;
   scroller: Scroller = new Scroller();
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   dataSource: SectionsWaterFlowDataSource = new SectionsWaterFlowDataSource();
   private itemHeightArray: number[] = [];
   sectionMargin: Margin = {
@@ -123,7 +123,7 @@ struct SectionOptionsUsePage {
     }
   }
 
-  // [StartExclude method_declare]
+  // [StartExclude quick_start]
   getSize(): number {
     let ret: number = Math.floor(Math.random() * this.maxSize);
     return (ret > this.minSize ? ret : this.minSize);
@@ -135,9 +135,9 @@ struct SectionOptionsUsePage {
     }
   }
 
-  // [EndExclude method_declare]
+  // [EndExclude quick_start]
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     this.initSections();
   }
@@ -177,7 +177,7 @@ struct SectionOptionsUsePage {
 
       // 6、Link the grouping information to WaterFlow.
       WaterFlow({ scroller: this.scroller, sections: this.sections }) {
-        // [StartExclude water_flow_data]
+        // [StartExclude quick_start]
         LazyForEach(this.dataSource, (item: number) => {
           FlowItem() {
             ReusableFlowItem({ item: item })
@@ -186,7 +186,7 @@ struct SectionOptionsUsePage {
           .borderRadius(8)
           .backgroundColor(Color.Gray)
         }, (item: string) => item)
-        // [EndExclude water_flow_data]
+        // [EndExclude quick_start]
       }
       .cachedCount(12)
       .columnsGap(8)
diff --git a/WaterFlowSample/entry/src/main/ets/pages/StickOnTopPage.ets b/WaterFlowSample/entry/src/main/ets/pages/StickOnTopPage.ets
index 8c00942ed298a7bb2a7447bebf71df7474ced52d..260702c80a3ed1e7f60ae7ee08870b8247f2efa6 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/StickOnTopPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/StickOnTopPage.ets
@@ -21,7 +21,7 @@ import { StickyWaterFlowDataSource } from '../model/StickyWaterFlowDataSource';
 
 const TAG: string = 'StickOnTopPage';
 
-// [StartExclude item_layout]
+// [StartExclude quick_start]
 @Component
 struct FlowVideoItem {
   @Prop item: MediaItem;
@@ -105,10 +105,10 @@ struct FlowVideoItem {
   }
 }
 
-// [EndExclude item_layout]
+// [EndExclude quick_start]
 @Component
 export struct StickyPage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State arr: number[] = [1, 2, 3, 4, 5, 6];
   @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F];
   @State minSize: number = 80;
@@ -119,7 +119,7 @@ export struct StickyPage {
   dataSource: StickyWaterFlowDataSource = new StickyWaterFlowDataSource();
   private itemWidthArray: number[] = [];
   private itemHeightArray: number[] = [];
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   // 1、Define the height of the ceiling layout.
   @State scrollOffset: number = 0;
   private stickItemHeight: number = 90;
@@ -151,7 +151,7 @@ export struct StickyPage {
     }
   };
 
-  // [StartExclude section_init]
+  // [StartExclude quick_start]
   getResourceStringArray(resource: Resource): Array<string> {
     let result: Array<string> = new Array<string>();
     try {
@@ -174,7 +174,7 @@ export struct StickyPage {
     }
   }
 
-  aboutToAppear() {
+  aboutToAppear(): void {
     this.setItemSizeArray();
     let sectionOptions: SectionOptions[] = [];
     let count: number = 0;
@@ -191,7 +191,7 @@ export struct StickyPage {
     this.sections.splice(-1, 0, sectionOptions);
   }
 
-  // [EndExclude section_init]
+  // [EndExclude quick_start]
   build() {
     Stack({ alignContent: Alignment.TopStart }) {
       WaterFlow({ scroller: this.scroller, sections: this.sections }) {
@@ -217,7 +217,7 @@ export struct StickyPage {
       })
 
       Stack() {
-        // [StartExclude stick_content]
+        // [StartExclude quick_start]
         Column() {
           Scroll() {
             Row({ space: 0 }) {
@@ -340,7 +340,7 @@ export struct StickyPage {
           })
         }.alignItems(HorizontalAlign.Start)
 
-        // [EndExclude stick_content]
+        // [EndExclude quick_start]
       }
       .width('100%')
       .height(100)
@@ -352,7 +352,7 @@ export struct StickyPage {
   }
 }
 
-// [StartExclude homepage]
+// [StartExclude quick_start]
 @Entry
 @Component
 struct StickOnTopPage {
@@ -459,5 +459,5 @@ struct StickOnTopPage {
   }
 }
 
-// [EndExclude homepage]
+// [EndExclude quick_start]
 // [End quick_start]
\ No newline at end of file
diff --git a/WaterFlowSample/entry/src/main/ets/pages/ZoomChangeColumnPage.ets b/WaterFlowSample/entry/src/main/ets/pages/ZoomChangeColumnPage.ets
index c68d10d26f72b956ae4cd8ad50979a5d1deafc13..4efb5f7c03495ea60e818e0c1e8b5933b7e1a6e7 100644
--- a/WaterFlowSample/entry/src/main/ets/pages/ZoomChangeColumnPage.ets
+++ b/WaterFlowSample/entry/src/main/ets/pages/ZoomChangeColumnPage.ets
@@ -21,7 +21,7 @@ import { MyDataSource } from '../model/MyDataSource'
 
 const TAG: string = 'StickOnTopPage';
 
-// [StartExclude flow_item]
+// [StartExclude quick_start]
 @Reusable
 @Component
 struct ReusableItem {
@@ -45,11 +45,11 @@ struct ReusableItem {
   }
 }
 
-// [EndExclude flow_item]
+// [EndExclude quick_start]
 @Entry
 @Component
 struct ZoomChangeColumnPage {
-  // [StartExclude variable_declare]
+  // [StartExclude quick_start]
   @State minSize: number = 120
   @State maxSize: number = 210;
   @State fontSize: number = 24;
@@ -58,7 +58,7 @@ struct ZoomChangeColumnPage {
   private data: MyDataSource = new MyDataSource();
   private itemWidthArray: number[] = [];
   private itemHeightArray: number[] = [];
-  // [EndExclude variable_declare]
+  // [EndExclude quick_start]
   // 1、Variables required for scaling operations.
   @State itemScale: number = 1;
   @State imageScale: number = 1;
@@ -71,7 +71,7 @@ struct ZoomChangeColumnPage {
   private columnChanged: boolean = false;
   private oldColumn: number = this.columns;
 
-  // [StartExclude section_init]
+  // [StartExclude quick_start]
   getSize(): number {
     let ret: number = Math.floor(Math.random() * this.maxSize);
     return (ret > this.minSize ? ret : this.minSize);
@@ -95,7 +95,7 @@ struct ZoomChangeColumnPage {
     this.setItemSizeArray();
   }
 
-  // [EndExclude section_init]
+  // [EndExclude quick_start]
   // 7、Adjust the number of columns according to the zoom ratio.
   changeColumns(scale: number): void {
     this.oldColumn = this.columns;
@@ -111,7 +111,7 @@ struct ZoomChangeColumnPage {
 
   build() {
     Column({ space: 2 }) {
-      // [StartExclude title]
+      // [StartExclude quick_start]
       Row() {
         Text($r('app.string.zoom_change_column'))
           .width('100%')
@@ -120,7 +120,7 @@ struct ZoomChangeColumnPage {
           .margin({ top: '18vp', left: '16vp', bottom: '16vp' })
       }
 
-      // [EndExclude title]
+      // [EndExclude quick_start]
       Stack() {
         // 2、Display the current screen's snapshot when zooming.
         Image(this.pixelMap)
@@ -133,7 +133,7 @@ struct ZoomChangeColumnPage {
             centerY: 0
           })
         WaterFlow() {
-          // [StartExclude water_flow_item]
+          // [StartExclude quick_start]
           LazyForEach(this.data, (item: number) => {
             FlowItem() {
               ReusableItem({ item: item })
@@ -142,7 +142,7 @@ struct ZoomChangeColumnPage {
             .aspectRatio(this.itemHeightArray[item % 100] / this.itemWidthArray[item % 100])
             .backgroundColor(this.colors[item % 5])
           }, (item: number) => item.toString())
-          // [EndExclude water_flow_item]
+          // [EndExclude quick_start]
         }
         .id('waterflow')
         // 3、Dynamic adjustment of column numbers.