图片九宫格,大图预览组件
Features
- 支持缩放
- 图片加载提示
- 接口优化
Getting started
打开pubspec.yaml
文件,加入依赖:image_box: ^0.0.1
Usage
传入图片url的数组
ImagesBox.url(
urls: imageUrls,
fit: BoxFit.cover,
format4rect: false,
borderRadius: BorderRadius.all(Radius.circular(8)),
padding: const EdgeInsets.all(10),
coverBuilder: (context, index, total) {
return Padding(
padding: const EdgeInsets.only(top: 100),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'$index/$total',
style: TextStyle(color: Colors.white,
fontSize: 20),
),
),
);
})
传入组件的方式
List<Widget> imageWidgets = [];
for (int i = 0; i < min(9, imageUrls.length); i++) {
String imageUrl = imageUrls[i];
Widget image = Image.network(
imageUrl,
fit: BoxFit.cover,
);
image = ClipRRect(
child: image,
borderRadius: BorderRadius.all(Radius.circular(6)),
);
imageWidgets.add(image);
}
ImagesBox(children: imageWidgets);