android grideview 图片png透明,Flutter中图片GridView展示及放大效果

使用的组件：

在pubspec.yaml中添加：

photo_view: ^0.4.2

图片文件：

assets:

- assets/images/1.jpg

- assets/images/2.jpg

- assets/images/3.jpg

- assets/images/4.jpg

- assets/images/5.jpg

- assets/images/6.jpg

- assets/images/7.jpg

- assets/images/8.jpg

- assets/images/9.jpg

- assets/images/10.jpg

- assets/images/11.jpg

- assets/images/12.jpg

- assets/images/13.jpg

- assets/images/14.png

- assets/images/15.jpg

效果展示：

直接上代码了：import 'package:flutter/material.dart';

import 'package:flutter/rendering.dart';

import 'package:flutter/foundation.dart';

import 'package:photo_view/photo_view.dart';

import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewPage extends StatefulWidget {

@override

_PhotoViewPageState createState() => _PhotoViewPageState();

}

class _PhotoViewPageState extends State {

List assetNames = [

'assets/images/2.jpg',

'assets/images/3.jpg',

'assets/images/4.jpg',

'assets/images/5.jpg',

'assets/images/6.jpg',

'assets/images/7.jpg',

'assets/images/8.jpg',

'assets/images/9.jpg',

'assets/images/10.jpg',

'assets/images/11.jpg',

'assets/images/12.jpg',

'assets/images/13.jpg',

'assets/images/14.png',

'assets/images/15.jpg',

];

@override

Widget build(BuildContext context) {

return Scaffold(

body: _scrollView(context),

);

}

Widget _scrollView(BuildContext context) {

return Container(

child: CustomScrollView(

slivers: [

SliverPersistentHeader(

pinned: false,

delegate: HeroHeader(

minExtent: 100.0,

maxExtent: 250.0,

),

),

SliverGrid(

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

maxCrossAxisExtent: 250.0,

mainAxisSpacing: 1,

crossAxisSpacing: 1,

childAspectRatio: 1,

),

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Container(

alignment: Alignment.center,

padding: _edgeInsetsForIndex(index),

child: InkWell(

onTap: () {

//debug:

print(assetNames[index]);

Navigator.of(context)

.push(MaterialPageRoute(builder: (context) {

return PhotoPreview(

initialIndex: index,

photoList: assetNames,

);

}));

},

child: Image.asset(

assetNames[index],

height: 250.0,

width: 250.0,

fit: BoxFit.cover,

),

));

},

childCount: assetNames.length,

),

),

],

),

);

}

EdgeInsets _edgeInsetsForIndex(int index) {

if (index % 2 == 0) {

return EdgeInsets.only(top: 4.0, left: 8.0, right: 4.0, bottom: 4.0);

} else {

return EdgeInsets.only(top: 4.0, left: 4.0, right: 8.0, bottom: 4.0);

}

}

}

class HeroHeader implements SliverPersistentHeaderDelegate {

HeroHeader({

this.onLayoutToggle,

this.minExtent,

this.maxExtent,

});

final VoidCallback onLayoutToggle;

double maxExtent;

double minExtent;

@override

Widget build(

BuildContext context, double shrinkOffset, bool overlapsContent) {

return Stack(

fit: StackFit.expand,

children: [

Image.asset(

'assets/images/1.jpg',

fit: BoxFit.cover,

),

Container(

decoration: BoxDecoration(

gradient: LinearGradient(

colors: [

Colors.transparent,

Colors.black54,

],

stops: [0.5, 1.0],

begin: Alignment.topCenter,

end: Alignment.bottomCenter,

tileMode: TileMode.repeated,

),

),

),

Positioned(

left: 16.0,

right: 16.0,

bottom: 16.0,

child: Text(

'PhotoView Gallery',

style: TextStyle(

fontSize: 32.0,

color: Colors.white,

),

),

),

],

);

}

@override

bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {

return true;

}

@override

FloatingHeaderSnapConfiguration get snapConfiguration => null;

}

//PhotoPreview 点击小图后的效果

class PhotoPreview extends StatefulWidget {

final int initialIndex;

final List photoList;

final PageController pageController;

PhotoPreview({this.initialIndex, this.photoList})

: pageController = PageController(initialPage: initialIndex);

@override

_PhotoPreviewState createState() => _PhotoPreviewState();

}

class _PhotoPreviewState extends State {

int currentIndex;

@override

void initState() {

currentIndex = widget.initialIndex;

super.initState();

}

//图片切换

void onPageChanged(int index) {

setState(() {

currentIndex = index;

});

}

@override

Widget build(BuildContext context) {

return Container(

child: PhotoViewGallery.builder(

scrollPhysics: const BouncingScrollPhysics(),

onPageChanged: onPageChanged,

itemCount: widget.photoList.length,

pageController: widget.pageController,

builder: (BuildContext context, int index) {

return PhotoViewGalleryPageOptions(

imageProvider: AssetImage(widget.photoList[index]),

minScale: PhotoViewComputedScale.contained * 0.6,

maxScale: PhotoViewComputedScale.covered * 1.1,

initialScale: PhotoViewComputedScale.contained,

);

},

),

);

}

}