Idées de mise en œuvre
Cet article présente trois méthodes différentes pour permettre aux applications de s'adapter librement aux modes sombre et clair du système :
- Utiliser les ressources de couleur du système : Cette méthode est la plus simple. Il vous suffit de référencer les ressources de couleur fournies par le système dans l'application, telles que
ohos_id_color_backgroundouohos_id_color_primaryetc., et l'application peut suivre automatiquement les modifications des paramètres de couleur du système. - Utiliser des répertoires de qualificatifs : Cette méthode est légèrement plus compliquée. Vous devez créer différents répertoires de qualificatifs dans l'application, tels que
resources/darkouresources/light, etc., pour représenter différents scénarios d'application, puis définir différentes ressources sous chaque répertoire pour s'adapter aux différents modes. Enfin, il vous suffit de référencer les noms de ces ressources dans l'application, sans spécifier de répertoires spécifiques, le système sélectionnera automatiquement les ressources appropriées en fonction du mode actuel. - S'abonner aux modifications des variables d'environnement système : Cette méthode est la plus flexible, mais aussi la plus complexe. Il doit surveiller les modifications des variables d'environnement système dans l'application et appeler les fonctions correspondantes pour les traiter lorsque des modifications se produisent. De cette façon, vous pouvez implémenter n'importe quelle logique souhaitée dans la fonction pour modifier l'apparence de l'application.
Étapes de développement
Créez un nouveau projet Empty Ability et créez une nouvelle application avec uniquement la page "Hello World".
Méthode 1 : ressources système
Afin de permettre aux différents développeurs de créer rapidement des applications, OpenHarmony fournit un ensemble de ressources système que les développeurs peuvent utiliser directement. Si vous spécifiez l'attribut de couleur comme ID de couleur du système dans le composant de l'interface utilisateur, l'application peut s'adapter automatiquement au mode sombre/clair du système sans travail supplémentaire.
Les développeurs peuvent utiliser “$r('sys.type.resource_id')”la syntaxe pour référencer les ressources système. Parmi eux, sys indique qu'il s'agit d'une ressource système, type indique le type de ressource, qui peut être "color", "string", "media", etc., et resource_id indique l'ID de la ressource, tel que "ohos_id_color_background ", "ohos_id_color_primary", etc.
Vous pouvez consulter l'introduction des ressources dans la conception UX de l'application dans le guide officiel pour en savoir plus sur tous les ID de ressources système pris en charge par OpenHarmony et leurs valeurs spécifiques dans différents modes et appareils.
Code complet :
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 引入系统资源颜色设置文字颜色
.fontColor($r('sys.color.ohos_id_color_text_primary'))
}
.width('100%')
}
// 引入系统资源颜色设置应用背景颜色
.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
.height('100%')
}
}
Méthode 2 : Répertoire des qualificateurs
Afin que l'application s'adapte aux modes sombre et clair du système, nous pouvons créer un répertoire de ressources spécial de type Mode Couleur resources/darkpour stocker les ressources adaptées au mode sombre. Lorsque le système est en mode sombre, l'application donnera la priorité à la lecture des ressources de ce répertoire. Si la ressource correspondante n'est pas trouvée, l'application utilisera resources/basela ressource dans le répertoire par défaut.
Outre le type Mode couleur, il existe de nombreux autres types de qualificateurs qui peuvent fournir différentes ressources en fonction de différents appareils et environnements. Par exemple, vous pouvez utiliser les codes de pays mobiles et les codes de réseau mobile pour distinguer les opérateurs dans différentes régions, utiliser la langue et le texte pour distinguer différentes langues et dialectes, utiliser des écrans horizontaux et verticaux pour distinguer les mises en page dans différentes orientations et utiliser l'appareil. types pour distinguer différentes tailles et formes. Appareils, utiliser la densité d'écran pour différencier les écrans de différentes résolutions et densités de pixels, etc. Chaque qualificatif possède un ensemble fixe de règles de format et de dénomination qui doivent être suivies pour créer un répertoire de ressources juridiques. Dans le même temps, chaque qualificatif a également un ordre de priorité relatif, et le système sélectionnera le meilleur parmi plusieurs répertoires de ressources correspondants en fonction de cet ordre. Si vous souhaitez en savoir plus sur les qualificatifs, vous pouvez consulter la classification des ressources .
Nous créons un fichier color.json pour le nouveau répertoire resources/dark/element. Créez un nouvel ID de couleur et attribuez des valeurs de couleur spécifiques. bg_color est noir et txt_color est blanc.
{
"color": [
{
"name": "bg_color",
"value": "#000000"
},
{
"name": "txt_color",
"value": "#c6c6c6"
}
]
}
Dans resources/base/element/color.json, ces deux ID de couleur sont également créés et reçoivent des valeurs de couleur différentes. bg_color est blanc et txt_color est noir.
{
"color": [
{
"name": "start_window_background",
"value": "#FFFFFF"
},
{
"name": "bg_color",
"value": "#f1f3f5"
},
{
"name": "txt_color",
"value": "#121212"
}
]
}
Définissez les propriétés du composant sur l'ID de couleur que nous avons créé. À ce stade, notre application utilise la valeur de couleur correspondant à l'ID dans le répertoire sombre en mode sombre. Dans d'autres cas, la valeur de couleur correspondante dans le répertoire de base sera utilisée.
Code complet :
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.txt_color'))
}
.width('100%')
}
.backgroundColor($r('app.color.bg_color'))
.height('100%')
}
}
Méthode 3 : Abonnez-vous aux variables d'environnement système
onConfigurationUpdate sera appelé lorsque la configuration du système est mise à jour. Nous pouvons obtenir l'attribut ColorMode (mode sombre et clair du système) dans les informations de configuration du système, puis utiliser AppStorage pour stocker l'état des modes sombre et clair du système. Utilisez @StorageProp pour en établir un. -Synchronisation des données entre AppStorage et les composants personnalisés via @Watch. Surveillez les changements dans les variables d'état et créez une méthode de rappel pour modifier la valeur de la variable de couleur lorsque la variable d'état change, réalisant ainsi une commutation automatique de la correspondance des couleurs de l'application avec les modes sombre et clair du système. .
1. Obtenez le mode de couleur actuel dans le cycle de vie onCreate() d'AbilityStage et enregistrez-le dans AppStorage.
onCreate(want, launchParam) {
AppStorage.SetOrCreate('currentColorMode', this.context.config.colorMode);
}
2. Obtenez le dernier mode de couleur modifié dans le cycle de vie onConfigurationUpdate() d'AbilityStage et actualisez-le dans AppStorage.
onConfigurationUpdate(newConfig: Configuration): void {
AppStorage.SetOrCreate('currentColorMode', newConfig.colorMode);
}
3. Dans la page de l'interface utilisateur, utilisez @StorageProp + @Watch pour obtenir le dernier mode de profondeur et surveiller les changements de mode de profondeur de l'appareil.
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number
// 深浅模式枚举值如下
// export enum ColorMode {
// COLOR_MODE_NOT_SET = -1,
// COLOR_MODE_DARK = 0,
// COLOR_MODE_LIGHT = 1
// }
4. Créez une variable d'état de l'interface utilisateur et définissez l'attribut de couleur du composant sur la variable d'état.
@State color_txt: string = ''
@State color_bg: string = ''
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(this.color_txt)
}
.width('100%')
}
.height('100%')
.backgroundColor(this.color_bg)
}
5. Exécutez une logique d'adaptation personnalisée dans la fonction de rappel @Watch.
onColorModeChange(): void {
if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
this.color_txt = '#121212'
this.color_bg = '#f1f3f5'
} else {
this.color_txt = '#c6c6c6'
this.color_bg = '#000000'
}
}
6. La méthode décorée par le décorateur @Watch ne sera pas appelée lors de la première initialisation. La méthode de rappel @Watch ne sera appelée que lorsque l'état suivant changera. Par conséquent, lors de la première initialisation, une adaptation logique doit être effectuée en fonction de la valeur de currentMode et le contenu spécifique est cohérent avec onColorModeChange.
aboutToAppear() {
if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
this.color_txt = '#121212'
this.color_bg = '#f1f3f5'
} else {
this.color_txt = '#c6c6c6'
this.color_bg = '#000000'
}
}
Dans cet exemple, nous contrôlons les deux variables d'état de l'interface utilisateur après avoir surveillé les changements dans les modes sombre et clair, actualisant ainsi les effets d'interface utilisateur correspondants. Après être passé en mode sombre, les couleurs du texte et de l'arrière-plan changeront. Au cours du processus de développement proprement dit, l'application peut être étendue selon ses propres scénarios et exécuter sa propre logique d'adaptation personnalisée.
Code complet :
// index.ets
import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State color_txt: string = ''
@State color_bg: string = ''
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = 1;
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(this.color_txt)
}
.width('100%')
}
.height('100%')
.backgroundColor(this.color_bg)
}
aboutToAppear() {
if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
this.color_txt = '#121212'
this.color_bg = '#f1f3f5'
} else {
this.color_txt = '#c6c6c6'
this.color_bg = '#000000'
}
}
onColorModeChange(): void {
if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
this.color_txt = '#121212'
this.color_bg = '#f1f3f5'
} else {
this.color_txt = '#c6c6c6'
this.color_bg = '#000000'
}
}
}
// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import {
Configuration } from '@ohos.app.ability.Configuration';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
AppStorage.SetOrCreate('currentColorMode', this.context.config.colorMode);
}
onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.loadContent('pages/Index', (err, data) => {
});
}
onConfigurationUpdate(newConfig: Configuration): void {
AppStorage.SetOrCreate('currentColorMode', newConfig.colorMode);
}
}