Perkara yang perlu dilakukan jika teks Android di bahagian atas uniapp tidak dipusatkan

Dengan perkembangan Internet mudah alih, semakin ramai orang mula menggunakan aplikasi mudah alih (APP) untuk memenuhi keperluan hidup dan kerja mereka. Dalam proses membangunkan APP, rangka kerja pembangunan-uniapp merentas platform telah digemari dan digunakan oleh lebih ramai pembangun. Walau bagaimanapun, kadangkala anda akan menghadapi beberapa masalah semasa pembangunan APP, salah satunya ialah masalah teks Android di bahagian atas uniapp tidak dipusatkan. Artikel ini menerangkan punca dan penyelesaian kepada masalah ini.

1. Penerangan masalah

Apabila menggunakan uniapp untuk membangunkan APL Android, kita mungkin menghadapi masalah: penjajaran teks teratas adalah berbeza pada telefon Android yang berbeza, menyebabkan teks tidak menjadi berpusat. Seperti yang ditunjukkan dalam gambar di bawah:

2. Punca masalah

Punca masalah ini ialah telefon Android yang berbeza menggunakan ketinggian sistem yang berbeza bar navigasi. , dan ketinggian bar navigasi tersuai yang digunakan oleh APP ditetapkan, menyebabkan ketinggian bar navigasi sistem tidak konsisten dengan ketinggian bar navigasi tersuai, menyebabkan teks tajuk tidak dipusatkan.

3. Penyelesaian

Untuk menangani masalah ini, kita boleh menggunakan penyelesaian berikut:

1 secara manual mengira offset

Boleh dikira secara manual untuk menyelesaikan masalah ini. Dapatkan ketinggian bar navigasi sistem melalui JS (memandangkan ketinggian bar navigasi sistem berbeza pada model yang berbeza, ia perlu diperoleh secara dinamik), dan kemudian bahagikan perbezaan antara ketinggian bar navigasi tersuai dan ketinggian bar navigasi sistem sebanyak 2 untuk mendapatkan offset. Akhir sekali, gunakan CSS untuk mengimbangi kedudukan teks tajuk. Kodnya adalah seperti berikut:

// 获取系统导航栏的高度
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. Gunakan pemalam

Anda juga boleh menggunakan penyelesaian yang disediakan oleh uni-app untuk masalah ini - pemalam App-plus StatusBar. Pemalam ini boleh memaparkan tajuk di tengah pada peranti Android yang berbeza Untuk penggunaan khusus, sila rujuk dokumentasi yang disediakan oleh tapak web rasmi uni-app: https://uniapp.dcloud.net.cn/api/plugins/. bar status.

4. Ringkasan

Masalah bahawa teks Android di bahagian atas uniapp tidak berpusat sebenarnya disebabkan oleh ketinggian bar navigasi yang berbeza pada peranti Android yang berbeza secara manual mengimbangi atau gunakan pemalam App-plus StatusBar untuk menyelesaikan masalah ini. Saya harap pengenalan dalam artikel ini akan membantu pembangun yang menghadapi masalah ini.

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika teks Android di bahagian atas uniapp tidak dipusatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!