一、前言

书接上文，AI对话界面做好了，我们还需要首页、和关于等界面，可以用Tabs布局来写。

第一步：创建一个Tabs布局

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Tabs() {
        TabContent() {
          
        }
        .tabBar('首页')

        TabContent() {
         
        }
        .tabBar('AI')

        TabContent() {
         
        }
        .tabBar('关于')
        
      }
    }
    .height('100%')
    .width('100%')
  }
}

第一步：创建一个首页界面HomePage.ets

import { geoLocationManager } from '@kit.LocationKit';
import { BusinessError } from '@kit.BasicServicesKit';

interface LocationInfo {
  name: string;
  code: string;
}


@ComponentV2
struct HomePage {
  @Local location: LocationInfo = { name: '北京', code: '110100' };

  @Local angleValue:number = 0
  @Local xPosition:number = -60
  @Local translateY:number = -40
  @Local myScale: number = 1.0;
  @Local opacityBg: number = 1.0;



  colorList:ResourceStr[] = [
    '#ff72ab0b',
    '#ff0857a7',
    '#ff0d862d',
    '#ff5489bf',
    '#ff802db3',
    '#ffc44ca5',
    '#ff5d2fae',
    '#ff85be81',
    '#ff1e84ea',
    '#ff48627c',
    '#ffb07b56',
    '#ffd2a20d',
    '#ff12e0a4'
  ]

  layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    onGetRectByIndex: (index: number) => {
      if (index == 0) { // key1是“0”按键对应的index
        return [0, 0, 2, 2];
      } else if (index == 1||index == 2) { // key2是“=”按键对应的index
        return [0, 0, 1, 2];
      }else if (index == 3) { // key2是“=”按键对应的index
        return [0, 0, 1, 4];
      }else if (index == 4) { // key2是“=”按键对应的index
        return [0, 0, 2, 1];
      }else if (index == 11||index == 12) { // key2是“=”按键对应的index
        return [0, 0, 2, 2];
      }
      // 这里需要根据具体布局返回其他item的位置
      return [0, 0, 1, 1];
    }
  }




  aboutToAppear(): void {

    //this.getWeatherData()

    geoLocationManager.getCurrentLocation().then(async (result) => {
      console.info('current location latitude: ' + result.latitude);
      console.info('current location longitude: ' + result.longitude);

    }).catch((err: BusinessError ) => {
      console.error(`getCurrentLocation failed. Code: ${err.code}, message: ${err.message}`);
    });

  }

  build() {
    Column() {
      Row(){
        Row(){
          Text(`28°`)
            .fontSize(35)
            .fontColor('#000')
            .fontWeight(FontWeight.Bold)

          Column(){
            Text(`晴 空气优`)
              .fontSize(15)
              .fontColor('#000')

            Text('30°/25°')
              .fontSize(14)
              .fontColor('#000')

          }.margin({left:20})
        }
        Image($r('app.media.icon_100d'))
          .width(30)
          .height(30)
      }.width('100%')
      .padding({left:20,right:20})
      .justifyContent(FlexAlign.SpaceBetween)

      Grid(undefined, this.layoutOptions) {
        ForEach(['音乐','天气','闹钟','日历','新闻','相机','相册','设置','主题','钱包','遥控','电子书','通讯录'],
          (digital:string,index:number) => {
            GridItem() {

              Stack(){
                if (index==1) {
                  /*Image($r('app.media.sun_icon'))//晴天
                    .rotate({ angle: this.angleValue })
                    .animation({
                      duration: 5000,
                      iterations: -1,
                      curve: Curve.EaseOut,
                      onFinish:()=>{

                      }
                    })
                    .onAppear(()=>{
                      this.angleValue = 360
                    })*/

                  /*Image($r('app.media.cloudy_day_1'))//多云
                    .width(100)
                    .translate({ x: this.xPosition, y: 0 })
                    .animation({
                      duration: 5000,
                      curve: Curve.EaseOut,
                      iterations: -1 // 无限循环
                    })
                    .onAppear(()=>{
                      this.xPosition = (this.xPosition === -60) ? 130 : -60
                    })*/

                  /*Image($r('app.media.lightning_2'))//闪电
                    .height('100%')
                    .opacity(this.opacityBg)
                    .animation({
                      duration: 1000,
                      curve: Curve.EaseOut,
                      iterations: -1 // 无限循环
                    })
                    .onAppear(()=>{
                      this.opacityBg = this.opacityBg==1.0?0.1:1.0
                    })*/

                  Image($r('app.media.raindrop_xl'))//下雨
                    .height(30)
                    .translate({x:-40, y: this.translateY })
                    .animation({
                      duration: 1200,
                      curve: Curve.EaseOut,
                      iterations: -1 // 无限循环
                    })
                    .onAppear(()=>{
                      this.translateY = (this.translateY === -40) ? 80 : -40
                    })

                  Image($r('app.media.raindrop_xl'))//下雨
                    .height(30)
                    .translate({x:0, y: this.translateY })
                    .animation({
                      duration: 1500,
                      curve: Curve.EaseOut,
                      iterations: -1 // 无限循环
                    })
                    .onAppear(()=>{
                      this.translateY = (this.translateY === -40) ? 80 : -40
                    })

                  Image($r('app.media.raindrop_xl'))//下雨
                    .height(30)
                    .translate({x:40,y: this.translateY })
                    .animation({
                      duration: 1300,
                      curve: Curve.EaseOut,
                      iterations: -1 // 无限循环
                    })
                    .onAppear(()=>{
                      this.translateY = (this.translateY === -40) ? 80 : -40
                    })
                }

                Column(){
                  Image($r('app.media.icon_'+index))
                    .width(40)
                    .width(40)

                  Text(digital)
                    .fontSize(16)
                    .fontColor('#fff')
                    .margin({top:5})
                    .textAlign(TextAlign.Center)
                }
              }
            }
            .backgroundColor(this.colorList[index])
            .margin(5)
            .borderRadius(10)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
          })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
      .padding(10)

    }
    //.justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

第三部 将首页和对话页放到tabs中

Tabs() {
        TabContent() {
          HomePage()
        }
        .tabBar('首页')

        TabContent() {
          ChatPage()
        }
        .tabBar('AI')

        TabContent() {

        }
        .tabBar('关于')

      }

项目Demo：AIchatRobot: 鸿蒙app的AI聊天机器人

持续更新中······