我正在尝试构建一个图片网格,它具有给定的宽度和高度,将它们包装在Containers
中,并使用fit: BoxFit.fill
来设置边框(如果选择了图像,则不保持图像纵横比,我希望每个容器都具有相同的总宽度和高度)。
问题是,当图像在被点击后重新绘制时,我注意到一个白色闪光。当只有少量图像时似乎不会出现这种情况,但是对于15+张图片,会很嘈杂。
我尝试在图像小部件上添加gaplessPlayback: true
,因为我在这里找到了该解决方法,但这并没有解决我的问题。
这是一个显示我的问题的gif(我使用了16张图片,大小为1920x1080):
编辑:
我忘了指出这只是一个示例,我在代码中使用了边框,但在我的情况下,我还想向容器添加填充以使图像变小(就像在Android照片库中一样),这意味着每次点击图像都应该重新绘制。
这是我的代码:
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
// See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(body: ImageGridView()),
);
}
}
class ImageGridView extends StatelessWidget {
List<File> _fileList = [];
ImageGridView(){
_fileList = [
File('C:/flutter/img/1.jpg'),
File('C:/flutter/img/3.jpg'),
File('C:/flutter/img/4.jpg'),
File('C:/flutter/img/5.jpg'),
File('C:/flutter/img/6.jpg'),
File('C:/flutter/img/7.jpg'),
File('C:/flutter/img/8.jpg'),
File('C:/flutter/img/9.jpg'),
File('C:/flutter/img/10.jpg'),
File('C:/flutter/img/11.jpg'),
File('C:/flutter/img/12.jpg'),
File('C:/flutter/img/13.jpg'),
File('C:/flutter/img/14.jpg'),
File('C:/flutter/img/15.jpg'),
File('C:/flutter/img/16.jpg'),
];
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Wrap(
children: _fileList.map((file) {
return WindowsAsset(file);
}).toList(),
),
);
}
}
class WindowsAsset extends StatefulWidget {
final File _file;
WindowsAsset(this._file);
@override
State<StatefulWidget> createState() => WindowsAssetState();
}
class WindowsAssetState extends State<WindowsAsset> {
bool selected = false;
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width / 2;
final height = width * 1080 / 1920;
return Container(
width: width,
height: height,
child: Container(
child: Container(
constraints: BoxConstraints.expand(),
decoration: !selected
? null
: BoxDecoration(
border: Border.all(
color: Color.fromRGBO(153, 209, 255, 1),
width: 4
),
),
child: Container(
child: GestureDetector(
child: Image.file(
widget._file,
filterQuality: FilterQuality.medium,
fit: BoxFit.fill,
gaplessPlayback: true,
),
onTap: () => setState(() {
selected = !selected;
}),
),
),
),
),
);
}
}
我该如何解决这个问题?谢谢!