我创建了一个flutter应用程序,并使用图像选择器将图像作为gridView放到中心,并使用网格图块来循环图像数组。是否可以在轻按gridTile时触发它?
以下是main.dart中的代码,用于获取将图像添加到数组和网格 View 的图像。
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
File _imageFile;
List<File> _imageList=[];
getImage() async {
var _fileName = await ImagePicker.pickImage();
setState(() {
_imageFile = _fileName;
_imageList.add(_imageFile);
});
}
removeImage(int index){
setState((){
_imageList.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child:_imageList.length == 0
? new Text('No image selected.')
:new GridView.count(
crossAxisCount: 4,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _imageList.map((File file) {
return new GridTile(
child: new Image.file(file, fit: BoxFit.cover,));
}).toList()),
),
floatingActionButton: new FloatingActionButton(
onPressed:getImage,
tooltip: 'Pick Image',
child: new Icon(Icons.add_a_photo),
),
);
}
}
最佳答案
您可以只将GridTile
包装在InkResponse
或GestureDetector
中,并传递一个在单击时调用的函数
例:
// Function to be called on click
void _onTileClicked(int index){
debugPrint("You tapped on item $index");
}
// Get grid tiles
List<Widget> _getTiles(List<File> iconList) {
final List<Widget> tiles = <Widget>[];
for (int i = 0; i < iconList.length; i++) {
tiles.add(new GridTile(
child: new InkResponse(
enableFeedback: true,
child: new Image.file(iconList[i], fit: BoxFit.cover,),
onTap: () => _onTileClicked(i),
)));
}
return tiles;
}
// GridView
new GridView.count(
crossAxisCount: 4,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _getTiles(_imageList),
)
希望有帮助!