Was tun, wenn der Android-Text oben in Uniapp nicht zentriert ist?

Mit der Entwicklung des mobilen Internets beginnen immer mehr Menschen, mobile Anwendungen (APP) zu nutzen, um ihre Lebens- und Arbeitsbedürfnisse zu erfüllen. Während der Entwicklung von APP wurde das plattformübergreifende Entwicklungsframework Uniapp nach und nach von immer mehr Entwicklern geliebt und verwendet. Bei der Entwicklung von APPs treten jedoch manchmal Probleme auf. Eines davon ist das Problem, dass der Android-Text oben in Uniapp nicht zentriert ist. In diesem Artikel werden die Ursachen und Lösungen für dieses Problem erläutert.

1. Problembeschreibung

Bei der Entwicklung einer Android-App kann es zu einem Problem kommen: Die Ausrichtung des oberen Textes ist auf verschiedenen Android-Telefonen unterschiedlich, was dazu führt, dass der Text nicht zentriert ist. Wie im Bild unten gezeigt:

2. Ursache des Problems

Der Grund für dieses Problem ist, dass die Höhe der Systemnavigationsleiste, die von verschiedenen Android-Telefonen verwendet wird, unterschiedlich ist, während die Höhe der benutzerdefinierten Navigationsleiste unterschiedlich ist Die von der APP verwendete Höhe ist behoben. Daher stimmt die Höhe der Systemnavigationsleiste nicht mit der Höhe der benutzerdefinierten Navigationsleiste überein, was dazu führt, dass der Titeltext nicht zentriert ist.

3. Lösung

Für dieses Problem können wir die folgende Lösung verwenden:

1. Manuelle Berechnung des Offsets

Dieses Problem kann durch manuelle Berechnung des Offsets gelöst werden. Ermitteln Sie die Höhe der Systemnavigationsleiste über JS (da die Höhe der Systemnavigationsleiste bei verschiedenen Modellen unterschiedlich ist, muss sie dynamisch ermittelt werden) und dividieren Sie dann die Differenz zwischen der Höhe der benutzerdefinierten Navigationsleiste und der Höhe von der Systemnavigationsleiste um 2, um den Offset zu erhalten. Verwenden Sie abschließend CSS, um die Position des Titeltexts zu versetzen. Der Code lautet wie folgt:

// 获取系统导航栏的高度
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. Verwenden Sie Plug-Ins

Sie können auch die von uni-app bereitgestellte Lösung für dieses Problem verwenden – das App-Plus-StatusBar-Plug-In. Dieses Plug-in kann den Titel auf verschiedenen Android-Geräten in der Mitte anzeigen. Informationen zur spezifischen Verwendung finden Sie in der Dokumentation auf der offiziellen Website von uni-app: https://uniapp.dcloud.net.cn/api/plugins/. Statusleiste.

4. Zusammenfassung

Das Problem, dass der Android-Text oben in uniapp nicht zentriert ist, wird tatsächlich durch die unterschiedlichen Höhen der Navigationsleisten auf verschiedenen Android-Geräten verursacht. Entwickler können dieses Problem lösen, indem sie den Versatz manuell berechnen oder verwenden Frage zum App-Plus-StatusBar-Plugin. Ich hoffe, dass die Einführung in diesem Artikel für Entwickler hilfreich ist, die auf dieses Problem stoßen.

Das obige ist der detaillierte Inhalt vonWas tun, wenn der Android-Text oben in Uniapp nicht zentriert ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!