quickapp_快应用_titleBar

titleBar

如上图所示红色区域就是titleBar,我们可以通过manifest.display设置titleBar的文本、文本颜色、背景色

javascript 复制代码
"display": {
  "titleBar": true, //是否显示titleBar
   "titleBarBackgroundColor": "#f00000", // 全局titleBar背景色
   "titleBarTextColor": "#ffffff", // 全局titleBar的title文本颜色
   "titleBarText": "快应用", // 全局titleBar的title文本内容
   "pages": { // 页面私有UI显示,不设置默认使用全局配置
     "pages/DemoDetail": {
       "titleBarText": "详情页" 
     }
   }
 }
问题1-titleBar背景设置不支持渐变色

如上图想在titleBar想做一个背景渐变色,于是进行如下设置

javascript 复制代码
 "display": {
   "titleBar": true, //是否显示titleBar
    "titleBarBackgroundColor": "linear-gradient(78deg, #FFEBF1 0%, #FEF2F4 48%, #E1EDFF 100%);", // 全局titleBar背景色
}

发现背景颜色显示的是黑色(默认值),说明titleBarBackgroundColor配置项不支持渐变色格式的颜色。

那如果想做渐变色应该如何设置呢?

可以通过titleBar: false关闭配置项的titleBar,在页面上添加一个titleBar的组件!

问题2- 状态栏背景颜色设置不支持渐变

如上图所示为状态栏

tips:状态栏背景色,默认值同标题栏背景色

由于之前在manifest中配置了titleBar设置了颜色,statusBar颜色默认与titleBar相同,所以看起来没有割裂的感觉。

现在使用自定义titleBar并且给titleBar背景设置了渐变色,此时这两部分就会有被割裂的感觉,如下

tips: 状态栏的背景不能设置渐变色 且 状态栏不可隐藏不可自定义!

因此状态栏不可以设置为渐变色,若是想看起来不那么割裂,可以设置状态栏背景色为与titleBar背景渐变色初识颜色相近的颜色。

javascript 复制代码
"display":{
  "pages":{
     "pages/main/library": {
        "statusBarBackgroundColor": "#ffe9f2", // 状态栏背景色,默认值同标题栏背景色
        "titleBar": false
      }
   }
}
问题3-titleBar的标题不支持居中

通过manifest配置项设置titleBar的标题默认居左且不支持修改,若是想要标题居中需要使用自定义tabBar;

相关推荐
正在走向自律9 分钟前
Ubuntu系统下Python连接国产KingbaseES数据库实现增删改查
开发语言·数据库·python·ubuntu·kingbasees·ksycopg2
草莓熊Lotso9 分钟前
PyCharm 从入门到高效:安装教程 + 快捷键速查表
开发语言·ide·经验分享·笔记·其他
序属秋秋秋33 分钟前
《C++进阶之STL》【set/map 使用介绍】
开发语言·c++·笔记·leetcode·stl·set·map
澡点睡觉1 小时前
【golang长途旅行第38站】工厂模式
开发语言·后端·golang
Dxy12393102161 小时前
Dockerfile文件常用配置详解
开发语言·docker
MATLAB代码顾问1 小时前
MATLAB可以实现的各种智能算法
开发语言·matlab
王伯安呢1 小时前
Java开发环境配置入门指南
java·开发语言·jvm·eclipse·环境搭建·新手
·前路漫漫亦灿灿1 小时前
C++-类型转换
开发语言·c++
Kyln.Wu2 小时前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
计算机毕业设计木哥2 小时前
Python毕业设计推荐:基于Django的饮食计划推荐与交流分享平台 饮食健康系统 健康食谱计划系统
开发语言·hadoop·spring boot·后端·python·django·课程设计