一、案例介绍

本案例将展示如何自定义DatePicker组件的样式，包括文本样式、背景颜色、选中项样式等，以创建一个具有独特外观的日期选择器。

二、实现步骤

1. 基础样式定制

@Entry
@Component
struct DatePickerStyleExample {
  @State selectedDate: Date = new Date()
  private dateFormatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })

  build() {
    Column({ space: 20 }) {
      Text('自定义样式日期选择器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      Text('选择的日期：' + this.dateFormatter.format(this.selectedDate))
        .fontSize(16)

      DatePicker({
        start: new Date(),
        end: new Date('2024-12-31'),
        selected: this.selectedDate
      })
        .textStyle({
          fontSize: 18,
          fontWeight: FontWeight.Normal,
          color: Color.Gray
        })
        .selectedTextStyle({
          fontSize: 20,
          fontWeight: FontWeight.Bold,
          color: Color.Blue
        })
        .backgroundColor(Color.White)
        .onChange((value: DatePickerResult) => {
          this.selectedDate = value.currentDate
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

2. 添加主题切换功能

@Entry
@Component
struct DatePickerStyleExample {
  @State selectedDate: Date = new Date()
  @State currentTheme: string = 'light'
  private dateFormatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })

  @State themes = {
    light: {
      background: Color.White,
      text: Color.Gray,
      selected: Color.Blue,
      selectedBackground: '#E8F0FE'
    },
    dark: {
      background: '#2C2C2C',
      text: Color.White,
      selected: '#66B3FF',
      selectedBackground: '#1A1A1A'
    },
    custom: {
      background: '#FFF5E6',
      text: '#8B4513',
      selected: '#FF8C00',
      selectedBackground: '#FFE4B5'
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('自定义样式日期选择器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })
        .fontColor(this.themes[this.currentTheme].text)

      Text('选择的日期：' + this.dateFormatter.format(this.selectedDate))
        .fontSize(16)
        .fontColor(this.themes[this.currentTheme].text)

      DatePicker({
        start: new Date(),
        end: new Date('2024-12-31'),
        selected: this.selectedDate
      })
        .textStyle({
          fontSize: 18,
          fontWeight: FontWeight.Normal,
          color: this.themes[this.currentTheme].text
        })
        .selectedTextStyle({
          fontSize: 20,
          fontWeight: FontWeight.Bold,
          color: this.themes[this.currentTheme].selected
        })
        .backgroundColor(this.themes[this.currentTheme].background)
        .onChange((value: DatePickerResult) => {
          this.selectedDate = value.currentDate
        })

      Row({ space: 10 }) {
        Button('浅色主题')
          .onClick(() => this.currentTheme = 'light')
        Button('深色主题')
          .onClick(() => this.currentTheme = 'dark')
        Button('自定义主题')
          .onClick(() => this.currentTheme = 'custom')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.themes[this.currentTheme].background)
  }
}

3. 添加动画效果

@Entry
@Component
struct DatePickerStyleExample {
  @State selectedDate: Date = new Date()
  @State currentTheme: string = 'light'
  @State isPickerVisible: boolean = true
  private dateFormatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })

  @State themes = {
    light: {
      background: Color.White,
      text: Color.Gray,
      selected: Color.Blue,
      selectedBackground: '#E8F0FE'
    },
    dark: {
      background: '#2C2C2C',
      text: Color.White,
      selected: '#66B3FF',
      selectedBackground: '#1A1A1A'
    },
    custom: {
      background: '#FFF5E6',
      text: '#8B4513',
      selected: '#FF8C00',
      selectedBackground: '#FFE4B5'
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('自定义样式日期选择器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })
        .fontColor(this.themes[this.currentTheme].text)

      Text('选择的日期：' + this.dateFormatter.format(this.selectedDate))
        .fontSize(16)
        .fontColor(this.themes[this.currentTheme].text)
        .onClick(() => {
          animateTo({ duration: 300 }, () => {
            this.isPickerVisible = !this.isPickerVisible
          })
        })

      if (this.isPickerVisible) {
        DatePicker({
          start: new Date(),
          end: new Date('2024-12-31'),
          selected: this.selectedDate
        })
          .textStyle({
            fontSize: 18,
            fontWeight: FontWeight.Normal,
            color: this.themes[this.currentTheme].text
          })
          .selectedTextStyle({
            fontSize: 20,
            fontWeight: FontWeight.Bold,
            color: this.themes[this.currentTheme].selected
          })
          .backgroundColor(this.themes[this.currentTheme].background)
          .transition({ type: TransitionType.All, opacity: 0.0 })
          .onChange((value: DatePickerResult) => {
            this.selectedDate = value.currentDate
          })
      }

      Row({ space: 10 }) {
        Button('浅色主题')
          .onClick(() => {
            animateTo({ duration: 300 }, () => {
              this.currentTheme = 'light'
            })
          })
        Button('深色主题')
          .onClick(() => {
            animateTo({ duration: 300 }, () => {
              this.currentTheme = 'dark'
            })
          })
        Button('自定义主题')
          .onClick(() => {
            animateTo({ duration: 300 }, () => {
              this.currentTheme = 'custom'
            })
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.themes[this.currentTheme].background)
  }
}

三、功能说明

1. 基础样式定制：

   • 自定义文本大小和颜色
   • 自定义选中项样式
   • 自定义背景颜色

2. 主题切换功能：

   • 支持浅色主题
   • 支持深色主题
   • 支持自定义主题

3. 动画效果：

   • 主题切换动画
   • 日期选择器显示/隐藏动画

四、扩展建议

1. 样式定制：

   • 添加更多主题选项
   • 支持自定义动画效果

2. 交互优化：

   • 添加主题预览功能
   • 支持主题参数调整

3. 功能扩展：

   • 添加主题持久化存储
   • 支持自定义主题编辑

五、应用场景

1. 个性化应用：根据应用整体风格定制日期选择器
2. 主题切换：支持浅色/深色模式切换
3. 品牌定制：按照品牌色彩规范定制样式
4. 特殊场景：节日、活动等特殊场景的样式定制