extended_imageСтатьи по Теме
- Изображение со всеми функциями Flutter
- Flutter может масштабировать и перетаскивать изображения
- Имитация флаттера Nuggets WeChat с эффектом скользящей страницы выхода
- Flutter Image Crop Rotate Flip Editor
Существует довольно много плагинов для Image on Pub, но почему я все еще хочу сделать один, в основном потому, что я чувствую, что паб недостаточно кастомизирован.
extended_imageЭто точно такое же официальное использование, но добавляет много полезных функций.
Кэшировать сетевое изображение
ExtendedNetworkImageProviderВ дополнение к функции кэширования он также предоставляет такие функции, как повтор, тайм-аут и т. д.
ExtendedNetworkImageProvider(this.url,
{this.scale = 1.0,
this.headers,
this.cache: false,
this.retries = 3,
this.timeLimit,
this.timeRetry = const Duration(milliseconds: 100)})
: assert(url != null),
assert(scale != null);
///time Limit to request image
final Duration timeLimit;
///the time to retry to request
final int retries;
///the time duration to retry to request
final Duration timeRetry;
///whether cache image to local
final bool cache;
/// The URL from which the image will be fetched.
final String url;
/// The scale to place in the [ImageInfo] object of the image.
final double scale;
/// The HTTP headers that will be used with [HttpClient.get] to fetch image from network.
final Map<String, String> headers;
или вы также можете использовать
ExtendedImage.network(
url,
cache: true,
),
закругленные углы, границы, круги
ExtendedImage.network(
url,
width: ScreenUtil.instance.setWidth(400),
height: ScreenUtil.instance.setWidth(400),
fit: BoxFit.fill,
cache: true,
border: Border.all(color: Colors.red, width: 1.0),
shape: boxShape,
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
Очистить локальный кеш, очистить кеш памяти, сохранить сетевые изображения в альбом
Очистите локальный кеш, вы можете выбрать очистить все, или вы можете указать время (например, очистить до 7 дней)
// Clear the disk cache directory then return if it succeed.
/// <param name="duration">timespan to compute whether file has expired or not</param>
Future<bool> clearDiskCachedImages({Duration duration})
Очистите кеш памяти, этим удобно пользоваться всем, вызвав системный апи
///clear all of image in memory
clearMemoryImageCache();
/// get ImageCache
getMemoryImageCache() ;
Для сохранения картинок в альбом используется библиотека image_picker_saver, отличие в том, что она поддерживает сохранение картинок, кэшированных локально, в альбом напрямую.
saveNetworkImageToPhoto(String url, {bool useCache: true})
Предоставляет обратный вызов LoadStateChanged для настройки загрузки, отображения, сбоя и других эффектов в зависимости от состояния.
Эта функция используется не только для сетевых изображений.Если изображения, которые вы читаете, относительно большие и занимают много времени, вы все равно можете использовать их для настройки эффекта загрузки.
ExtendedImage.network(
url,
width: ScreenUtil.instance.setWidth(600),
height: ScreenUtil.instance.setWidth(400),
fit: BoxFit.fill,
cache: true,
loadStateChanged: (ExtendedImageState state) {
switch (state.extendedImageLoadState) {
case LoadState.loading:
_controller.reset();
return Image.asset(
"assets/loading.gif",
fit: BoxFit.fill,
);
break;
case LoadState.completed:
_controller.forward();
return FadeTransition(
opacity: _controller,
child: ExtendedRawImage(
image: state.extendedImageInfo?.image,
width: ScreenUtil.instance.setWidth(600),
height: ScreenUtil.instance.setWidth(400),
),
);
break;
case LoadState.failed:
_controller.reset();
return GestureDetector(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
"assets/failed.jpg",
fit: BoxFit.fill,
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Text(
"load image failed, click to reload",
textAlign: TextAlign.center,
),
)
],
),
onTap: () {
state.reLoadImage();
},
);
break;
}
},
)
Предоставляет способ обрезки изображений
Я считаю, что друзья, которые просматривали Weibo, знают, что изображения в Weibo будут предварительно просматриваться и отображаться в соответствии с размером изображений, и эффект будет следующим:
Метод реализации очень прост. Когда загружается изображение LoadStateChanged, вы можете получить изображение изображения, а также ширину и высоту изображения. В это время вы можете рассчитать площадь soucreRect изображения, которое будет отображаться в соответствии с вашим собственный дизайн.
ExtendedRawImage(
image: image,
width: num400,
height: num300,
fit: BoxFit.fill,
soucreRect: Rect.fromLTWH(
(image.width - width) / 2.0, 0.0, width, image.height.toDouble()),
)
Демонстрация кадрирования изображения
Предоставляет 2 тайминга, вы можете делать все, что хотите, до и после рисования картины
BeforePaintImage Перед отрисовкой картинки, если вернуть True, то собственная картинка не будет отрисовываться AfterPaintImage после покраски картинок
В демоверсии в основном показано, как
1. Разрежьте картинку на сердце
2. Нарисуйте на картинке сердце (сделайте водяной знак из дерева)
3.Я нарисовал раскрывающуюся кисть и использовал ее в демонстрации предыдущей обрезанной картинки.
ExtendedImage.network(
url,
width: ScreenUtil.instance.setWidth(400),
height: ScreenUtil.instance.setWidth(400),
fit: BoxFit.fill,
cache: true,
beforePaintImage: (Canvas canvas, Rect rect, ui.Image image) {
if (paintType == PaintType.ClipHeart) {
if (!rect.isEmpty) {
canvas.save();
canvas.clipPath(clipheart(rect, canvas));
}
}
return false;
},
afterPaintImage: (Canvas canvas, Rect rect, ui.Image image) {
if (paintType == PaintType.ClipHeart) {
if (!rect.isEmpty) canvas.restore();
} else if (paintType == PaintType.PaintHeart) {
canvas.drawPath(
clipheart(rect, canvas),
Paint()
..colorFilter = ColorFilter.mode(
Color(0x55ea5504), BlendMode.srcIn)
..isAntiAlias = false
..filterQuality = FilterQuality.low);
}
},
)
наконец надетьGithub extended_image, если вы ничего не понимаете, скажите, пожалуйста, присоединяйтесьFlutter Candies, чтобы вместе производить милые конфеты Flutter (группа QQ: 181398081)