uniapp の上部にある Android テキストが中央に配置されていない場合はどうすればよいですか?

モバイル インターネットの発展に伴い、生活や仕事のニーズを満たすためにモバイル アプリケーション (APP) を使用する人が増えています。 APP の開発過程で、クロスプラットフォーム開発フレームワークである uniapp が徐々に多くの開発者に愛され、使用されるようになりました。しかし、APP の開発中に時々問題が発生することがあります。その 1 つは、uniapp の上部にある Android テキストが中央に配置されていないという問題です。この記事では、この問題の原因と解決策について説明します。

1. 問題の説明

uniapp を使用して Android APP を開発する場合、Android スマートフォンごとに上部のテキストの配置が異なるため、テキストが正しく表示されないという問題が発生する可能性があります。中央にあります。次の図に示すように:

2. 問題の原因

この問題の理由は、システム ナビゲーション バーの高さが、 Android スマートフォンが異なると、アプリによって使用されるカスタム ナビゲーション バーの高さが固定されているため、システム ナビゲーション バーの高さがカスタム ナビゲーション バーの高さと一致せず、タイトル テキストが中央に配置されなくなります。 。

3. 解決策

この問題に対処するには、次の解決策を使用できます:

1. オフセットを手動で計算します

オフセットは手動で計算できます。この問題を解決するために。 JS を介してシステム ナビゲーション バーの高さを取得し (システム ナビゲーション バーの高さはモデルによって異なるため、動的に取得する必要があります)、カスタム ナビゲーション バーの高さとカスタム ナビゲーション バーの高さの差を除算します。システム ナビゲーション バーを 2 倍にしてオフセットを取得します。最後に、CSS を使用してタイトル テキストの位置をオフセットします。コードは次のとおりです:

// 获取系统导航栏的高度
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. プラグインの使用

この問題に対して uni-app が提供するソリューションである app-plus StatusBar プラグインを使用することもできます。このプラグインは、さまざまな Android デバイスでタイトルを中央に表示することができます。具体的な使用方法については、uni-app 公式 Web サイトのドキュメントを参照してください: https://uniapp.dcloud.net.cn/api/plugins/ステータスバー。

4. 概要

uniapp の上部にある Android テキストが中央に配置されない問題は、実際には、Android デバイスごとにシステム ナビゲーション バーの高さが異なることが原因で発生します。開発者は手動で計算できます。オフセットを変更するか、App-plus StatusBar プラグインを使用してこの問題を解決してください。この記事の概要が、この問題に遭遇した開発者にとって役立つことを願っています。

以上がuniapp の上部にある Android テキストが中央に配置されていない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。