diff --git a/common/src/main/ets/utils/BreakpointSystem.ets b/common/src/main/ets/utils/BreakpointSystem.ets
index 421f8c1e7bf9c554916ef6bb68ab4b8cf759eed2..3e460649561d7c3b73a10df76745d7ff1a4f626f 100644
--- a/common/src/main/ets/utils/BreakpointSystem.ets
+++ b/common/src/main/ets/utils/BreakpointSystem.ets
@@ -13,19 +13,21 @@
  * limitations under the License.
  */
 
-import { mediaquery } from '@kit.ArkUI';
+import { mediaquery, MediaQuery } from '@kit.ArkUI';
 import { CommonConstants as Const } from '../constants/CommonConstants';
 
 export class BreakpointSystem {
   private currentBreakpoint: string = Const.MD;
-  private smListener: mediaquery.MediaQueryListener
-  private mdListener: mediaquery.MediaQueryListener
-  private lgListener: mediaquery.MediaQueryListener
+  private mediaQuery: MediaQuery;
+  private smListener: mediaquery.MediaQueryListener;
+  private mdListener: mediaquery.MediaQueryListener;
+  private lgListener: mediaquery.MediaQueryListener;
 
   constructor(context: UIContext) {
-    this.smListener = context.getMediaQuery().matchMediaSync(Const.BREAKPOINTS_SCOPE_1)
-    this.mdListener = context.getMediaQuery().matchMediaSync(Const.BREAKPOINTS_SCOPE_2)
-    this.lgListener = context.getMediaQuery().matchMediaSync(Const.BREAKPOINTS_SCOPE_3)
+    this.mediaQuery = context.getMediaQuery();
+    this.smListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_1);
+    this.mdListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_2);
+    this.lgListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_3);
   }
 
   private updateCurrentBreakpoint(breakpoint: string) {
@@ -52,11 +54,11 @@ export class BreakpointSystem {
   }
 
   public register() {
-    this.smListener = mediaquery.matchMediaSync(Const.BREAKPOINTS_SCOPE_1);
+    this.smListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_1);
     this.smListener.on('change', this.isBreakpointSM);
-    this.mdListener = mediaquery.matchMediaSync(Const.BREAKPOINTS_SCOPE_2);
+    this.mdListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_2);
     this.mdListener.on('change', this.isBreakpointMD);
-    this.lgListener = mediaquery.matchMediaSync(Const.BREAKPOINTS_SCOPE_3);
+    this.lgListener = this.mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_3);
     this.lgListener.on('change', this.isBreakpointLG);
   }