What should I do if the Android text at the top of uniapp is not centered?-uni-app-php.cn

What should I do if the Android text at the top of uniapp is not centered?

PHPz

Release： 2023-04-27 14:39:27

Original

2647 people have browsed it

With the development of mobile Internet, more and more people are beginning to use mobile applications (APP) to meet their life and work needs. In the process of developing APP, a cross-platform development framework-uniapp has gradually been loved and used by more developers. However, sometimes you will encounter some problems during the development of APP, one of which is the problem that the Android text at the top of uniapp is not centered. This article explains the causes and solutions to this problem.

1. Problem description

When using uniapp to develop an Android APP, we may encounter a problem: the alignment of the top text is different on different Android phones, causing the text to not be centered. . As shown in the figure below:

What should I do if the Android text at the top of uniapp is not centered?

2. Cause of the problem

The reason for this problem is that the height of the system navigation bar used by different Android phones is different. , and the height of the custom navigation bar used by the APP is fixed, causing the height of the system navigation bar to be inconsistent with the height of the custom navigation bar, resulting in the title text not being centered.

3. Solution

To address this problem, we can use the following solution:

1. Manually calculate the offset

Can be calculated manually offset to solve this problem. Get the height of the system navigation bar through JS (since the height of the system navigation bar is different on different models, it needs to be obtained dynamically), and then divide the difference between the height of the custom navigation bar and the height of the system navigation bar by 2 to get the offset. Finally, use CSS to offset the position of the title text. The code is as follows:

// 获取系统导航栏的高度
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)
          }
        })
      })
  }
})

Copy after login

2. Use the plug-in

You can also use the solution provided by uni-app for this problem - the app-plus StatusBar plug-in. This plug-in can display the title in the center on different Android devices. For specific usage, please refer to the documentation provided by the uni-app official website: https://uniapp.dcloud.net.cn/api/plugins/statusbar.

4. Summary

The problem that the Android text at the top of uniapp is not centered is actually caused by the different heights of the system navigation bars on different Android devices. Developers can manually calculate the offset or use App-plus StatusBar plugin to solve this problem. I hope the introduction in this article will be helpful to developers who encounter this problem.

The above is the detailed content of What should I do if the Android text at the top of uniapp is not centered?. For more information, please follow other related articles on the PHP Chinese website!