1/* 2 * Copyright (c) 2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { TitleBar } from './TitleBar' 17import { TrendsDetailView } from './TrendsDetailView'; 18 19@Component 20export struct SquareView { 21 @State currentIndex: number = 0; 22 private controller: TabsController = new TabsController(); 23 24 @Builder 25 TabBuilder(index: number, name: string | Resource) { 26 Column() { 27 Text(name) 28 .fontFamily('HarmonyHeiTi-Medium') 29 .fontSize($r('app.integer.layout_size_16')) 30 .fontColor(this.currentIndex === index ? $r('app.color.font_color_007DFF') : $r('app.color.font_color_182431')) 31 .lineHeight($r('app.integer.layout_size_22')) 32 .fontWeight(this.currentIndex === index ? 500 : 400) 33 .margin({ bottom: $r('app.integer.layout_size_7') }) 34 .opacity(this.currentIndex === index ? $r('app.integer.layout_size_1') : $r('app.float.opacity')) 35 Divider() 36 .strokeWidth(2) 37 .width($r('app.integer.layout_size_48')) 38 .borderRadius($r('app.integer.layout_size_1')) 39 .color($r('app.color.font_color_007DFF')) 40 .opacity(this.currentIndex === index ? $r('app.integer.layout_size_1') : $r('app.integer.layout_size_0')) 41 .margin({ bottom: $r('app.integer.layout_size_8') }) 42 } 43 } 44 45 build() { 46 Column() { 47 48 TitleBar({ title: $r('app.string.explore') }) 49 50 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 51 TabContent() { 52 //放包含同城按钮页面、微博热搜榜、广告页面等页面 53 TrendsDetailView() 54 } 55 .tabBar(this.TabBuilder(0, $r('app.string.trend'))) 56 57 TabContent() { 58 59 }.tabBar(this.TabBuilder(1, $r('app.string.hot_tab'))) 60 61 } 62 .onChange((index: number) => { 63 this.currentIndex = index 64 }) 65 .barWidth($r('app.integer.layout_size_200')) 66 .barHeight($r('app.integer.layout_size_40')) 67 }.backgroundColor($r('app.color.tabbar_background')) 68 } 69}