前言
图片预览是OA系统中查看文档附件、聊天图片、公告配图等场景的常用功能。一个优秀的图片预览组件需要支持缩放、平移、多图切换、保存等功能。本文将详细介绍如何使用Flutter和OpenHarmony开发一个功能完善的图片预览组件，提升用户的图片查看体验。
组件功能设计
图片预览组件的核心是手势交互，需要支持双指缩放、单指平移、双击放大等操作。组件需要支持多图预览，通过左右滑动切换图片。底部显示图片索引指示器，顶部显示操作按钮如保存、分享等。背景使用黑色或半透明遮罩，突出图片内容。
Flutter端实现
图片预览组件的基础结构：
dart
class ImagePreview extends StatefulWidget {
final List<String> images;
final int initialIndex;
final Function(String)? onSave;
const ImagePreview({
Key? key,
required this.images,
this.initialIndex = 0,
this.onSave,
}) : super(key: key);
@override
State<ImagePreview> createState() => _ImagePreviewState();
}组件接收图片URL列表、初始索引和保存回调。initialIndex指定初始显示的图片，onSave处理保存操作。
状态类中的手势控制：
dart
class _ImagePreviewState extends State<ImagePreview> {
late PageController _pageController;
int _currentIndex = 0;
double _scale = 1.0;
Offset _offset = Offset.zero;
@override
void initState() {
super.initState();
_currentIndex = widget.initialIndex;
_pageController = PageController(initialPage: widget.initialIndex);
}
void _resetTransform() {
setState(() {
_scale = 1.0;
_offset = Offset.zero;
});
}
}状态类管理当前图片索引、缩放比例和平移偏移。PageController控制图片切换，_resetTransform重置变换状态。
图片预览页面构建：
dart
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: [
GestureDetector(
onTap: () => Navigator.pop(context),
child: PageView.builder(
controller: _pageController,
itemCount: widget.images.length,
onPageChanged: (index) {
setState(() => _currentIndex = index);
_resetTransform();
},
itemBuilder: (context, index) => _buildImageView(widget.images[index]),
),
),
_buildTopBar(),
_buildBottomIndicator(),
],
),
);
}预览页面使用黑色背景，PageView实现左右滑动切换图片。点击空白区域关闭预览，顶部显示操作栏，底部显示索引指示器。
可缩放图片视图：
dart
Widget _buildImageView(String imageUrl) {
return InteractiveViewer(
minScale: 0.5,
maxScale: 4.0,
child: Center(
child: Image.network(
imageUrl,
fit: BoxFit.contain,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
: null,
),
);
},
),
),
);
}InteractiveViewer提供缩放和平移功能，minScale和maxScale限制缩放范围。loadingBuilder显示加载进度，提升用户体验。
顶部操作栏：
dart
Widget _buildTopBar() {
return Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.black54, Colors.transparent],
),
),
child: Row(
children: [
IconButton(
icon: Icon(Icons.close, color: Colors.white),
onPressed: () => Navigator.pop(context),
),
Spacer(),
Text(
'${_currentIndex + 1}/${widget.images.length}',
style: TextStyle(color: Colors.white),
),
IconButton(
icon: Icon(Icons.download, color: Colors.white),
onPressed: () => widget.onSave?.call(widget.images[_currentIndex]),
),
],
),
),
);
}顶部操作栏使用渐变背景，显示关闭按钮、图片索引和保存按钮。MediaQuery获取状态栏高度，避免内容被遮挡。
OpenHarmony鸿蒙端实现
图片预览组件的基础结构：
typescript
@Component
struct ImagePreview {
@Prop images: string[] = []
@Prop initialIndex: number = 0
@State currentIndex: number = 0
@State scale: number = 1
@State offsetX: number = 0
@State offsetY: number = 0
private swiperController: SwiperController = new SwiperController()
private onSave: (url: string) => void = () => {}
private onClose: () => void = () => {}
aboutToAppear() {
this.currentIndex = this.initialIndex
}
}使用@State管理当前索引和变换状态，SwiperController控制图片切换。
图片预览页面构建：
typescript
build() {
Stack() {
Swiper(this.swiperController) {
ForEach(this.images, (image: string, index: number) => {
this.ImageView(image)
})
}
.index(this.currentIndex)
.indicator(false)
.loop(false)
.onChange((index: number) => {
this.currentIndex = index
this.resetTransform()
})
this.TopBar()
this.BottomIndicator()
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
}Swiper组件实现左右滑动切换，indicator设为false隐藏默认指示器。onChange监听切换事件更新当前索引。
可缩放图片视图：
typescript
@Builder
ImageView(imageUrl: string) {
Column() {
Image(imageUrl)
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
.scale({ x: this.scale, y: this.scale })
.translate({ x: this.offsetX, y: this.offsetY })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.gesture(
GestureGroup(GestureMode.Parallel,
PinchGesture()
.onActionUpdate((event: GestureEvent) => {
this.scale = Math.max(0.5, Math.min(4, this.scale * event.scale))
}),
PanGesture()
.onActionUpdate((event: GestureEvent) => {
this.offsetX += event.offsetX
this.offsetY += event.offsetY
}),
TapGesture({ count: 2 })
.onAction(() => {
if (this.scale > 1) {
this.resetTransform()
} else {
this.scale = 2
}
})
)
)
}图片视图支持捏合缩放、平移和双击放大。GestureGroup组合多个手势，PinchGesture处理缩放，PanGesture处理平移，TapGesture处理双击。
顶部操作栏：
typescript
@Builder
TopBar() {
Row() {
Image($r('app.media.close'))
.width(24)
.height(24)
.fillColor(Color.White)
.onClick(() => this.onClose())
Blank()
Text(`${this.currentIndex + 1}/${this.images.length}`)
.fontSize(16)
.fontColor(Color.White)
Blank()
Image($r('app.media.download'))
.width(24)
.height(24)
.fillColor(Color.White)
.onClick(() => this.onSave(this.images[this.currentIndex]))
}
.width('100%')
.padding({ left: 16, right: 16, top: 48, bottom: 16 })
.linearGradient({
angle: 180,
colors: [['#80000000', 0], ['#00000000', 1]]
})
.position({ x: 0, y: 0 })
}顶部操作栏使用渐变背景，显示关闭按钮、图片索引和保存按钮。position定位在顶部。
底部索引指示器：
typescript
@Builder
BottomIndicator() {
Row() {
ForEach(this.images, (image: string, index: number) => {
Circle()
.width(this.currentIndex === index ? 8 : 6)
.height(this.currentIndex === index ? 8 : 6)
.fill(this.currentIndex === index ? Color.White : '#80FFFFFF')
.margin({ left: 4, right: 4 })
})
}
.width('100%')
.justifyContent(FlexAlign.Center)
.padding({ bottom: 32 })
.position({ x: 0, y: '90%' })
}底部指示器使用圆点显示当前图片位置，当前图片对应的圆点更大更亮。position定位在底部。
总结
本文详细介绍了Flutter和OpenHarmony平台上图片预览组件的开发方法。图片预览是OA系统中查看附件的常用功能，需要支持缩放、平移、多图切换等操作。Flutter使用InteractiveViewer和PageView，鸿蒙使用手势组合和Swiper。开发者需要注意手势冲突处理和加载状态的显示。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net