添加loading 动画
This commit is contained in:
parent
b58e726004
commit
e55bf2535c
@ -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": {}
|
||||||
|
@ -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%')
|
||||||
}
|
}
|
||||||
}
|
}
|
32
app/src/main/ets/pages/animation/LoadingPage.ets
Normal file
32
app/src/main/ets/pages/animation/LoadingPage.ets
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
41
app/src/main/ets/pages/component/ToastPage.ets
Normal file
41
app/src/main/ets/pages/component/ToastPage.ets
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
42
app/src/main/ets/pages/system/SystemEventPage.ets
Normal file
42
app/src/main/ets/pages/system/SystemEventPage.ets
Normal 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() {
|
||||||
|
}
|
||||||
|
}
|
@ -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',
|
||||||
|
}
|
||||||
|
@ -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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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",
|
||||||
|
1
common_ui/src/main/resources/base/media/ic_loading.svg
Normal file
1
common_ui/src/main/resources/base/media/ic_loading.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user