Commit 42e25b38 by 毛勇泽

状态栏

parent b5cfd81b
......@@ -4,3 +4,4 @@ export { GridConstants } from './src/main/ets/constants/GridConstants';
export { StyleConstants } from './src/main/ets/constants/StyleConstants';
export { CommonDataSource } from './src/main/ets/utils/CommonDataSource';
export { Logger } from './src/main/ets/utils/Logger';
export { StatusBarManager } from './src/main/ets/components/StatusBarManager';
import window from '@ohos.window';
import HashMap from '@ohos.util.HashMap';
/**
* 状态栏管理器
*/
export class StatusBarManager {
private readonly TAG = 'StatusBarManager';
private readonly CONFIG_SYSTEM_BAR_HEIGHT = 'systemBarHeight';
private static mInstance: StatusBarManager;
private mWindowStage: window.WindowStage;
private mConfig = new HashMap<string, any>();
private constructor() {
}
public static get(): StatusBarManager {
if (!this.mInstance) {
this.mInstance = new StatusBarManager();
}
return this.mInstance;
}
/**
* 存储windowStage实例
* @param windowStage
*/
public storeWindowStage(windowStage: window.WindowStage) {
this.mWindowStage = windowStage;
}
/**
* 获取windowStage实例
* @returns
*/
public getWindowStage(): window.WindowStage {
return this.mWindowStage;
}
/**
* 设置沉浸式状态栏
* @param windowStage
* @returns
*/
public setImmersiveStatusBar(windowStage: window.WindowStage): Promise<void> {
let resolveFn, rejectFn;
let promise = new Promise<void>((resolve, reject) => {
resolveFn = resolve;
rejectFn = reject;
});
// 1.获取应用主窗口。
try {
let windowClass = windowStage.getMainWindowSync();
console.info(this.TAG, 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(windowClass));
// 2.实现沉浸式效果:设置窗口可以全屏绘制。
// 将UI内容顶入状态栏下方
windowClass.setWindowLayoutFullScreen(true)
.then(() => {
//3、设置状态栏 可见
windowClass.setWindowSystemBarEnable(['status']).then(() => {
//4、设置状态栏透明背景
const systemBarProperties: window.SystemBarProperties = {
statusBarColor: '#0FA983'
};
//设置窗口内导航栏、状态栏的属性
windowClass.setWindowSystemBarProperties(systemBarProperties)
.then(() => {
console.info(this.TAG, 'Succeeded in setting the system bar properties.');
}).catch((err) => {
console.error(this.TAG, 'Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
});
})
//5、存储状态栏高度
this.storeStatusBarHeight(windowClass);
resolveFn();
});
} catch (err) {
console.error(this.TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
rejectFn();
}
return promise;
}
/**
* 关闭沉浸式状态栏
* @param windowStage
* @returns
*/
public hideImmersiveStatusBar(windowStage: window.WindowStage): Promise<void> {
let resolveFn, rejectFn;
let promise = new Promise<void>((resolve, reject) => {
resolveFn = resolve;
rejectFn = reject;
});
// 1.获取应用主窗口。
try {
let windowClass = windowStage.getMainWindowSync();
console.info(this.TAG, 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(windowClass));
windowClass.setWindowLayoutFullScreen(false)
.then(() => {
//存储状态栏高度
this.mConfig.set(this.CONFIG_SYSTEM_BAR_HEIGHT, 0);
resolveFn();
});
} catch (err) {
console.error(this.TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
rejectFn(err);
}
return promise;
}
/**
* 获取状态栏高度进行保存
* @param windowClass
* @returns
*/
private storeStatusBarHeight(windowClass: window.Window) {
try {
const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
// 保存高度信息
this.mConfig.set(this.CONFIG_SYSTEM_BAR_HEIGHT, avoidArea.topRect.height);
console.info(this.TAG, 'Succeeded in obtaining the area. Data:' + JSON.stringify(avoidArea));
} catch (err) {
console.error(this.TAG, 'Failed to obtain the area. Cause:' + JSON.stringify(err));
}
}
/**
* 未开启沉浸式状态栏,偏移量为0,开启, 偏移量为状态栏高度
* @returns
*/
public getSystemBarOffset(): number {
let height = 0;
if (this.mConfig.hasKey(this.CONFIG_SYSTEM_BAR_HEIGHT)) {
height = this.mConfig.get(this.CONFIG_SYSTEM_BAR_HEIGHT) as number;
}
return height;
}
/**
* 是否开启沉浸式状态栏
* @returns
*/
public isOpenImmersiveStatusBar(): boolean {
return this.getSystemBarOffset() > 0;
}
}
\ No newline at end of file
......@@ -91,7 +91,7 @@
,
{
"name": "title_background",
"value": "#4c9a6b"
"value": "#0FA983"
}
,
{
......
import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';
import {
StatusBarManager
} from '@ohos/common';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
......@@ -14,7 +17,7 @@ export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
StatusBarManager.get().setImmersiveStatusBar(windowStage);
windowStage.loadContent('pages/SplashPage', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
......
......@@ -50,10 +50,10 @@ struct AddConversionPage {
TextInput({ placeholder: "物资换位" })
.enterKeyType(EnterKeyType.Search)
.borderColor("#454545")
.borderRadius(10)
.width(230)
.borderRadius(5)
.width("70%")
.height(40)
.padding({ top: 10, bottom: 10 })
.padding(10)
.backgroundColor($r("app.color.disabledColor"))
.enabled(false)
}.padding("10vp")
......@@ -66,10 +66,10 @@ struct AddConversionPage {
.fontColor($r("app.color.item_color_black"))
TextInput({ placeholder: "请输入凭证号" })
.enterKeyType(EnterKeyType.Search)
.borderRadius(10)
.width(230)
.borderRadius(5)
.width("70%")
.height(40)
.padding({ top: 10, bottom: 10 })
.padding(10)
.backgroundColor($r("app.color.disabledColor"))
}.padding("10vp")
......@@ -83,7 +83,7 @@ struct AddConversionPage {
.value('请选择库房')
.width(230)
.borderWidth(2)
.borderRadius(10)
.borderRadius(5)
.height(40)
.borderColor($r("app.color.rank_secondary_border"))
.onSelect((index: number, value?: string) => {
......@@ -102,7 +102,7 @@ struct AddConversionPage {
.value('请选择发物管理单位')
.width(230)
.borderWidth(2)
.borderRadius(10)
.borderRadius(5)
.height(40)
.borderColor("#7E7E7E")
.onSelect((index: number, value?: string) => {
......@@ -120,7 +120,7 @@ struct AddConversionPage {
.value('请选择收物管理单位')
.width(230)
.borderWidth(2)
.borderRadius(10)
.borderRadius(5)
.height(40)
.borderColor("#7E7E7E")
.onSelect((index: number, value?: string) => {
......@@ -140,7 +140,7 @@ struct AddConversionPage {
.value('请选择账目类型')
.width(230)
.borderWidth(2)
.borderRadius(10)
.borderRadius(5)
.height(40)
.borderColor("#7E7E7E")
.onSelect((index: number, value?: string) => {
......@@ -148,20 +148,19 @@ struct AddConversionPage {
.padding(5)
.flexGrow(1)
}.padding("10vp").width("100%")
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Text("备注:")
.fontSize(14)
.width("30%")
.height(40)
.fontColor($r("app.color.item_color_black"))
TextInput({ placeholder: "请输入备注" })
.enterKeyType(EnterKeyType.Search)
.borderRadius(10)
.borderColor($r("app.color.disabledColor"))
.width(230)
.borderRadius(5)
.backgroundColor($r("app.color.disabledColor"))
.width("70%")
.height(40)
.padding({ top: 10, bottom: 10 })
}.padding("10vp").width("100%")
.padding(10)
}.margin("10vp")
}
.padding(20)
.width("100%")
......
......@@ -3,10 +3,11 @@ import { BasicTable } from '../../view/BasicTable/BasicTable'
import router from '@ohos.router';
@Extend(Button) function bottomBtnSty() {
.borderWidth(1)
.padding({top:1,bottom:1,right:7,left:7})
.borderColor('#0fa983')
.backgroundColor('#fff')
.fontColor('#0fa983')
.borderRadius(10)
.borderRadius(7)
.type(ButtonType.Normal)
.stateEffect(true)
}
......@@ -28,7 +29,7 @@ struct WzConversionPage{
.fontSize("14vp")
Button("设置状态")
.bottomBtnSty()
.onClick(async () => {
.onClick(() => {
})
.fontColor("#0fa983")
.fontSize("14vp")
......@@ -40,7 +41,7 @@ struct WzConversionPage{
.bottomBtnSty().fontColor("#0fa983") .fontSize("14vp")
Button("清空选择")
.bottomBtnSty()
.onClick(async () =>{
.onClick(() =>{
}).fontColor("#0fa983") .fontSize("14vp")
}
......@@ -56,20 +57,21 @@ struct WzConversionPage{
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('100%')
.onSubmit((value: string) => {
})
.onChange((value: string) => {
})
}).borderRadius(5)
}.height(60)
}.width("100%")
.padding('15vp')
Row(){
// 底部按钮
this.bottomButtons();
}.width("100%").height(40)
}.width("100%").padding("2vp").height(40)
Column(){
BasicTable({dataSource:[]})
}.flexGrow(1)
......
......@@ -65,6 +65,7 @@ struct WzExchangePage{
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('100%')
......@@ -72,6 +73,7 @@ struct WzExchangePage{
})
.onChange((value: string) => {
})
.borderRadius(5)
}.height(60)
}.width("100%")
.padding({left:15,right:15,top:15})
......
......@@ -46,6 +46,7 @@ export struct WzInPage {
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('70%')
......@@ -53,6 +54,7 @@ export struct WzInPage {
})
.onChange((value: string) => {
})
.borderRadius(5)
Select([{ value: "未完成" }, { value: "已完成" }])
.value('请选择状态')
.borderWidth(1)
......
......@@ -60,6 +60,7 @@ struct WzInvPage{
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('100%')
......@@ -67,6 +68,7 @@ struct WzInvPage{
})
.onChange((value: string) => {
})
.borderRadius(5)
}.height(60)
}.width("100%")
.padding('15vp')
......
......@@ -66,6 +66,8 @@ export struct WzOutPage {
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.borderRadius(5)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('100%')
......
import { TitleBar } from '../../view/title/TitleBar'
import { BasicTable } from '../../view/BasicTable/BasicTable'
@Extend(Button) function bottomBtnSty() {
.borderWidth(1)
.borderColor('#0fa983')
......@@ -16,6 +17,7 @@ struct WzPositionPage{
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#fff'
@State currentIndex: number = 0
@State titleBarPadding:number=0
@Builder bottomButtons() {
Row() {
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
......@@ -38,11 +40,12 @@ struct WzPositionPage{
build(){
Column() {
Flex({direction:FlexDirection.Column}){
TitleBar({ title:"物资落位" })
TitleBar({ title:"物资落位"})
Row(){
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }){
Search({ placeholder: '请输入凭证号',controller: this.searchcontroller })
.height(40)
.textAlign(TextAlign.Center)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
......@@ -51,7 +54,7 @@ struct WzPositionPage{
.onSubmit((value: string) => {
})
.onChange((value: string) => {
})
}).borderRadius(5)
}.height(40)
}.width("100%")
.padding('15vp')
......@@ -67,7 +70,9 @@ struct WzPositionPage{
}.linearGradient({
direction: GradientDirection.Right, // 渐变方向
repeating: true, // 渐变颜色是否重复
colors: [[0x36a3c0, 0.0], [0x97c6a6, 0.5], [0xc7d799, 1]] // 数组末尾元素占比小于1时满足重复着色效果
colors: [[0x36a3c0, 0.0], [0x97c6a6, 0.6], [0xc7d799, 1]] // 数组末尾元素占比小于1时满足重复着色效果
})
}
onPageShow(){
}
}
\ No newline at end of file
......@@ -62,13 +62,14 @@ struct WzReversePage{
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.textAlign(TextAlign.Center)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.width('100%')
.onSubmit((value: string) => {
})
.onChange((value: string) => {
})
}).borderRadius(5)
}.height(40)
}.width("100%")
.padding('15vp')
......
import router from '@ohos.router';
@Entry
import {
StatusBarManager
} from '@ohos/common';
@Component
export struct TitleBar {
// 左边图标是否显示
......@@ -34,9 +36,7 @@ export struct TitleBar {
.onClick(this.rightClickEvent)
}
}.width('100%')
}.width('100%').height(0).layoutWeight(1)
.backgroundColor($r("app.color.title_background"))
Divider().color('#4c9a6b')
}.width('100%').height(55)
}.width('100%').layoutWeight(1)
}.padding({top: `${StatusBarManager.get().getSystemBarOffset()}px`}).width('100%').height(65)
}
}
\ No newline at end of file
import {
StatusBarManager
} from '@ohos/common';
@Extend(Button) function CommonButtonStyle() {
.borderWidth(2)
.borderColor('#0fa983')
......@@ -93,7 +96,7 @@ export struct DirectConnect {
this.renderBottom()
}.padding({ left: 20, right: 20 }).height("100%").linearGradient({
}.padding({ left: 20, right: 20 ,top: `${StatusBarManager.get().getSystemBarOffset()}px`}).height("100%").linearGradient({
direction: GradientDirection.RightBottom,
repeating: true,
colors: [[0x36a3c0, 0.0], [0x97c6a6, 1.0], [0xc7d799, 2.0]]
......
......@@ -5,8 +5,10 @@ import {
BreakpointSystem,
Logger,
StyleConstants,
StatusBarManager,
BreakpointConstants
} from '@ohos/common';
@Entry
@Component
export struct MaterialManagement {
build(){
......@@ -25,7 +27,7 @@ export struct MaterialManagement {
url: 'pages/setup/SetUpPage',
})
})
}.margin(15)
}.padding({top: `${StatusBarManager.get().getSystemBarOffset()}px`})
}.margin({ top: 15 })
Grid() {
ForEach(gridWordModel.getGridWorkData(), (secondItem: ItemData) => {
......
......@@ -6,5 +6,7 @@
"name": "@ohos/pagemanagement",
"author": "",
"license": "Apache-2.0",
"dependencies": {}
"dependencies": {
"@ohos/common": "file:../../common"
}
}
import router from '@ohos.router'
import {
StatusBarManager
} from '@ohos/common';
@Entry
@Component
export struct PageManagement {
......@@ -133,7 +135,7 @@ export struct PageManagement {
width: { left: '0lpx', right: '0lpx', top: '2lpx', bottom: '0lpx' },
}).height(120)
}
}
}.padding({top: `${StatusBarManager.get().getSystemBarOffset()}px`})
.width('100%').backgroundColor('#fff')
}
}
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论