flutter九宫格看图
2019-10-20 本文已影响0人
寒云暮雨
flutter九宫格图片

import 'package:flutter/material.dart';
// ignore: must_be_immutable
class NinePicture extends StatelessWidget {
List<Map<String, String>> list = [];
NinePicture(List<Map<String, String>> list) {
this.list = list;
}
void showPhoto(BuildContext context, Map<String, String> img) {
Navigator.push(context,
MaterialPageRoute<void>(builder: (BuildContext context) {
return GestureDetector(
child: SizedBox.expand(
child: Hero(
tag: img,
child: Image.asset(
img['img'],
fit: BoxFit.contain,
),
),
),
onTap: () {
Navigator.maybePop(context);
},
);
}));
}
@override
Widget build(BuildContext context) {
int _crossAxisCount = 1;
if (list.length == 1) {
_crossAxisCount = 1;
} else if (list.length == 2) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 3;
}
return GridView.count(
crossAxisCount: _crossAxisCount,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
padding: const EdgeInsets.all(4.0),
children: list.map(
(Map<String, String> img) {
return GestureDetector(
onTap: () {
showPhoto(context, img);
},
child: Hero(
tag: img['tag'].toString(),
child: ClipRRect(
child: Image.asset(
img['img'],
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(8),
),
),
);
},
).toList(),
);
}
}
利用GridView实现布局,用Hero动画进行展示