Que dois-je faire si le texte Android en haut d’uniapp n’est pas centré ?

Avec le développement de l'Internet mobile, de plus en plus de personnes commencent à utiliser des applications mobiles (APP) pour répondre à leurs besoins de vie et de travail. Dans le processus de développement de l'APP, un cadre de développement multiplateforme-uniapp a progressivement été apprécié et utilisé par de plus en plus de développeurs. Cependant, vous rencontrerez parfois des problèmes lors du développement de l'APP, dont le problème est que le texte Android en haut d'uniapp n'est pas centré. Cet article explique les causes et les solutions à ce problème.

1. Description du problème

Lorsque vous utilisez uniapp pour développer une application Android, nous pouvons rencontrer un problème : l'alignement du texte supérieur est différent sur différents téléphones Android, ce qui entraîne un décentrage du texte. Comme le montre l'Que dois-je faire si le texte Android en haut d’uniapp n’est pas centré ? ci-dessous :

2. Cause du problème

La raison de ce problème est que la hauteur de la barre de navigation du système utilisée par différents téléphones Android est différente, tandis que la hauteur de la barre de navigation personnalisée utilisé par l'APP est corrigé. Par conséquent, la hauteur de la barre de navigation du système n'est pas cohérente avec la hauteur de la barre de navigation personnalisée, ce qui entraîne un décentrage du texte du titre.

3. Solution

Pour ce problème, nous pouvons utiliser la solution suivante :

1. Calculer manuellement le décalage

Ce problème peut être résolu en calculant manuellement le décalage. Obtenez la hauteur de la barre de navigation du système via JS (étant donné que la hauteur de la barre de navigation du système est différente selon les modèles, elle doit être obtenue dynamiquement), puis divisez la différence entre la hauteur de la barre de navigation personnalisée et la hauteur de la barre de navigation du système par 2 pour obtenir le décalage. Enfin, utilisez CSS pour décaler la position du texte du titre. Le code est le suivant :

// 获取系统导航栏的高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
// 获取自定义导航栏的高度
const customHeight = 64
// 计算偏移量
const offset = statusBarHeight + (customHeight - statusBarHeight) / 2
// 设置标题文字偏移
uni.setNavigationBarTitle({
  title: '标题文字',
  success() {
    uni.createSelectorQuery()
      .in(this)
      .select('.uni-title')
      .boundingClientRect(rect => {
        const left = uni.getSystemInfoSync().windowWidth / 2 - rect.width / 2
        uni.setNavigationBarTitle({
          title: ' ',
          success() {
            setTimeout(() => {
              uni.setNavigationBarTitle({
                title: '标题文字',
                complete() {
                  uni.createSelectorQuery()
                    .in(this)
                    .select('.uni-title')
                    .boundingClientRect(rect => {
                      uni.setNavigationBarTitle({
                        title: ' ',
                        success() {
                          uni.setNavigationBarTitle({
                            title: '标题文字',
                            complete() {
                              uni.createSelectorQuery()
                                .in(this)
                                .select('.uni-title')
                                .boundingClientRect(rect => {
                                  uni.setNavigationBarTitle({
                                    title: ' ',
                                    success() {
                                      uni.setNavigationBarTitle({
                                        title: '标题文字',
                                        success() {
                                          uni.setNavigationBarTitle({
                                            title: ' ',
                                            success() {
                                              const css = `
    .uni-title{
      transform: translateY(${offset}px);
      font-size: 18px;
    }
    `
                                              uni.setNavigationBarColor({
                                                frontColor: '#000000',
                                                backgroundColor: '#ffffff',
                                                success() {
                                                  if (uni.getSystemInfoSync().platform == 'android') {
                                                    uni.createSelectorQuery()
                                                      .select('#nav-bar')
                                                      .boundingClientRect(rect => {
                                                        const styleEl = document.createElement('style')
                                                        styleEl.type = 'text/css'
                                                        styleEl.appendChild(document.createTextNode(css))
                                                        document.head.appendChild(styleEl)
                                                        document.querySelector('.uni-title').style.height = rect.height + 'px'
                                                      })
                                                      .exec()
                                                  }
                                                }
                                              })
                                            }
                                          })
                                        }
                                      })
                                    }
                                  })
                                })
                            }
                          })
                        }
                      })
                    })
                }
              })
            }, 300)
          }
        })
      })
  }
})

2. Utiliser des plug-ins

Vous pouvez également utiliser la solution fournie par uni-app pour ce problème - le plug-in app-plus StatusBar. Ce plug-in peut afficher le titre au centre sur différents appareils Android. Pour une utilisation spécifique, veuillez vous référer à la documentation fournie par le site officiel d'uni-app : https://uniapp.dcloud.net.cn/api/plugins/. barre d'état.

4. Résumé

Le problème selon lequel le texte Android en haut d'uniapp n'est pas centré est en fait dû aux différentes hauteurs des barres de navigation du système sur différents appareils Android. Les développeurs peuvent résoudre ce problème en calculant manuellement le décalage ou en utilisant. la question du plug-in App-plus StatusBar. J'espère que l'introduction de cet article sera utile aux développeurs confrontés à ce problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!