flutter 九宫格菜单_Flutter 九宫格及Hero动画

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要保持与详情界面保持一致才能实现此效果，