鸿蒙浏览器首页UI

前言

这个UI页面只是单纯模仿了浏览器的首页，用了Tabs组件，但是每个Content页面都不一致，所以不知道如何去设计框架
整个页面分为三个部分，搜索头部，内容部分（tabs），底部

效果

代码

代码逻辑其实是比较乱，但还算有序，别学我，可以把页面分成几个ets文件，自定义组件，这样整体代码看着舒服

@Entry
@Component
struct HomeWork1Page {
   
  @State fiveText:string[] = [
    '为某某友好注入“青春力星”',
      '学习贯彻自我成长重要思想',
      '攻坚“硬科技”共建“技术级',
      '超3000万辆！某某车驶出新高度',
      '专题：设计强国有我'
  ]
  @State message: string = 'Hello World';
  @State currentIndex:number = 0
  @Builder Searcher(){
   
    Row(){
   
      //img and input
      Row({
   space:10}){
   
        Image($r('app.media.page1_search'))
          .width(15)
          .fillColor('#ffb2b3b5')
        TextInput({
   
          placeholder:'搜索...'
        })
          .backgroundColor('#f2f2f1')
      }
      .layoutWeight(1)
      //voice
      Image($r('app.media.page1_yuyin'))
        .width(18)
        .fillColor('#ffb2b3b5')
    }
    .width('90%')
    .backgroundColor('#f2f2f1')
    .borderRadius(20)
    .height('6%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({
   top:5,right:10,left:10,bottom:5})
  }
  @Builder tabBarBuilder(title:string,index:number){
   
    Row(){
   
      Text(title)
        .width(60)
        .fontSize(this.currentIndex==index