@Entry
@Component
struct ListExample {
@State arr: ImageBean [] = []
@State editFlag: boolean = false
private scroller: ListScroller = new ListScroller()
build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
ForEach(this.arr, (item: number, index: number) => {
ListItem() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Stack() {
Image(this.arr[index].img)
.objectFit(ImageFit.Contain)
.width('100%')
.height('100%')
.draggable(false)
Column() {
Progress({ value: 90, total: 100, type: ProgressType.Ring })
.width(40)
.height(40)
.color(Color.Grey)
.style({ strokeWidth: 5 })
}
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.5)')
.justifyContent(FlexAlign.Center)
}
.width(this.arr[index].width)
.height(this.arr[index].height)
.borderRadius(11)
.constraintSize({
maxWidth: 140,
maxHeight: 140
})
}
}
}, (item: string) => item)
}.width('90%')
.scrollBar(BarState.Off)
.friction(0.6)
}.width('100%')
Button('edit list')
.onClick(() => {
this.getPictureFromAlbum()
}).margin({ top: 5, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
async getPictureFromAlbum() {
// 拉起相册,选择图片
let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new photoAccessHelper.PhotoViewPicker();
let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
let albumPath = photoSelectResult.photoUris[0];
// 读取图片为buffer
const file = fs.openSync(albumPath, fs.OpenMode.READ_ONLY);
let photoSize = fs.statSync(file.fd).size;
console.info('Photo Size: ' + photoSize);
let buffer = new ArrayBuffer(photoSize);
fs.readSync(file.fd, buffer);
fs.closeSync(file);
// 解码成PixelMap
const imageSource = image.createImageSource(buffer);
const imageInfo = imageSource.getImageInfoSync(0)
let bean = new ImageBean()
if (imageInfo.size.width > 140 || imageInfo.size.height > 140) {
let num = 140 / Math.max(imageInfo.size.width, imageInfo.size.height)
bean.width = imageInfo.size.width * num
bean.height = imageInfo.size.height * num
}
console.log('imageSource: ' + JSON.stringify(imageSource));
bean.img = imageSource.createPixelMapSync({})
this.arr.push(bean)
this.scroller.scrollToIndex(this.arr.length - 1)
}
}