class LXPhotosView extends StatefulWidget {
//数据资源
final List list;
//主轴间距
final double mainAxisPaddingSize;
//交叉轴间距
final double crossAxisPaddingSize;
// 圆角大小(默认没有圆角)
final double radiusSize;
//交叉轴个数 (默认值 根据九宫格个数决定)
final int currentCrossAxisCount;
//背景颜色
final Color bgColor;
///构造方法
LXPhotosView({
Key key,
@required this.list,
this.mainAxisPaddingSize = 5,
this.crossAxisPaddingSize = 5,
this.radiusSize = 0.0,
this.bgColor = Colors.white,
int currentCrossAxisCount
}) : this.currentCrossAxisCount = currentCrossAxisCount ?? (list.length == 4 ? 2 : 3),
super(key: key);
@override
_PhotosViewState createState() => _PhotosViewState();
}
class _PhotosViewState extends State {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: this.widget.currentCrossAxisCount,
crossAxisSpacing: this.widget.crossAxisPaddingSize,
mainAxisSpacing: this.widget.mainAxisPaddingSize,
),
itemBuilder: (BuildContext context, int index){
return GestureDetector(
child: Hero(
tag: widget.list[index].imgUrl,
child: Container(
color: widget.bgColor,
child: ClipRRect(
borderRadius: BorderRadius.circular(widget.radiusSize),
child: Image(
image: NetworkImage(widget.list[index].imgUrl),
fit: BoxFit.fitWidth,
),
),
),
),
onTap: () {
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (context,animation, secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: LXScrollPhotosView(currentIndex: index,currentList: widget.list,)
);
}
)
);
} ,
);
},
itemCount: widget.list.length,
),
),
);
}
}
3.跳转界面界面，存在Hero动画，注意细节九宫格tag要保持与详情界面保持一致才能实现此效果，
