添加loading 动画

This commit is contained in:
DevWiki 2024-05-31 11:23:33 +08:00
parent b58e726004
commit e55bf2535c
9 changed files with 131 additions and 11 deletions

View File

@ -9,7 +9,7 @@
"@devwiki/common_ui": "file:../common_ui", "@devwiki/common_ui": "file:../common_ui",
"@devwiki/base": "file:../base", "@devwiki/base": "file:../base",
"@ohos/axios": "^2.2.0", "@ohos/axios": "^2.2.0",
"@devwiki/hmcalculate": "file:../hmcalculate" // "@devwiki/hmcalculate": "file:../hmcalculate"
}, },
"devDependencies": {}, "devDependencies": {},
"dynamicDependencies": {} "dynamicDependencies": {}

View File

@ -1,5 +1,4 @@
import { CommonRes, TitleBar } from '@devwiki/common_ui'; import { CommonRes, TitleBar } from '@devwiki/common_ui';
import web_webview from '@ohos.web.webview';
import { TitleBarMenuType } from '@devwiki/common_ui'; import { TitleBarMenuType } from '@devwiki/common_ui';
import { router, window } from '@kit.ArkUI'; import { router, window } from '@kit.ArkUI';
import promptAction from '@ohos.promptAction'; import promptAction from '@ohos.promptAction';
@ -7,8 +6,8 @@ import { BusinessError } from '@ohos.base';
import { Log } from '@devwiki/base'; import { Log } from '@devwiki/base';
import { BaseLocalStorage, ScreenUtil } from '@devwiki/base'; import { BaseLocalStorage, ScreenUtil } from '@devwiki/base';
import { HomeItem, HomeItemGroup } from '../model/Home'; import { HomeItem, HomeItemGroup } from '../model/Home';
import { CalculateAdapter } from '@devwiki/hmcalculate';
import('./animation/LoadingPage')
@Entry @Entry
@Component @Component
@ -28,7 +27,8 @@ struct Index {
{ {
name: 'Component', name: 'Component',
items: [ items: [
{name: 'InputPage', page: 'pages/component/InputPage'} {name: 'InputPage', page: 'pages/component/InputPage'},
{name: 'ToastPage', page: 'pages/component/ToastPage'}
] ]
}, },
// 布局 // 布局
@ -44,6 +44,7 @@ struct Index {
name: "Animation", name: "Animation",
items: [ items: [
{ name: 'CompTransition', page: 'pages/animation/CompTransitionPage'}, { name: 'CompTransition', page: 'pages/animation/CompTransitionPage'},
{ name: 'Loading', page: 'pages/animation/LoadingPage'},
] ]
}, },
// 多媒体 // 多媒体
@ -63,13 +64,9 @@ struct Index {
} }
]; ];
adapter?: CalculateAdapter;
aboutToAppear(): void { aboutToAppear(): void {
ScreenUtil.getInstance().initScreenSize(); ScreenUtil.getInstance().initScreenSize();
BaseLocalStorage.getInstance().init(getContext(this)); BaseLocalStorage.getInstance().init(getContext(this));
this.adapter = new CalculateAdapter();
let a = this.adapter.add(1,2);
} }
onPageShow(): void { onPageShow(): void {
@ -167,7 +164,7 @@ struct Index {
}) })
} }
}) })
}.width('100%').margin({top: 16, bottom: 48}) }.width('100%').margin({top: 16}).layoutWeight(1)
}.width('100%').height('100%') }.width('100%').height('100%')
} }
} }

View File

