From 9034fa58e8df55337300907f005ddc7c9c796508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E9=9B=AA=E8=8E=B9?=
 <16087863+yycodespace@user.noreply.gitee.com>
Date: Mon, 4 Aug 2025 06:45:43 +0000
Subject: [PATCH 1/2] add ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 马雪莹 <16087863+yycodespace@user.noreply.gitee.com>
---
 .../src/main/ets/pages/SetTabsMarginDemo.ets  | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets

diff --git a/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets b/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets
new file mode 100644
index 0000000..8150ac5
--- /dev/null
+++ b/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets
@@ -0,0 +1,91 @@
+/*
+* Copyright (c) 2025 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ:Tabs如何设置页面margin，使得边距空白跟随页面滑动
+*/
+
+// [Start SetTabsMarginDemo]
+@Entry
+@Component
+struct SetTabsMarginDemo {
+  private tabsController: TabsController = new TabsController()
+  @State currentIndex: number = 0;
+
+  @Builder
+  TabBarBuilder(title: string, targetIndex: number) {
+    Column(){
+      Text(title)
+        .fontWeight(targetIndex === this.currentIndex ? FontWeight.Bold : FontWeight.Normal).margin({ left: 10, right: 10 })
+        .fontColor(targetIndex === this.currentIndex ? Color.Orange : Color.Gray)
+        .onClick(() => {
+          this.tabsController.changeIndex(targetIndex)
+        })
+    }
+  }
+
+  build() {
+    Row() {
+      Column() {
+        Flex({ direction: FlexDirection.Row }) {
+          this.TabBarBuilder('页签1', 0)
+          this.TabBarBuilder('页签2', 1)
+          this.TabBarBuilder('页签3', 2)
+        }
+
+        Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
+          TabContent() {
+            Column() {
+              Text("页签1页面")
+            }
+            .height('100%')
+            .width('100%')
+            .backgroundColor(Color.Yellow)
+          }
+          // 正确设置页边距的地方
+          .margin({left : 10, right :10})
+
+          TabContent() {
+            Column() {
+              Text("页签2页面")
+            }
+            .height('100%')
+            .width('100%')
+            .backgroundColor(Color.Green)
+          }
+          // 正确设置页边距的地方
+          .margin({left : 10, right :10})
+
+          TabContent() {
+            Column() {
+              Text("页签3页面")
+            }
+            .height('100%')
+            .width('100%')
+            .backgroundColor(Color.Pink)
+          }
+          // 正确设置页边距的地方
+          .margin({left : 10, right :10})
+        }
+        // 不应把调整页边距的参数加到这里，影响使用体验
+        // .margin({left : 10, right :10})
+        .onChange((index: number) => {
+          this.currentIndex = index;
+        })
+      }
+    }
+  }
+}
+// [End SetTabsMarginDemo]
\ No newline at end of file
-- 
Gitee


From 8a29b9160c9366bc2d2ceb8659948dd4e4a8c5a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E9=9B=AA=E8=8E=B9?=
 <16087863+yycodespace@user.noreply.gitee.com>
Date: Wed, 6 Aug 2025 02:15:48 +0000
Subject: [PATCH 2/2] update
 ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 马雪莹 <16087863+yycodespace@user.noreply.gitee.com>
---
 ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets b/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets
index 8150ac5..e494daf 100644
--- a/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets
+++ b/ArkUI/entry/src/main/ets/pages/SetTabsMarginDemo.ets
@@ -54,7 +54,7 @@ struct SetTabsMarginDemo {
             .width('100%')
             .backgroundColor(Color.Yellow)
           }
-          // 正确设置页边距的地方
+          // The place where the margins are correctly set.
           .margin({left : 10, right :10})
 
           TabContent() {
@@ -65,7 +65,7 @@ struct SetTabsMarginDemo {
             .width('100%')
             .backgroundColor(Color.Green)
           }
-          // 正确设置页边距的地方
+          // The place where the margins are correctly set.
           .margin({left : 10, right :10})
 
           TabContent() {
@@ -76,10 +76,10 @@ struct SetTabsMarginDemo {
             .width('100%')
             .backgroundColor(Color.Pink)
           }
-          // 正确设置页边距的地方
+          // The place where the margins are correctly set.
           .margin({left : 10, right :10})
         }
-        // 不应把调整页边距的参数加到这里，影响使用体验
+        // The parameter for adjusting the margins should not be added here, as it may affect the user experience.
         // .margin({left : 10, right :10})
         .onChange((index: number) => {
           this.currentIndex = index;
-- 
Gitee