HarmonyOS_Tab组件

import CommonConstants from '../common/constants/CommonConstants';
import Home from "../view/Home"
import Setting from "../view/Setting"

@Entry
@Component
struct MainPage{
    @State currentIndex: number = CommonConstants.HOME_TAB_INDEX;
    //1.一个TabsController
    private tabsController: TabsController = new TabsController();
    
    //2.一个TabBuilder（四个参数）
    @Builder TabBuilder(title: string,index: number, selectedImg: Resource,normalImg: Resource){
        //主页内容
        Column(){
            Image(this.currentIndex === index ? selectedImg : normalImg)
            	.width($r('app.float.mainPage_baseTab_size'))
            	.height($r('app.float.mainPage_baseTab_size'))
            Text(title)
            	.margin({ top: $r('app.float.mainPage_baseTab_top')})
            	.fontSize($r('app.float.main_tab_fontSize'))
            	.fontColor(this.currentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal'))
        }
        .justifyContent(FlexAlign.Center)
        .height($r('app.float.mainPage_barHeight'))
        .width(CommonConstants.FULL_PARENT)
        .onClick(()=>{
            this.currentIndex = index;
            this.tabsController.changeIndex(this.currentIndex);
        })
    }
    
    //3.build部分
    build(){
        //直接一个Tabs（底部，controller）
        Tabs({
            barPosition: BarPosition.End,
            controller: this.tabsController
        }){
            //第一个TabContent
            TabContent(){
                Home()
            }
            .padding({left: $r('app.float.mainPage_padding'),right:$r('app.float.mainPage_padding')})
            .backgroundColor($r('app.color.mainPage.backgroundColor'))
            //这里用上面声明的builder，四个参数为，TITLE，INDEX，选中图，未选中图
            .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE,CommonConstants.HOME_TAB_INDEX,
                                   $r('app.media.home_selected'),$r('app.media.home.normal')))
            
            //第二个TabContent
            TabContent(){
                Setting()
            }
            .padding({left: $r('app.float.mainPage_padding'),right:$r('app.float.mainPage_padding')})
            .backgroundColor($r('app.color.mainPage_backgroundColor'))
            .tabBar(this.TabBuilder(CommonConstants.MINE_TITLE,CommonConstants.MINE_TAB_INDEX,
                                   $r('app.media.mine_selected'),$r('app.media.mine_normal')))
        }
        .width(CommonConstants.FULL_PARENT)
        .backgroundColor(Color.White)
        .barHeight($r('app.float.mainPage_barHeight'))
        .barMode(BarMode.Fixed)
        //点击触发
        .onChange((index: number) =>{
            this.currentIndex = index;
        })
    }
}

@Component
export default struct Home{
    //Swipper轮转
    private swiperController: SwiperController = new SwiperController();
    
    build({
        Scroll(){
            Column({ space: CommonConstants.COMMONSPACE }){
                Column(){
                    //第一行标题
                    Text($r('app.string.mainPage_tabTitles_home'))
                    	.fontWeight(FontWeight.Medium)
                    	.fontSize($r('app.float.page_title_text_size'))
                    	.margin({ top: $r{'app.float.mainPage_tabTitles_margin'}})
                    	.padding({left: $r('app.float.mainPage_tabTitles_padding')})
                }
                .width(CommonConstants.FULL_PARENT)
                .alighItems(HorizontalAlign.Start)
                
                //轮转图片
                Swiper(this.swiperController){
                    ForEach(mainViewModel.getSwiperImages(),(img: Resource) =>{
                        Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
                    },(img:Resource)=> JSON.stringify(img.id))
                }
                .margin({top: $r('app.float.home_swiper_margin')})
                .autoPlay(true)
                
                //网格布局
                Grid(){
                    ForEach(mainViewModel.getFirstGridData(),(item: ItemData) =>{
                        GridItem(){
                            Column(){
                                Image(item.img)
                                	.width($r('app.float.home_homeCell_size'))
                                	.height($r('app.float.home_homeCell_size'))
                                Text(item.title)
                                	.fontSize($r('app.float.little_text_size'))
                                	.margin({top: $r('app.float.home_homeCell_margin')})
                            }
                        }
                    },(item: ItemData) => JSON.stringify(item))
                }
                .columnsTemplate('1fr 1fr 1fr 1fr')
                .rowsTemplage('1fr 1fr')
                .columnsGap($r('app.float.home_grid_columnsGap'))
                .rowsGap($r('app.float.home_grid_rowGap'))
                .padding({ top: $r('app.float.home_grid_padding'),bottom: $r('app.float.home_grid_padding')})
                .height($r('app.float.home_grid_height'))
                .backgroundColor(Color.White)
                .borderRadius($r('app.float.home_grid_borderRadius'))
                
                Text($r('app.string.home_list'))
                	.fontSize($r('app.float.normal_text_size'))
                	.fontWeight(FontWeight.Medium)
                	.width(CommonConstants.FULL_PARENT)
                	.margin({top: $r('app.float.home_text_margin')})
                
                Grid(){
                    ForEach(mainViewModel.getSecondGridData(),(secondItem:ItemData) =>{
                        GridItem(){
                            Column(){
                                Text(secondItem.title)
                                	.fontSize($r('app.float.normal_text_size'))
                                	.fontWeight(FontWeight.Medium)
                                Text(secondItem.others)
                                	.margin({top: $r('app.float.home_list_margin')})
                                	.fontSize($r('app.float.little_text_size'))
                                	.fontColor($r('app.color.home_grid_fontColor'))
                            }
                            .alignItems(HorizontalAlign.Start)
                        }
                        .padding({ top: $r('app.float.home_list_padding'),left: $r('app.float.home_list_padding')})
                        .borderRadius($r('app.float.home_backgroundImage_borderRadius'))
                        .align(Alignment.TopStart)
                        .backgroundImage(secondItem.img)
                        .backgroundImageSize(ImageSize.Cover)
                        .width(CommonConwstants.FULL_PARENT)
                        .height(CommonConstants.FULL_PARENT)
                    },(secondItem: ItemData) => JSON.stringify(secondItem))
                }
                .width(CommonConstants.FULL_PARENT)
                .height($r('app.float.home_secondGrid_height'))
                .columnsTemplate('1fr 1fr')
                .rowsTemplate('1fr 1fr')
                .columnsGap($r('app.float.home_grid_columnsGap'))
                .rowsGap($r('app.float.home_frid_rowGap'))
                .margin({bottom: $r('app.float.setting_button_bottom')})
            }
            .height(CommonConstants.FULL_PARENT)
        }
    })
}

