diff --git a/README.md b/README.md
index f90f9fc2df97062d317fe07a7dacccc7dd11a7a7..b8b187f569bc327c1f71bc81ecf5cace97b84e61 100644
--- a/README.md
+++ b/README.md
@@ -50,10 +50,10 @@ componentstack
 
 ### 约束与限制
 
-1.本示例仅支持标准系统上运行，支持设备：华为手机。
+1. 本示例仅支持标准系统上运行，支持设备：phone，tablet，2in1。
 
-2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
 
-3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
 
-4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
\ No newline at end of file
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
\ No newline at end of file
diff --git a/entry/src/main/ets/constant/StackConstant.ets b/entry/src/main/ets/constant/StackConstant.ets
index 5ce2e8617987c5bf4b7a3d3e5cb21f6d2c8a7cd7..e64286fda6e64db051f4abcaad4444d8b69dbdf4 100644
--- a/entry/src/main/ets/constant/StackConstant.ets
+++ b/entry/src/main/ets/constant/StackConstant.ets
@@ -17,105 +17,105 @@ export class StackConstant {
   /**
    * Initial height of the backup search box.
    */
-  static readonly SEARCH_HEIGHT_RAW: number = 100;
+  public static readonly SEARCH_HEIGHT_RAW: number = 100;
 
   /**
    * Backup height of quick capture icon area 2.
    */
-  static readonly HEIGHT_LIST_2_RAW: number = 100;
+  public static readonly HEIGHT_LIST_2_RAW: number = 100;
 
   /**
    * Default maximum spacing of icon list 3.
    */
-  static readonly MAX_MARGIN_SPACE: number = 25;
+  public static readonly MAX_MARGIN_SPACE: number = 25;
 
   /**
    * Default minimum spacing of icon list 3.
    */
-  static readonly MIN_MARGIN_SPACE: number = 12;
+  public static readonly MIN_MARGIN_SPACE: number = 12;
 
   /**
    * Calculates the transparency of icon list 1.
    */
-  static readonly ICON_LIST_1_RAW: number = 100;
+  public static readonly ICON_LIST_1_RAW: number = 100;
 
   /**
    * Calculates the transparency of icon list 2.
    */
-  static readonly ICON_LIST_2_RAW: number = 120;
+  public static readonly ICON_LIST_2_RAW: number = 120;
 
   /**
    * Calculates the transparency of icon list 3.
    */
-  static readonly ICON_LIST_3_RAW: number = 140;
+  public static readonly ICON_LIST_3_RAW: number = 140;
 
   /**
    * Occupied height.
    */
-  static readonly USED_SPACE: number = 110;
+  public static readonly USED_SPACE: number = 110;
 
   /**
    * fonts setting transparency.
    */
-  static readonly OPACITY: number = 0.6;
+  public static readonly OPACITY: number = 0.6;
 
   /**
    * Product list column margin.
    */
-  static readonly MARGIN_TOP: number = 200;
+  public static readonly MARGIN_TOP: number = 200;
 
   /**
    * Spacing between icons.
    */
-  static readonly ICON_VIEW_SPACE: number = 10;
+  public static readonly ICON_VIEW_SPACE: number = 10;
 
   /**
    * Number of columns in list 1.
    */
-  static readonly ICON_LIST_COLUMNS_1: number = 4;
+  public static readonly ICON_LIST_COLUMNS_1: number = 4;
 
   /**
    * Number of columns in list 2.
    */
-  static readonly ICON_LIST_COLUMNS_2: number = 5;
+  public static readonly ICON_LIST_COLUMNS_2: number = 5;
 
   /**
    * Spacing between column subcomponents.
    */
-  static readonly COLUMN_SPACE: number = 5;
+  public static readonly COLUMN_SPACE: number = 5;
 
   /**
    * Price control offset.
    */
-  static readonly OFFSET: number = -4;
+  public static readonly OFFSET: number = -4;
 
   /**
    * WaterFlow component vertical spacing.
    */
-  static readonly COLUMNS_GAP: number = 12;
+  public static readonly COLUMNS_GAP: number = 12;
 
   /**
    * Horizontal spacing between WaterFlow components.
    */
-  static readonly ROWS_GAP: number = 12;
+  public static readonly ROWS_GAP: number = 12;
 
   /**
    * 100 percent.
    */
-  static readonly FULL_PERCENT: string = '100%';
+  public static readonly FULL_PERCENT: string = '100%';
 
   /**
    * Breakpoint sm.
    */
-  static readonly BREAK_POINT_SM: string = 'sm';
+  public static readonly BREAK_POINT_SM: string = 'sm';
 
   /**
    * Breakpoint md.
    */
-  static readonly BREAK_POINT_MD: string = 'md';
+  public static readonly BREAK_POINT_MD: string = 'md';
 
   /**
    * Breakpoint lg.
    */
-  static readonly BREAK_POINT_LG: string = 'lg';
+  public static readonly BREAK_POINT_LG: string = 'lg';
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/model/IconModel.ets b/entry/src/main/ets/model/IconModel.ets
index b478f1cadc75aa5d8fc3d5fa592883edec8f2cc1..ae08d2375dc9cbacc213ef668b731b59a05a48f2 100644
--- a/entry/src/main/ets/model/IconModel.ets
+++ b/entry/src/main/ets/model/IconModel.ets
@@ -16,17 +16,17 @@
 import { IconDataModel, ProductDataModel } from '../viewmodel/IconViewModel';
 
 // Shortcut Icon Data.
-export const ICON_DATA1: Array<IconDataModel> = [
+export const ICON_DATA1: IconDataModel[] = [
   new IconDataModel(0, 2, $r('app.media.ic_device_matebook_filled'), $r('app.string.notebook')),
   new IconDataModel(1, 2, $r('app.media.ic_device_smartscreen_filled'), $r('app.string.smart_display')),
-  new IconDataModel(2, 1, $r("app.media.ic_device_sound_x_filled"), $r('app.string.speaker_box')),
-  new IconDataModel(3, 1, $r("app.media.ic_device_vr_glass_filled"), $r('app.string.VR_glasses')),
+  new IconDataModel(2, 1, $r('app.media.ic_device_sound_x_filled'), $r('app.string.speaker_box')),
+  new IconDataModel(3, 1, $r('app.media.ic_device_vr_glass_filled'), $r('app.string.VR_glasses')),
   new IconDataModel(4, 1, $r('app.media.ic_device_watch_filled'), $r('app.string.watch')),
   new IconDataModel(5, 1, $r('app.media.ic_public_devices_phone_filled'), $r('app.string.phone'))
 ];
 
 // Shortcut Icon Data.
-export const ICON_DATA2: Array<IconDataModel> = [
+export const ICON_DATA2: IconDataModel[] = [
   new IconDataModel(0, 1, $r('app.media.ic_gallery_puzzle'), $r('app.string.saw_puzzle')),
   new IconDataModel(1, 1, $r('app.media.ic_public_car'), $r('app.string.cars')),
   new IconDataModel(2, 1, $r('app.media.ic_public_cards'), $r('app.string.purse')),
@@ -35,11 +35,11 @@ export const ICON_DATA2: Array<IconDataModel> = [
 ];
 
 // Offering List Data Source.
-export const PRODUCT_DATA: Array<ProductDataModel> = [
+export const PRODUCT_DATA: ProductDataModel[] = [
   new ProductDataModel(0, $r('app.media.product00'), $r('app.string.product_title00'), $r('app.string.product_price00'), $r('app.string.product_insurance00')),
   new ProductDataModel(1, $r('app.media.product01'), $r('app.string.product_title01'), $r('app.string.product_price01'), $r('app.string.product_insurance01')),
   new ProductDataModel(2, $r('app.media.product02'), $r('app.string.product_title02'), $r('app.string.product_price02'), $r('app.string.product_insurance02')),
   new ProductDataModel(3, $r('app.media.product03'), $r('app.string.product_title03'), $r('app.string.product_price03'), $r('app.string.product_insurance03')),
   new ProductDataModel(4, $r('app.media.product04'), $r('app.string.product_title04'), $r('app.string.product_price04'), $r('app.string.product_insurance04')),
-  new ProductDataModel(5, $r("app.media.product03"), $r('app.string.product_title03'), $r('app.string.product_price03'), $r('app.string.product_insurance05'))
+  new ProductDataModel(5, $r('app.media.product03'), $r('app.string.product_title03'), $r('app.string.product_price03'), $r('app.string.product_insurance05'))
 ];
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index c28903fd717825ca9595ee22f8f09a14d699fad5..3722c1cef1c4434c41db8b64ad48f4e15d2d48df 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -112,10 +112,13 @@ struct Index {
             }
             .width(StackConstant.FULL_PERCENT)
             .scrollBar(BarState.Off)
-            // Sets the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent widget.
+            // Sets the nested scrolling mode in the forward and backward directions to implement
+            // scrolling linkage with the parent widget.
             .nestedScroll({
-              scrollForward: NestedScrollMode.PARENT_FIRST, // After the parent component is scrolled to the edge, the parent component is scrolled.
-              scrollBackward: NestedScrollMode.SELF_FIRST // The parent component is scrolled after the parent component is scrolled to the edge.
+              // After the parent component is scrolled to the edge, the parent component is scrolled.
+              scrollForward: NestedScrollMode.PARENT_FIRST,
+              // The parent component is scrolled after the parent component is scrolled to the edge.
+              scrollBackward: NestedScrollMode.SELF_FIRST
             })
             .onScrollFrameBegin((offset: number) => {
               // Change the values of margin and opacity to move and hide the component.
diff --git a/entry/src/main/ets/viewmodel/DataSource.ets b/entry/src/main/ets/viewmodel/DataSource.ets
index dab411633a9cb8e236e3358e1a7f527f142145ad..be6a5c1c018aeab4a0ebfd4629eec9904d64d9ab 100644
--- a/entry/src/main/ets/viewmodel/DataSource.ets
+++ b/entry/src/main/ets/viewmodel/DataSource.ets
@@ -65,18 +65,18 @@ class BasicDataSource <T> implements IDataSource {
 }
 
 export class ProductDataSource extends BasicDataSource<ProductDataModel> {
-  private ProductList: Array<ProductDataModel> = []
+  private productList: ProductDataModel[] = []
 
   totalCount(): number {
-    return this.ProductList.length;
+    return this.productList.length;
   }
 
   getData(index: number): ProductDataModel {
-    return this.ProductList[index];
+    return this.productList[index];
   }
 
   pushData(data: ProductDataModel[]): void {
-    this.ProductList.push(...data);
-    this.notifyDataAdd(this.ProductList.length - 1);
+    this.productList.push(...data);
+    this.notifyDataAdd(this.productList.length - 1);
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/viewmodel/IconViewModel.ets b/entry/src/main/ets/viewmodel/IconViewModel.ets
index ee7edb6f77556221ca7cffa2989ab991dc512d9b..3dd3c6c33ddcf333db4e44b3ef3388dead523263 100644
--- a/entry/src/main/ets/viewmodel/IconViewModel.ets
+++ b/entry/src/main/ets/viewmodel/IconViewModel.ets
@@ -17,10 +17,10 @@
  * Data class of the icon.
 */
 export class IconDataModel {
-  id: number;
-  span: number;
-  icon: ResourceStr;
-  title: ResourceStr;
+  public id: number;
+  public span: number;
+  public icon: ResourceStr;
+  public title: ResourceStr;
 
   constructor(id: number, span: number, icon: ResourceStr, title: ResourceStr) {
     this.id = id;
@@ -34,11 +34,11 @@ export class IconDataModel {
  * Offering data class.
  */
 export class ProductDataModel {
-  id: number;
-  uri: ResourceStr;
-  title: ResourceStr;
-  price: ResourceStr;
-  insurance: ResourceStr;
+  public id: number;
+  public uri: ResourceStr;
+  public title: ResourceStr;
+  public price: ResourceStr;
+  public insurance: ResourceStr;
 
   constructor(id: number, uri: ResourceStr, title: ResourceStr, price: ResourceStr, insurance: ResourceStr) {
     this.id = id;