优化了首页的可拓展性

products/entry/src/main/ets/pages/Index.ets

@@ -1,11 +1,28 @@
 import { BasicType, YtAvoid, yTRouter, yTToast } from 'basic';
-import { Mine } from 'user';
 
 @Entry
 @Component
 struct Index {
   @State currentIndex: number = 0
   @StorageProp(YtAvoid.safeBottomKey) bottom: number = 0
+  contentList: BasicType<undefined>[] = [
+    {
+      text: '首页',
+      src: this.currentIndex == 0 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
+      index: 0
+    },
+    {
+      text: '福利',
+      src: this.currentIndex == 1 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
+      index: 1
+    },
+    {
+      text: '我的',
+      src: this.currentIndex == 2 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
+      index: 2
+    }
+  ]
+  tabsController: TabsController = new TabsController()
 
   aboutToAppear(): void {
     yTToast.init({
@@ -16,43 +33,33 @@ struct Index {
 
   build() {
     Navigation(yTRouter) {
-      Tabs() {
-        TabContent() {
-          Text('首页')
-        }
-        .tabBar(this.barBuilder({
-          text: '首页',
-          src: this.currentIndex == 0 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
-          index: 0
-        }))
-
-        TabContent() {
-          // RewardPage()
+      Column() {
+        Tabs({ controller: this.tabsController }) {
+          ForEach(this.contentList, (item: BasicType<undefined>, index) => {
+            TabContent() {
+              Text(item.text)
+            }
+          })
         }
-        .tabBar(this.barBuilder({
-          text: '福利',
-          src: this.currentIndex == 1 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
-          index: 1
-        }))
+        .onChange((index) => {
+          this.currentIndex = index
+        })
+        .barHeight(0)
+        .layoutWeight(1)
 
-        TabContent() {
-          Mine()
+        Row() {
+          ForEach(this.contentList, (item: BasicType<undefined>, index) => {
+            this.barBuilder(item)
+          })
         }
-        .tabBar(this.barBuilder({
-          text: '我的',
-          src: this.currentIndex == 2 ? $r('app.media.app_icon') : $r('app.media.app_icon'),
-          index: 2
-        }))
+        .justifyContent(FlexAlign.SpaceAround)
+        .width('100%')
+        .padding({ bottom: this.bottom })
+        .shadow({ offsetY: -13, radius: 16, color: '#0A000000' })
       }
-      .barBackgroundColor($r('[basic].color.main_blank'))
-      .barPosition(BarPosition.End)
-      .backgroundColor(Color.White)
-      .onTabBarClick((index) => {
-        this.currentIndex = index
-      })
-      .onChange((index) => {
-        this.currentIndex = index
-      })
+      .width('100%')
+      .height('100%')
+
     }
     .mode(NavigationMode.Stack)
     .hideToolBar(true)
@@ -68,8 +75,13 @@ struct Index {
         .lineHeight(16)
         .fontColor(this.currentIndex == item.index ? $r('[basic].color.main_ac_color_dark') :
         $r('[basic].color.main_na_color'))
-        .margin({ bottom: this.bottom })
+
     }
     .margin({ top: 5 })
+    .onClick(() => {
+      this.currentIndex = item.index!
+      this.tabsController.changeIndex(this.currentIndex)
+
+    })
   }
 }