效果演示

代码实现

import { router, window } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  async aboutToAppear(): Promise<void> {
    let w = await window.getLastWindow(getContext())
    w.setWindowSystemBarProperties({
      statusBarColor: '#00C6C3',
      statusBarContentColor: '#FFFFFF'
    })
  }

  build() {
    Column({ space: 16 }) {
      Text('心情日记 - 首页')
        .fontSize(26)
      Button('去写日记')
        .backgroundColor('#00c6c3')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/WriteDiary'
          })
        })

    }
    .width('100%')
    .height('100%')
    .padding(20)

    // .backgroundColor(Color.Pink)
  }
}

import { Font, window } from '@kit.ArkUI'

@Entry
@Component
struct WriteDiary {
  static readonly BASE_FONT_SIZE = 22 //页面基础字体大小
  @State diaryContent: string = '' // 日记内容
  @LocalStorageLink('WeatherFromUIAbility') weather: string = '选择天气'
  @LocalStorageLink('MoodFromUIAbility') mood: string = '选择心情'
  // 天气选择对话框
  weatherDialogCtrl = new CustomDialogController({
    builder: WeatherDialog({ weather: this.weather }),
    width: '100%',
    height: 333,
    alignment: DialogAlignment.Bottom,
    cornerRadius: 0,
    offset: {
      dx: 0,
      dy: 25
    }
  })

  // 心情选择对话框
  moodDialogCtrl = new CustomDialogController({
    builder: MoodDialog({ mood: this.mood }),
    width: '100%',
    height: 333,
    alignment: DialogAlignment.Bottom,
    cornerRadius: 0,
    offset: {
      dx: 0,
      dy: 25
    }
  })

  async aboutToAppear(): Promise<void> {
    let w = await window.getLastWindow(getContext())
    w.setWindowLayoutFullScreen(true)
  }

  build() {
    Column() {
      // 顶部栏
      Row() {
        Image('/images/back.svg')
          .width(11)
          .height(18)


        Text('2024年4月25日')
          .fontSize(14)
          .fontColor('#fff')
          .margin({ left: 10 })

        Blank()

        Row({ space: 3 }) {
          Text('101')
            .fontSize(13)
            .fontColor('#fff')
          Image('/images/down.svg')
            .height(5)
        }
        .width(46)
        .margin({ right: 20 })

        Image('/images/more.svg')
          .width(4)
          .height(16)
      }
      .height(94)
      .width('100%')
      .backgroundColor('#00C6C3')
      .alignItems(VerticalAlign.Bottom)
      .padding({ left: 20, right: 20, bottom: 20 })

      //   写日记
      Column() {
        TextArea({
          placeholder: '写日记'
        })// .placeholderFont(globalThis.parseInt(14))
          .placeholderColor('#AAAAAA')
          .placeholderFont({ size: WriteDiary.BASE_FONT_SIZE })
          .backgroundColor('#fff')
          .margin({ left: 20, top: 20 })
          .onChange((value: string) => {
            this.diaryContent = value
          })
      }
      .layoutWeight(1)

      //   添加图片
      Row() {
        Text('+')
          .textAlign(TextAlign.Center)
          .fontColor('#fff')
          .fontSize(30)
          .fontWeight(700)
          .width(111)
          .height(99)
          .backgroundColor('#f2f2f2')
          .borderRadius(5)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .margin({ left: 40 })

      //   选择天气
      Row({ space: 10 }) {
        Image('/images/weather.png')
          .width(20)
          .height(14)
        Text(this.weather)
          .fontSize(13)
          .fontColor('#7f7f7f')
          .onClick(_ => {
            this.weatherDialogCtrl.open()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .margin({ left: 40, top: 20 })

      //   选择心情
      Row({ space: 10 }) {
        Image('/images/excited.png')
          .width(19)
          .height(19)
        Text(this.mood)
          .fontSize(13)
          .fontColor('#7f7f7f')
          .onClick(_=>{
            this.moodDialogCtrl.open()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .margin({ left: 40, bottom: 40, top: 15 })

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')

    // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

// 天气选择对话框
@CustomDialog
struct WeatherDialog {
  ctrl: CustomDialogController
  @Link weather: string

  build() {
    Grid(){
      GridItem(){
        Column({space:6}){
          Image('/images/sun.png')
            .width(22)
          Text('晴')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '晴'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/cloud.png')
            .width(22)
          Text('多云')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '多云'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/overcast.png')
            .width(22)
          Text('阴')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '阴'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/rain.png')
            .width(22)
          Text('雨')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '雨'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/snow.png')
            .width(22)
          Text('雪')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '雪'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/frost.png')
            .width(22)
          Text('霜冻')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '霜冻'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/thunder.png')
            .width(22)
          Text('雷')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '雷'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/thunderrain.png')
            .width(22)
          Text('雷雨')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '雷雨'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/fog.png')
            .width(22)
          Text('雾')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '雾'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/wind.png')
            .width(22)
          Text('风')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '风'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/sunrise.png')
            .width(22)
          Text('日出')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '日出'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/sunset.png')
            .width(22)
          Text('日落')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.weather = '日落'
          this.ctrl.close()
        })
      }
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
  }
}

// 心情选择对话框
@CustomDialog
struct MoodDialog {
  ctrl: CustomDialogController
  @Link mood: string
  build() {
    Grid(){
      GridItem(){
        Column({space:6}){
          Image('/images/happy.png')
            .width(22)
          Text('开心')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '开心'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/sad.png')
            .width(22)
          Text('伤心')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '伤心'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/wannacry.png')
            .width(22)
          Text('想哭')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '想哭'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/excited.png')
            .width(22)
          Text('兴奋')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '兴奋'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/speechless.png')
            .width(22)
          Text('无语')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '无语'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/angry.png')
            .width(22)
          Text('愤怒')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '愤怒'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/frightened.png')
            .width(22)
          Text('惊吓')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '惊吓'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/expected.png')
            .width(22)
          Text('期待')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '期待'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/melancholy.png')
            .width(22)
          Text('惆怅')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '惆怅'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/shocked.png')
            .width(22)
          Text('裂开')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '裂开'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/daze.png')
            .width(22)
          Text('发呆')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = '发呆'
          this.ctrl.close()
        })
      }
      GridItem(){
        Column({space:6}){
          Image('/images/emo.png')
            .width(22)
          Text('emo')
            .fontSize(WriteDiary.BASE_FONT_SIZE)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .onClick(_=>{
          this.mood = 'emo'
          this.ctrl.close()
        })
      }
    }
    .rowsTemplate('1fr 1fr 1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr')
  }
}