ArkUI子系统Changelog

cl.arkui.1 WithTheme相关组件行为变更

访问级别

公开接口

变更原因

为提升主题功能的一致性与完整性，对下述场景下的组件行为进行优化适配。

当前已支持WithTheme的组件，在特定场景下部分组件未能正确应用WithTheme所设置的主题样式，与预期设计效果不符。
- 弹窗类组件不跟随宿主节点的局部主题或深浅色样式。
- 部分组件（组件范围见场景二）动态添加至WithTheme中后，不会跟随局部主题或深浅色变化而变化（例如通过ForEach+ListItem，将组件添加到WithTheme组件下）。
对于暂不支持WithTheme的组件，其样式不会响应WithTheme或默认主题setDefaultTheme设置的主题样式。

变更影响

此变更涉及应用适配。

场景一：弹窗类组件跟随宿主节点的WithTheme样式

变更前：宿主节点的bindMenu、bindPopup、bindSheet、CalendarPicker弹窗类组件弹出时，不跟随宿主节点的局部主题或深浅色样式。

变更后：宿主节点的bindMenu、bindPopup、bindSheet、CalendarPicker弹窗类组件弹出时，会跟随宿主节点的局部主题或深浅色样式。

场景二：动态添加到WithTheme的组件响应主题变化

变更前：当WithTheme的主题样式或深浅色发生动态变化时，后续动态添加到WithTheme中的组件不会同步响应这些变化。

变更后：当WithTheme的主题样式或深浅色发生动态变化时，后续动态添加到WithTheme中的组件会同步响应这些变化。

涉及场景	涉及组件
动态添加场景	Button、Menu、DatePicker、TextPicker、TimePicker、Counter、Progress、TextClock、LoadingProgress、Scroll、AlphabetIndexer、Tabs、TabContent、Swiper、Indicator。

场景三：组件新增WithTheme支持能力

变更前：组件不受WithTheme或setDefaultTheme设置的样式影响，显示为系统默认样式。

变更后：组件会响应WithTheme或setDefaultTheme设置的样式，并优先显示对应的主题效果。

涉及场景	涉及组件
组件新增WithTheme支持能力	TextArea、Search、RichEditor、Image、ImageAnimator、PatternLock、QRCode、DataPanel、文本选择菜单、Badge、styleString、LocalBuilder、Tabs、TabContent、ListItemGroup、ListItem、ArcListItem、GridItem、Refresh、TextPicker、TimePicker、DatePicker、CalendarPicker、UIPickerComponent、MenuItem和menuItemGroup。

起始API Level

变更发生版本

从OpenHarmony SDK 7.0.0.22开始。

变更的接口/组件

WithThemeInterface、setDefaultTheme。

适配指导

若希望上述组件在WithTheme下保持变更前的行为，即继续跟随系统样式或系统深浅色模式，可将该组件放入WithTheme({ colorMode: ThemeColorMode.SYSTEM })组件下。

@Entry
@Component
struct WithThemeExample {
  @State message: string = 'Hello World';
  @State arr: number[] = [];
  private index: number = 0;
  build() {
    Row() {
      Column() {
        Button("Add Element")
          .onClick(() => {
            this.arr.push(this.index++);
          })
        WithTheme({ colorMode: ThemeColorMode.DARK }) {
          List() {
            ForEach(this.arr, (item: number, index) => {
              ListItem() {
                Column() {
                  WithTheme({ colorMode: ThemeColorMode.SYSTEM }) {
                    Column() {
                      Button("Button In ForEach with COLOR_MODE_SYSTEM")
                    }
                  }
                }
              }
            })
          }
          .width('100%')
          .height('100%')
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

如果WithTheme容器内的部分组件使用了固定颜色值，组件放入WithTheme中，生效WithTheme设置的样式时，可能影响显示效果。可通过将该组件放入新的WithTheme容器中，并将该容器的colorMode设置为ThemeColorMode.SYSTEM，恢复为变更前的行为。

@Entry
@Component
struct WithThemeExample {
  @State arr: number[] = [];
  private index: number = 0

  build() {
    Row() {
      Column() {
        Button("Add Element")
          .onClick(() => {
            this.arr.push(this.index++);
          })
        WithTheme({ colorMode: ThemeColorMode.DARK }) {
          List() {
            ForEach(this.arr, (item: number, index) => {
              ListItem() {
                WithTheme({ colorMode: ThemeColorMode.SYSTEM }) {
                  Column() {
                    Text("Set ColorMode SYSTEM")
                      .fontColor("#FF383838")
                  }
                  .backgroundColor($r('sys.color.background_primary'))

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