@ -0,0 +1,32 @@
import { CommonRes } from '@devwiki/common_ui/Index';
import { PageName } from '../../utils/PageRouter';
import { curves } from '@kit.ArkUI';
@Entry({ routeName: PageName.loadingPage })
@Component
export struct LoadingPage {
@State animate: boolean = false;
// 第一步: 声明相关状态变量
@State rotateValue: number = 0; // 组件一旋转角度
build() {
Column() {
Image(CommonRes.getImage('ic_loading'))
.rotate({ angle: this.rotateValue })
.width(32)
.height(32)
.fillColor('#2196F3')
.animation({
curve: curves.initCurve(Curve.Linear),
playMode: PlayMode.Normal,
iterations: -1,
})
.onAppear(() => {
this.animate = !this.animate;
// 组件一的rotate属性发生变化所以会给组件一添加rotate旋转动画
this.rotateValue = this.animate ? 360 : 0;
})
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}

View File

@ -0,0 +1,41 @@
import { Toast } from '../../utils/Toast'
@Observed
class ToastViewMode {
showToast?: (msg: ResourceStr) => void;
showHint(msg: ResourceStr) {
this.showToast?.(msg);
}
}
@Entry
@Component
export struct ToastPage {
@Provide toastVM: ToastViewMode = new ToastViewMode();
aboutToAppear(): void {
this.toastVM.showToast = (msg: ResourceStr) => {
Toast.showToast(msg, true);
}
}
build() {
Column(){
Button("ShowDefault").width('80%').height(36).onClick(() =>{
Toast.showToast("Test Default")
})
Button("ShowTopmost").width('80%').height(36).onClick(() =>{
Toast.showToast("Test Topmost", true)
}).margin({ top: 16 })
Button("VM Show").width('80%').height(36).onClick(() =>{
this.toastVM.showHint("test vm Show")
}).margin({ top: 16 })
}.height('100%').width('100%').justifyContent(FlexAlign.Center)
}
}

View File

@ -0,0 +1,42 @@
import commonEventManager from '@ohos.commonEventManager';
import Base from '@ohos.base';
@Component
@Entry
export struct SystemEventPage {
// 用于保存创建成功的订阅者对象,后续使用其完成订阅及退订的动作
subscriber: commonEventManager.CommonEventSubscriber | null = null;
// 订阅者信息
subscribeInfo: commonEventManager.CommonEventSubscribeInfo = {
events: ["usual.event.SCREEN_OFF"], // 订阅灭屏公共事件
}
aboutToAppear(): void {
// 创建订阅者回调
commonEventManager.createSubscriber(this.subscribeInfo, (err: Base.BusinessError, data: commonEventManager.CommonEventSubscriber) => {
if (err) {
console.error(`Failed to create subscriber. Code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Succeeded in creating subscriber.');
this.subscriber = data;
// 订阅公共事件回调
})
// 订阅公共事件回调
if (this.subscriber !== null) {
commonEventManager.subscribe(this.subscriber, (err: Base.BusinessError, data: commonEventManager.CommonEventData) => {
if (err) {
console.error(`Failed to subscribe common event. Code is ${err.code}, message is ${err.message}`);
return;
}
})
} else {
console.error(`Need create subscriber`);
}
}
build() {
}
}

View File

@ -2,3 +2,7 @@
export class PageRouter{ export class PageRouter{
static readonly WebPage: string = "@bundle:net.devwiki.hm4demo/app/ets/pages/web/WebPage" static readonly WebPage: string = "@bundle:net.devwiki.hm4demo/app/ets/pages/web/WebPage"
} }
export enum PageName {
loadingPage = 'LoadingPage',
}

View File

@ -1,11 +1,12 @@
import promptAction from '@ohos.promptAction'; import promptAction from '@ohos.promptAction';
export class Toast { export class Toast {
static showToast(message: ResourceStr) { static showToast(message: ResourceStr, topmost: boolean = false) {
promptAction.showToast({ promptAction.showToast({
message: message, message: message,
duration: 2000, duration: 2000,
bottom: "50%" bottom: "50%",
showMode: promptAction.ToastShowMode.TOP_MOST
}); });
} }
} }

View File

@ -3,10 +3,12 @@
"pages/Index", "pages/Index",
"pages/animation/CompTransitionPage", "pages/animation/CompTransitionPage",
"pages/animation/LoadingPage",
"pages/component/InputPage", "pages/component/InputPage",
"pages/component/SVGPage", "pages/component/SVGPage",
"pages/component/TextPage", "pages/component/TextPage",
"pages/component/ToastPage",
"pages/layout/LinearLayoutPage", "pages/layout/LinearLayoutPage",
"pages/layout/RelativeContainerPage", "pages/layout/RelativeContainerPage",

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>loading</title><path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /></svg>

After

Width:  |  Height:  |  Size: 143 B