import CommonConstants from '../common/constants/commonConstants;
import ItemData from '../viewmodel/ItemData';
import mainViewModel from '../viewmodel/MainViewModel';

@Component
export default struct Setting{
    
    //设置页面的每一单元
    @Builder settingCell(item: ItemData){
        Row(){
            Row({ space: CommonConstants.COMMON_SPACE}){
                Image(item.img)
                	.width($r('app.float.setting_size'))
                	.height($r('app.float.setting_size'))
                Text(item.title)
                	.fontSize($r('app.float.normal_text_size'))
            }
            
            if(item.others === null){
                Image($r('app.media.right_grey'))
                	.width($r('app.float.setting_jump_width'))
                	.height($r('app.float.setting_jump_height'))
            }else{
                Toggle({ type: ToggleType.Switch, isOn: false})
            }
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width(CommonConstants.FULL_PARENT)
        .padding({
            left: $r('app.float.setting_settingCell_left'),
            right: $r('app.float.setting_settingCell_right')
        })
    }
    
    build(){
        //首先是个滚轮页面
        Scroll(){
            Column({ space: CommonConstatns.COMMON_SPACE}){
                Column(){
                    Text($r('app.string.mainPage_tabTitles_mine'))
                    	.fontWeight(FontWeight.Medium)
                    	.fontSize($r('app.float.page_title_text_size'))
                    	.margin({top: $r('app.float.mainPage_tabTitles_margin')})
                    	.padding({left: $r('app.float.mainPage_tabTitles_padding')})
                }
                .width(CommonConstants.FULL_PARENT)
                .alignItems(HorizontalAlign.Start)
                
                //用户信息
                Row(){
                    Image($r('app.media.account'))
                    	.width($r('app.float.setting_account_size'))
                    	.height($r('app.float.setting_account_size'))
                    Column(){
                        Text($r('app.string.setting_account_name'))
                        	.fontSize($r('app.float.setting_account_fontSize'))
                        Text($r('app.string.setting_account_email'))
                        	.fontSize($r('app.float.little_text_size'))
                        	.margin({top: $r('app.float.setting_name_margin')})
                    }
                    .alignItems(HorizontalAlign.Start)
                    .margin({ left: $r('app.float.setting_account_margin')})
                }
                .margin({top: $r('app.float.setting_account_margin')})
                .alignItems(VerticalAlign.Center)
                .width(CommonConstants.FULL_PARENT)
                .height($r('app.float.setting_account_height'))
                .backgroundColor(Color.White)
               	.padding({ left: $r('app.float.setting_account_padding')})
                .borderRadius($r('app.float.setting_account_borderRadius'))
                
                List(){
                    ForEach(mainViewModel.getSettingListData(),(item: ItemData) =>{
                        ListItem(){
                            this.settingCell(item)
                        }
                        .height($r('app.float.setting_list_height'))
                    },(item: ItemData) => JSON.stringify(item))
                }
                .backgroundColor(Color.White)
                .width(CommonConstants.FULL_PARENT)
                .height(CommonConstants.SET_LIST_WIDTH)
                .divider({
                    strokeWidth: $r('app.float.setting_list_strokeWidth'),
                    color: Color.Grey,
                    startMargin: $r('app.float.setting_list_startMargin'),
                    endMargin: $r('app.float.setting_list_endMargin')
                })
                .borderRadius($r('app.float.setting_list_borderRadius'))
                .padding({ top: $r('app.float.setting_list_padding'), bottom: $r('app.float.setting_list_padding')})
                Blank()
                
                //退出登录按钮
                Button($r('app.string.setting_button'),{type:ButtonType.Capsule})
                	.width(CommonConstants.BUTTON_WIDTH)
                	.height($r('app.float.login_button_height'))
                	.fontSize($r('app.float.normal_text_size'))
                	.fontColor($r('app.color.setting_button_fontColor'))
                	.fontWeight(FontWeight.Medium)
                	.backgroundColor($r('app.color.setting_button_backgroundColor'))
                	.margin({ bottom: $r('app.float.setting_button_bottom')})
            }
            .height(CommonConstants.FULL_PARENT)
        }
    }
}