Flutter:无法刷新在 SliverAppBarDelegate 上选取的图像
Flutter: Can't refresh image picked on SliverAppBarDelegate
我是 Flutter 的新手,我正在使用下面的代码来选择和裁剪图像,该应用程序已成功运行,我可以从图库或相机中选择和裁剪图像,但图像只有点击热才能刷新vscode.
中的重新加载按钮
这是代码:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper/image_cropper.dart';
import 'dart:math' as math;
class AddPhoto extends StatefulWidget {
@override
_AddPhotoState createState() => _AddPhotoState();
}
class _AddPhotoState extends State<AddPhoto> {
File _image;
final picker = ImagePicker();
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
pinned: true,
floating: true,
delegate: _SliverAppBarDelegate(
_image,
minHeight: 80.0,
maxHeight: 200.0,
onPressed: () => displayBottomSheet(context),
),
);
}
void displayBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (ctx) {
return SafeArea(
child: Container(
child: Wrap(
children: <Widget>[
ListTile(
leading: Icon(Icons.camera_alt_outlined),
title: Text('Camera'),
onTap: () {
_obtenerImagen(ImageSource.camera);
},
),
Divider(
height: 1,
thickness: 0.5,
),
ListTile(
leading: Icon(Icons.photo_album_outlined),
title: Text('Gallery'),
onTap: () {
_getImage(ImageSource.gallery);
},
),
],
),
),
);
});
}
_getImage(ImageSource source) async {
final pickedImage = await picker.getImage(source: source);
if (pickedImage != null) {
File croppedImage = await ImageCropper.cropImage(
sourcePath: pickedImage.path,
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
compressQuality: 100,
maxWidth: 240,
maxHeight: 240,
compressFormat: ImageCompressFormat.jpg,
androidUiSettings: AndroidUiSettings(
toolbarColor: Colors.deepOrange,
toolbarTitle: "Ajustar Imagen",
statusBarColor: Colors.deepOrange.shade900,
backgroundColor: Colors.white));
setState(() {
_image = croppedImage;
});
}
Navigator.pop(context);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final File photo;
final double minHeight;
final double maxHeight;
final VoidCallback onPressed;
final bool hideButtonWhenExpanded;
_SliverAppBarDelegate(this.photo,
{@required this.minHeight,
@required this.maxHeight,
this.onPressed,
this.hideButtonWhenExpanded = true});
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final appBarSize = maxHeight - shrinkOffset;
final proportion = 2 - (maxHeight / appBarSize);
final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
return Flex(
direction: Axis.vertical,
children: <Widget>[
Flexible(
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 8,
child: CircleAvatar(
minRadius: 20.0,
maxRadius:
75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
child: ClipOval(
child: photo == null
? Image.asset(
'assets/images/pan.png',
fit: BoxFit.cover,
)
: Image.file(
photo,
fit: BoxFit.contain,
),
),
backgroundColor: Colors.grey[500],
),
),
Flexible(
flex: 2,
child: Opacity(
opacity: percent,
child: FlatButton(
onPressed: onPressed,
child: Text(
'Add Photo',
style: TextStyle(
color: Colors.blue, fontSize: 14.0 * proportion),
),
),
),
),
],
),
),
),
Divider(
height: 1,
thickness: 0.5,
),
],
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight;
}
}
我知道有几种方法可以解决这个问题,你建议我使用哪一种,为什么?
感谢您的帮助
从 sliverappbardelegate 更改此部分:
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight || photo != oldDelegate.photo;
}
我是 Flutter 的新手,我正在使用下面的代码来选择和裁剪图像,该应用程序已成功运行,我可以从图库或相机中选择和裁剪图像,但图像只有点击热才能刷新vscode.
中的重新加载按钮这是代码:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper/image_cropper.dart';
import 'dart:math' as math;
class AddPhoto extends StatefulWidget {
@override
_AddPhotoState createState() => _AddPhotoState();
}
class _AddPhotoState extends State<AddPhoto> {
File _image;
final picker = ImagePicker();
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
pinned: true,
floating: true,
delegate: _SliverAppBarDelegate(
_image,
minHeight: 80.0,
maxHeight: 200.0,
onPressed: () => displayBottomSheet(context),
),
);
}
void displayBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (ctx) {
return SafeArea(
child: Container(
child: Wrap(
children: <Widget>[
ListTile(
leading: Icon(Icons.camera_alt_outlined),
title: Text('Camera'),
onTap: () {
_obtenerImagen(ImageSource.camera);
},
),
Divider(
height: 1,
thickness: 0.5,
),
ListTile(
leading: Icon(Icons.photo_album_outlined),
title: Text('Gallery'),
onTap: () {
_getImage(ImageSource.gallery);
},
),
],
),
),
);
});
}
_getImage(ImageSource source) async {
final pickedImage = await picker.getImage(source: source);
if (pickedImage != null) {
File croppedImage = await ImageCropper.cropImage(
sourcePath: pickedImage.path,
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
compressQuality: 100,
maxWidth: 240,
maxHeight: 240,
compressFormat: ImageCompressFormat.jpg,
androidUiSettings: AndroidUiSettings(
toolbarColor: Colors.deepOrange,
toolbarTitle: "Ajustar Imagen",
statusBarColor: Colors.deepOrange.shade900,
backgroundColor: Colors.white));
setState(() {
_image = croppedImage;
});
}
Navigator.pop(context);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final File photo;
final double minHeight;
final double maxHeight;
final VoidCallback onPressed;
final bool hideButtonWhenExpanded;
_SliverAppBarDelegate(this.photo,
{@required this.minHeight,
@required this.maxHeight,
this.onPressed,
this.hideButtonWhenExpanded = true});
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final appBarSize = maxHeight - shrinkOffset;
final proportion = 2 - (maxHeight / appBarSize);
final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
return Flex(
direction: Axis.vertical,
children: <Widget>[
Flexible(
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 8,
child: CircleAvatar(
minRadius: 20.0,
maxRadius:
75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
child: ClipOval(
child: photo == null
? Image.asset(
'assets/images/pan.png',
fit: BoxFit.cover,
)
: Image.file(
photo,
fit: BoxFit.contain,
),
),
backgroundColor: Colors.grey[500],
),
),
Flexible(
flex: 2,
child: Opacity(
opacity: percent,
child: FlatButton(
onPressed: onPressed,
child: Text(
'Add Photo',
style: TextStyle(
color: Colors.blue, fontSize: 14.0 * proportion),
),
),
),
),
],
),
),
),
Divider(
height: 1,
thickness: 0.5,
),
],
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight;
}
}
我知道有几种方法可以解决这个问题,你建议我使用哪一种,为什么? 感谢您的帮助
从 sliverappbardelegate 更改此部分:
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight || photo != oldDelegate.photo;
}