StatusBarStyle的设置

最新推荐文章于 2022-12-28 09:55:15 发布
原创 最新推荐文章于 2022-12-28 09:55:15 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#status-bar

本文介绍了如何在iOS应用中设置状态栏的样式。通过在info.plist文件中配置Viewcontroller-basedstatusbarappearance属性，并结合AppDelegate中的代码实现全局或单个控制器级别的状态栏样式调整。

1、在info.plist文件中设置
View controller-based status bar appearance 为NO,在单个控制器中不可修改。然后在AppDelegate中写上 [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent，这样的话，全局的状态栏样式就OK了。其他的界面如果想要改变样式的话，直接用
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;修改就可以了

2、为YES,在单个控制器中修改

- (UIStatusBarStyle)preferredStatusBarStyle {  
    return UIStatusBarStyleDefault;
}

需要搭配着以下代码使用，在导航控制器中添加以下代码

- (UIViewController*)childViewControllerForStatusBarStyle{

    return self.topViewController;
}
关于iOS中的各种颜色设置总结大全（推荐）
08-29
UIApplication.shared.statusBarStyle = .lightContent // 单独设置 override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent } ``` TabBar的颜色设置相对简单，全局设置TabBar背景颜色...
iOS开发技巧之状态栏字体颜色的设置方法
08-27
在info.plist文件中，我们可以将View controller-based status bar appearance设为NO，然后使用[UIApplication sharedApplication].statusBarStyle来设置状态栏字体颜色。 三、在个别VC中设置状态栏字体颜色 在...
90、setStatusBarStyle无效问题 修改状态栏颜色 只有白色黑色可选UIStatusBarStyleLightContent
热门推荐
蝶飞花已醉的博客
03-04 1万+
info.plist文件中， View controller-based status bar appearance项设为YES，则View controller对status bar的设置优先级高于application的设置。 为NO则以application的设置为准，view controller的prefersStatusBarHidden方法无效，是根本不会被调用的。 调
在iOS7中修改状态栏字体的颜色
changcunyuan的专栏
10-10 572
状态栏的字体为黑色：UIStatusBarStyleDefault  状态栏的字体为白色：UIStatusBarStyleLightContent 一、在info.plist中，将View controller-based status bar appearance设为NO 状态栏字体的颜色只由下面的属性设定，默认为白色： // default is
StatusBar style的那点事
bailinshu8989的博客
06-30 298
　每次调整status的时候总是很是无语，各种调试各种尝试已经各种搜索，但是最后还是不是很清楚。so，以此记录下调整status经验，以供后期使用。 调整status的四种需求 一. 一次设计，全局适用 设置全局的status值得就是改变整个application的status的风格，方法如下： 　1. 取消系统默认的状态风格：plist ——》 添加View contro...
iOS状态栏的设置statusBarStyle
lyj861144636的专栏
01-05 5457
关于状态栏statusBar颜色以及隐藏的设置，网上已经有很多答案了。由于本项目中对状态栏的修改是基于iOS9.0以上的设置，故整理一篇博客，希望能帮助有需要的同学。 UIStatusBarStyle
Status Bar Style是干什么的？
06-30 1338
在ios工程设置界面有个Status Bar Style设置选项，这东西其实是设置app启动界面中状态栏的状态的。如下图 选项中有黑白两种选择。问我什么是状态栏？ok ，就是手机最上方一排，显示时间，电量，网络状态的那个。 一般的App启动界面都一闪而过，很难看到状态栏，其实这里有个小知识点，可以使用模拟器的Debug调试功能将启动界面动画放慢来观看效果，如图： ...
iOS -- 设置状态栏为单独的浅色模式
～玉麒麟～
12-28 541
今天设置状态栏，发现之前使用的方法无效了，就查了不少资料才解决问题，发现在iOS9 之后。如果你的页面有导航栏的话，需要下面的几个方法配合使用，才会生效。这样三步设置下来，你会发现状态栏设置已生效。单独的设置下面的方法也无效。
在iOS 14中有没有新的API可以完全代替`statusBarStyle`?
11-01
在iOS 14及后续版本中，虽然没有直接提供一个全新的API来完全替换`...尽管如此，如果你想要保持对状态栏样式的简单设置，还是可以继续使用`Environment(\.statusBarStyle, ...)`，因为这是跨场景通用的方式。
ios 系统状态栏样式修改_iOS设置状态栏样式，statusBarStyle
weixin_39928736的博客
01-14 557
1、在不同的应用中，有关状态栏的样式是不定的，系统的默认样式是黑色的，然而有一些应用是需要白色的，所以就需要进行相关的设置，设置状态栏的样式有2种方式，下面分别讲述一下。2、方法一：直接在需要改变默认状态栏样式的控制器中实现一个方法(其他任何事情都不用做)：// 返回状态栏的样式- (UIStatusBarStyle)preferredStatusBarStyle{return UIStatusB...
iOS How to set status bar style
wm9028的专栏
06-03 399
How to set status bar style Globally If you want to change the status bar style to all of your view controllers, you can do it globally with the help of Info.plist. The default color of the status bar is black text. Default status bar To change the status
设置状态栏(statusbar)的样式
weixin_33982670的博客
04-27 943
一、全局默认更改statusbar的前景色 在info-plist文件中，增加如下两个键值对： View controller-based status bar appearance　　　　　 NO Status bar style　　　　　　　　　　　　　　　　 UIStatusBarStyleLightContent 二、在指定地方改变statusbar的...
Cordova生成android apk，运行存在遮挡状态栏问题。（setStatusBarStyle注释即可）
qq_35874340的博客
06-15 546
/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to y.
iOS setStatusBarStyle没有效果
superior_yong的专栏
04-26 2820
在Info.plist文件中 如果代码设置了[[UIApplicationsharedApplication]setStatusBarStyle:UIStatusBarStyleLightContent];没有效果的话，需要先将Info.plist中的UIViewControllerBasedStatusBarAppearance设为NO。 当UIViewControllerBased
ios 更改statusBarStyle
海M滨
01-22 1030
IOS上 关于状态栏的相关设置(UIStatusBar) image.png 设置statusBar的【前景部分】 简单来说，就是设置显示电池电量、时间、网络部分标示的颜色， 这里只能设置两种颜色： 默认的黑色（UIStatusBarStyleDefault） 白色（UIStatusBarStyleLightContent） 可以设置的地...
Swift 项目 设置 statusBar 的颜色
weixin_34245749的博客
01-03 467
2019独角兽企业重金招聘Python工程师标准>>> ...
IOS status bar 配置方法
一枚道人的IOS专栏
01-04 3855
ios上状态栏 就是指的最上面的20像素高的部分，显示了电池、时间、运营商等信息。 可以选择status bar 之上元素的颜色（黑、白） ， 默认的黑色（UIStatusBarStyleDefault）白色（UIStatusBarStyleLightContent） 在实际使用时有下面设置方式： 可以通过plist 文件进行配置，在plist里
apiCloud 状态栏的设置
HYQ_java的博客
12-24 8398
手机状态栏展示方式有两种，今天就记录下两种状态栏设置方式 1沉浸式 在config.xml中写入下面代码，安卓和ios就可以实现沉浸式了。 <preference name="statusBarAppearance" value="true" /> 注意：需要编译成自定义loader或者编译成测试版才有效果。有时候代码没有问题，编译成功了却没有效果，你可以随意添加一个模块后...
iOS中修改状态栏StatusBar状态和样式的几种方法
ChyoGenntoo的博客
08-24 3632
有时候我们需要把界面中的状态栏隐藏掉，或者在深背景色的时候需要把状态栏的颜色改为白色。 在iOS7之前通常使用如下方式： UIApplication * app = [UIApplication sharedApplication]; app.statusBarHidden = YES; app.statusBarStyle = UIStatusBarStyleLigh
怎么自定义设置高度
最新发布
09-10
<think> 我们已经在之前的回答中介绍了如何获取状态栏高度并设置占位区域。现在，用户的需求是自定义设置页面顶部状态栏的高度。注意，状态栏高度是系统决定的，我们不能直接修改系统状态栏的高度，但可以通过设置占位区域的高度来模拟自定义高度的效果。 根据引用内容，我们可以获取系统状态栏高度（statusBarHeight）以及胶囊按钮的高度（用于自定义导航栏）。而用户可能想要自定义的是整个导航栏（包括状态栏区域）的高度，或者只是状态栏下方的导航栏高度。 在uni-app中，我们通常通过以下步骤实现： 1. 隐藏原生导航栏（navigationStyle: "custom"）。 2. 获取状态栏高度（statusBarHeight）。 3. 获取胶囊按钮信息（通过uni.getMenuButtonBoundingClientRect()，仅微信小程序等支持）。 4. 计算导航栏总高度（状态栏高度 + 导航栏内容高度，其中导航栏内容高度可以根据胶囊按钮位置计算）。 但是，如果用户仅仅想要自定义状态栏区域的高度（即状态栏占位区域的高度），我们可以通过设置一个固定高度或者根据需求调整高度的视图来实现。 由于状态栏高度是系统固定的，我们不能改变系统状态栏的高度，但我们可以改变我们占位区域的高度。比如，我们可以在状态栏区域下方再添加一个自定义高度的区域，从而让整个顶部栏的高度等于状态栏高度+自定义高度。 具体步骤： 1. 隐藏原生导航栏（在pages.json中设置"navigationStyle": "custom"）。 2. 在页面顶部添加两个占位视图： - 第一个视图：高度为状态栏高度（从系统信息获取）。 - 第二个视图：高度为用户自定义的高度（比如50px，或者通过变量控制）。 这样，整个顶部栏的高度 = 状态栏高度 + 自定义高度。 代码示例（Vue3组合式API）： 步骤1：在pages.json中配置页面使用自定义导航栏 ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationStyle": "custom", "app-plus": { "titleView": false } } } ] } ``` 步骤2：在页面组件中 ```vue <template> <view class="page-container"> <!-- 状态栏占位 --> <view :style="{ height: statusBarHeight + 'px' }"></view> <!-- 自定义高度的导航栏（用户可自定义这个区域的高度） --> <view class="custom-nav-bar" :style="{ height: customNavHeight + 'px' }"> <!-- 这里可以放导航栏内容，比如返回按钮、标题等 --> <text>自定义导航栏</text> </view> <view class="content"> 页面内容 </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; const statusBarHeight = ref(0); // 自定义导航栏内容区域高度，单位px，可根据需要调整 const customNavHeight = ref(50); onMounted(() => { // 获取系统信息 const systemInfo = uni.getSystemInfoSync(); statusBarHeight.value = systemInfo.statusBarHeight; }); </script> <style scoped> .page-container { display: flex; flex-direction: column; } .custom-nav-bar { background-color: #f8f8f8; display: flex; align-items: center; padding-left: 20rpx; } .content { flex: 1; padding: 20rpx; } </style> ``` 这样，我们就实现了自定义的顶部栏，其中状态栏占位高度由系统决定，其下的导航栏内容区域高度由用户自定义（通过customNavHeight变量控制）。 注意：如果是在微信小程序中，我们可能需要考虑胶囊按钮的位置，确保自定义导航栏的内容不会被胶囊按钮遮挡。此时，我们可以通过获取胶囊按钮的信息（uni.getMenuButtonBoundingClientRect()）来调整自定义导航栏内容的布局。 例如，在微信小程序中，我们可以这样计算导航栏内容区域的高度（引用[4]的方法）： ```javascript let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 导航栏内容区域高度 = (胶囊按钮上边距离状态栏底部的距离) * 2 + 胶囊按钮高度 // 注意：状态栏占位区域高度已经是statusBarHeight，所以导航栏内容区域高度这样计算： // 胶囊按钮上边距离屏幕顶部的距离 = 胶囊按钮的top值 // 那么，胶囊按钮上边距离状态栏底部（即导航栏内容区域顶部）的距离 = 胶囊按钮top - statusBarHeight // 因此，为了对称，通常上下各留这个距离，所以导航栏内容区域高度 = (胶囊按钮top - statusBarHeight) * 2 + 胶囊按钮.height // 然后整个顶部栏总高度 = statusBarHeight + 导航栏内容区域高度 ``` 但是，如果用户只是单纯地想设置一个自定义的高度，而不考虑胶囊按钮，那么直接设置customNavHeight即可。 总结：我们无法改变系统状态栏的高度，但可以通过设置占位区域和自定义导航栏区域来达到自定义整个顶部栏高度的目的。 --- ### 相关问题 1. 在uni-app中如何获取微信小程序的胶囊按钮信息？ 2. 如何在uni-app中实现适配不同机型的自定义导航栏？ 3. uni-app中隐藏原生导航栏后如何避免页面内容上移？ </think> ### uni-app + Vue3 自定义页面顶部状态栏高度方案 在 uni-app 中，状态栏高度是系统定义的固定值，无法直接修改系统状态栏高度。但您可以通过以下方法实现**自定义布局高度**，达到类似"自定义状态栏高度"的视觉效果： #### 核心实现方案（Vue3 组合式 API） ```vue <template> <!-- 自定义状态栏区域 --> <view class="custom-status-bar" :style="statusBarStyle"> <!-- 自定义内容（可放置图标、文字等） --> </view> <!-- 页面内容区域 --> <view class="content"> <!-- 页面主体内容 --> </view> </template> <script setup> import { ref, onMounted } from 'vue'; // 自定义高度（单位：px） const customHeight = ref(60); // 默认60px，可按需调整 // 状态栏样式计算 const statusBarStyle = ref({ height: `${customHeight.value}px`, paddingTop: '0px' }); onMounted(() => { // 获取系统状态栏高度 const systemInfo = uni.getSystemInfoSync(); const systemStatusHeight = systemInfo.statusBarHeight; // 计算顶部内边距（确保内容不被系统状态栏遮挡） statusBarStyle.value.paddingTop = `${systemStatusHeight}px`; }); </script> <style scoped> .custom-status-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background-color: #ffffff; /* 自定义背景色 */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 自定义阴影效果 */ } .content { margin-top: 60px; /* 与customHeight保持一致 */ } </style> ``` #### 关键配置说明 1. **禁用原生导航栏** (`pages.json` 配置) ```json { "pages": [{ "path": "pages/index/index", "style": { "navigationStyle": "custom", // 关键配置 "app-plus": { "titleView": false } // 5+App配置 } }] } ``` 2. **自定义高度逻辑分解** - `customHeight`: 自定义的视觉高度（可绑定到输入控件动态调整） - `systemStatusHeight`: 获取系统真实状态栏高度[^1][^3] - `paddingTop`: 确保自定义栏不被系统状态栏遮挡 3. **胶囊按钮处理（小程序专用）** ```javascript // 获取胶囊按钮位置信息 const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); const capsuleHeight = menuButtonInfo.height; const capsulePadding = (menuButtonInfo.top - systemStatusHeight) * 2; // 最终高度计算 const totalHeight = systemStatusHeight + capsuleHeight + capsulePadding; ``` #### 高级适配方案 1. **全局状态管理** ```javascript // utils/system.js export const getStatusBarHeight = () => { return uni.getSystemInfoSync().statusBarHeight || 15; } // 页面中使用 import { getStatusBarHeight } from '@/utils/system'; const systemHeight = getStatusBarHeight(); ``` 2. **CSS 变量全局方案** (`App.vue`) ```vue <script setup> onMounted(() => { const systemInfo = uni.getSystemInfoSync(); const style = document.documentElement.style; style.setProperty('--system-status-height', `${systemInfo.statusBarHeight}px`); style.setProperty('--custom-status-height', '60px'); // 自定义高度 }); </script> <style> page { padding-top: calc(var(--system-status-height) + var(--custom-status-height)); } </style> ``` #### 注意事项 1. **平台差异**：iOS 和 Android 状态栏高度不同，需动态获取[^1] 2. **胶囊按钮**：小程序需额外考虑胶囊按钮位置[^4] 3. **滚动同步**：自定义状态栏固定定位时，需同步处理页面滚动区域 4. **安全区域**：全面屏设备需考虑底部安全区域 `safe-area-inset-bottom` > **重要提示**：系统状态栏高度由操作系统决定，此方案实际是在系统状态栏下方创建自定义视觉区域，通过占位方式实现"自定义高度"效果。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值