103 lines
3.7 KiB
Plaintext
103 lines
3.7 KiB
Plaintext
/*
|
||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||
* you may not use this file except in compliance with the License.
|
||
* You may obtain a copy of the License at
|
||
*
|
||
* http://www.apache.org/licenses/LICENSE-2.0
|
||
*
|
||
* Unless required by applicable law or agreed to in writing, software
|
||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
* See the License for the specific language governing permissions and
|
||
* limitations under the License.
|
||
*/
|
||
import router from '@ohos.router';
|
||
import {
|
||
ImageKnifeComponent,
|
||
ImageKnifeOption,
|
||
ImageKnifeGlobal,
|
||
ImageKnife,
|
||
HeaderOptions
|
||
} from '@ohos/libraryimageknife'
|
||
|
||
import { ObjectKey } from '@ohos/libraryimageknife';
|
||
|
||
@Entry
|
||
@Component
|
||
struct IndexFunctionDemo {
|
||
@State headerOptions1: HeaderOptions = {
|
||
key: "refer",
|
||
value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
|
||
};
|
||
@State imageKnifeOption1: ImageKnifeOption =
|
||
{
|
||
loadSrc: $r('app.media.icon'),
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
headerOption: [this.headerOptions1]
|
||
};
|
||
@State imageKnifeOption2: ImageKnifeOption =
|
||
{
|
||
loadSrc: $r('app.media.icon'),
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
headerOption: [this.headerOptions1]
|
||
};
|
||
|
||
build() {
|
||
Scroll() {
|
||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("加载PNG")
|
||
.onClick(() => {
|
||
this.imageKnifeOption1 = {
|
||
loadSrc: $r('app.media.pngSample'),
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
signature: new ObjectKey('ccccccc')
|
||
}
|
||
}).margin({ top: 5, left: 3 })
|
||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||
}.width('100%').backgroundColor(Color.Pink)
|
||
|
||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("加载GIF")
|
||
.onClick(() => {
|
||
this.imageKnifeOption2 = {
|
||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
displayProgress:true,
|
||
}
|
||
}).margin({ top: 5, left: 3 })
|
||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||
}.width('100%').backgroundColor(Color.Pink)
|
||
|
||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("ImageKnife测试目录页面")
|
||
.onClick(() => {
|
||
console.log("pages/imageknifeTestCaseIndex 页面跳转")
|
||
router.pushUrl({ url: "pages/imageknifeTestCaseIndex" });
|
||
}).margin({ top: 15 })
|
||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||
}
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
aboutToAppear() {
|
||
|
||
}
|
||
aboutToDisappear(){
|
||
|
||
}
|
||
|
||
onBackPress() {
|
||
|
||
}
|
||
} |