148.HarmonyOS NEXT系列教程之3D立方体旋转轮播案例讲解之示例页面架构设计

import { CubeRotateAnimationSwiper } from './CubeRotateAnimationSwiper';
import { CubeSwiperController, MyGridItem, MySwiperItem, MyTabItem } from '../../model/CubeRotationModel/DataModel'
import { promptAction } from '@kit.ArkUI';
import { IMAGES, GRID_ITEMS, SWIPER_LIST, TAB_ITEMS } from '../../mock/MockData'

@Component
export struct CubeRotateAnimationSamplePage {
    // 状态管理
    @StorageLink('avoidAreaBottomToModule') avoidAreaBottomToModule: number = 0;
    @State headerOpacity: number = 0;
    @State currentIndex: number = 0;
    
    // 控制器
    private tabsController: TabsController = new TabsController();
    private swiperController: SwiperController = new SwiperController();
    private scroller: Scroller = new Scroller();
}

// Grid数据源
private gridItems: MyGridItem[] = GRID_ITEMS;
// Tabs数据
private tabItems: MyTabItem[] = TAB_ITEMS;
// 顶部轮播图数据
private bannerItems: Resource[] = IMAGES;
// Swiper数据
private swiperList: MySwiperItem[][] = [];

// 组件控制器
private cubeSwiperControllers: CubeSwiperController[] = [];

layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    onGetRectByIndex: (index: number) => {
        if (index == 0) {
            return [0, 0, 2, 1]
        } else if (index == 1) {
            return [0, 1, 1, 1]
        } else {
            return [1, 1, 1, 1]
        }
    }
};