Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

## [0.6.6] #100

Merged
merged 5 commits into from
Nov 27, 2019
Merged

## [0.6.6] #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6432dc5
fix issue https://github.com/fluttercandies/extended_image/issues/97
zmtzawqlp Nov 26, 2019
8775486
fix https://github.com/fluttercandies/extended_image/issues/66
zmtzawqlp Nov 26, 2019
316cd8c
* Features:
zmtzawqlp Nov 26, 2019
9cbc6ec
format codes
zmtzawqlp Nov 26, 2019
a51310e
update readme
zmtzawqlp Nov 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
## [0.6.6]

* Features:
Support init image with alignment when initialScale >1.0.
* Issues:
Fix issue that scrollDirection didn't work when set it dynamically(ExtendedImageGesturePageView ).
* Improve:
Add WaterfallFlow demo.

## [0.6.5]

* Features:
Add completedWidget for ExtendedImageState, it is include gesture or editor, so that you would't miss them
* Improve:
improve documents about Load State
Improve documents about Load State

## [0.6.4]

Expand Down
91 changes: 77 additions & 14 deletions README-ZH.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
- [保存网络图片](#%e4%bf%9d%e5%ad%98%e7%bd%91%e7%bb%9c%e5%9b%be%e7%89%87)
- [显示裁剪图片](#%e6%98%be%e7%a4%ba%e8%a3%81%e5%89%aa%e5%9b%be%e7%89%87)
- [绘制](#%e7%bb%98%e5%88%b6)
- [瀑布流](#%e7%80%91%e5%b8%83%e6%b5%81)
- [内存回收/可视区域追踪](#%e5%86%85%e5%ad%98%e5%9b%9e%e6%94%b6%e5%8f%af%e8%a7%86%e5%8c%ba%e5%9f%9f%e8%bf%bd%e8%b8%aa)
- [其他 APIs](#%e5%85%b6%e4%bb%96-apis)

## 缓存网络图片
Expand Down Expand Up @@ -92,6 +94,8 @@ ExtendedNetworkImageProvider(
| timeRetry | 请求重试间隔 | milliseconds: 100 |
| cancelToken | 用于取消请求的 Token | CancellationToken() |

当然你也可以继承任何的ExtendedProvider,并且覆写instantiateImageCodec方法，这样你可以统一处理图片的元数据，比如进行压缩图片。

## 加载状态

Extended Image一共有3种状态，分别是正在加载，完成，失败(loading,completed,failed)，你可以通过实现loadStateChanged回调来定义显示的效果
Expand Down Expand Up @@ -142,7 +146,7 @@ ExtendedImageState 状态回调
| invertColors | 是否反转颜色 | - |
| imageStreamKey | 图片流的唯一键 | - |
| reLoadImage() | 如果图片加载失败，你可以通过调用这个方法来重新加载图片 | - |
| completedWidget | 返回图片完成的Widget，它包含手势以及裁剪 | - |
| completedWidget | 返回图片完成的Widget，它包含手势以及裁剪 | - |

```dart
abstract class ExtendedImageState {
Expand Down Expand Up @@ -241,16 +245,17 @@ ExtendedImage

GestureConfig

| 参数 | 描述 | 默认值 |
| ----------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
| minScale | 缩放最小值 | 0.8 |
| animationMinScale | 缩放动画最小值，当缩放结束时回到minScale值 | minScale * 0.8 |
| maxScale | 缩放最大值 | 5.0 |
| animationMaxScale | 缩放动画最大值，当缩放结束时回到maxScale值 | maxScale * 1.2 |
| speed | 缩放拖拽速度，与用户操作成正比 | 1.0 |
| inertialSpeed | 拖拽惯性速度，与惯性速度成正比 | 100 |
| cacheGesture | 是否缓存手势状态，可用于ExtendedImageGesturePageView中保留状态，使用clearGestureDetailsCache方法清除 | false |
| inPageView | 是否使用ExtendedImageGesturePageView展示图片 | false |
| 参数 | 描述 | 默认值 |
| ----------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- |
| minScale | 缩放最小值 | 0.8 |
| animationMinScale | 缩放动画最小值，当缩放结束时回到minScale值 | minScale * 0.8 |
| maxScale | 缩放最大值 | 5.0 |
| animationMaxScale | 缩放动画最大值，当缩放结束时回到maxScale值 | maxScale * 1.2 |
| speed | 缩放拖拽速度，与用户操作成正比 | 1.0 |
| inertialSpeed | 拖拽惯性速度，与惯性速度成正比 | 100 |
| cacheGesture | 是否缓存手势状态，可用于ExtendedImageGesturePageView中保留状态，使用clearGestureDetailsCache方法清除 | false |
| inPageView | 是否使用ExtendedImageGesturePageView展示图片 | false |
| initialAlignment | 当图片的初始化缩放大于1.0的时候，根据相对位置初始化图片 | InitialAlignment.center |

```dart
ExtendedImage.network(
Expand All @@ -267,7 +272,9 @@ ExtendedImage.network(
speed: 1.0,
inertialSpeed: 100.0,
initialScale: 1.0,
inPageView: false);
inPageView: false,
initialAlignment: InitialAlignment.center,
);
},
)
```
Expand Down Expand Up @@ -804,7 +811,6 @@ ExtendedRawImage(
)
```

[crop image demo](https://github.com/fluttercandies/extended_image/blob/master/example/lib/crop_image_demo.dart)

## 绘制

Expand Down Expand Up @@ -852,9 +858,66 @@ ExtendedImage
```

在例子中可以看到把图片Clip成了一个桃心，你也可以根据你的要求，做出不同的Clip
[绘制例子](https://github.com/fluttercandies/extended_image/blob/master/example/lib/paint_image_demo.dart)
[绘制例子](https://github.com/fluttercandies/extended_image/blob/master/example/lib/pages/paint_image_demo.dart)
[下拉刷新头当中，也使用了这个技巧](https://github.com/fluttercandies/extended_image/tree/master/example/lib/common/push_to_refresh_header.dart)

## 瀑布流

使用 [LoadingMoreList](https://github.com/fluttercandies/loading_more_list) 或者 [WaterfallFlow](https://github.com/fluttercandies/waterfall_flow) 以及ExtendedImage创建瀑布流布局.

![img](https://github.com/fluttercandies/flutter_candies/tree/master/gif/waterfall_flow/known_sized.gif)

```dart
LoadingMoreList(
ListConfig<TuChongItem>(
waterfallFlowDelegate: WaterfallFlowDelegate(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: buildWaterfallFlowItem,
sourceList: listSourceRepository,
padding: EdgeInsets.all(5.0),
lastChildLayoutType: LastChildLayoutType.foot,
),
),
```
## 内存回收/可视区域追踪

当列表元素回收的时候你可以回收掉图片的内存缓存以减少内存压力。你也可以监听到viewport中indexes的变化。


更多详情请查看[LoadingMoreList](https://github.com/fluttercandies/loading_more_list), [WaterfallFlow](https://github.com/fluttercandies/waterfall_flow) 和 [ExtendedList](https://github.com/fluttercandies/extended_list)

```dart
LoadingMoreList(
ListConfig<TuChongItem>(
waterfallFlowDelegate: WaterfallFlowDelegate(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: buildWaterfallFlowItem,
sourceList: listSourceRepository,
padding: EdgeInsets.all(5.0),
lastChildLayoutType: LastChildLayoutType.foot,
collectGarbage: (List<int> garbages) {
///collectGarbage
garbages.forEach((index) {
final provider = ExtendedNetworkImageProvider(
listSourceRepository[index].imageUrl,
);
provider.evict();
});
//print("collect garbage : $garbages");
},
viewportBuilder: (int firstIndex, int lastIndex) {
print("viewport : [$firstIndex,$lastIndex]");
},
),
),
```

## 其他 APIs

ExtendedImage
Expand Down
91 changes: 76 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ A powerful official extension library of image, which support placeholder(loadin
- [save network](#save-network)
- [Show Crop Image](#show-crop-image)
- [Paint](#paint)
- [WaterfallFlow](#waterfallflow)
- [CollectGarbage/viewportBuilder](#collectgarbageviewportbuilder)
- [Other APIs](#other-apis)

## Cache Network
Expand Down Expand Up @@ -87,6 +89,9 @@ ExtendedImage.network(
| timeRetry | the time duration to retry to request | milliseconds: 100 |
| cancelToken | token to cancel network request | CancellationToken() |

you can create new provider and extends it with ExtendedProvider, and override instantiateImageCodec method.
so that you can handle image raw data here (compress image).

## Load State

Extended Image provide 3 states(loading,completed,failed), you can define your state widget with
Expand Down Expand Up @@ -239,16 +244,17 @@ ExtendedImage

GestureConfig

| parameter | description | default |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| minScale | min scale | 0.8 |
| animationMinScale | the min scale for zooming then animation back to minScale when scale end | minScale \_ 0.8 |
| maxScale | max scale | 5.0 |
| animationMaxScale | the max scale for zooming then animation back to maxScale when scale end | maxScale \_ 1.2 |
| speed | speed for zoom/pan | 1.0 |
| inertialSpeed | inertial speed for zoom/pan | 100 |
| cacheGesture | save Gesture state (for example in ExtendedImageGesturePageView, gesture state will not change when scroll back),remember clearGestureDetailsCache at right time | false |
| inPageView | whether in ExtendedImageGesturePageView | false |
| parameter | description | default |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| minScale | min scale | 0.8 |
| animationMinScale | the min scale for zooming then animation back to minScale when scale end | minScale \_ 0.8 |
| maxScale | max scale | 5.0 |
| animationMaxScale | the max scale for zooming then animation back to maxScale when scale end | maxScale \_ 1.2 |
| speed | speed for zoom/pan | 1.0 |
| inertialSpeed | inertial speed for zoom/pan | 100 |
| cacheGesture | save Gesture state (for example in ExtendedImageGesturePageView, gesture state will not change when scroll back),remember clearGestureDetailsCache at right time | false |
| inPageView | whether in ExtendedImageGesturePageView | false |
| initialAlignment | init image rect with alignment when initialScale > 1.0 | InitialAlignment.center |

```dart
ExtendedImage.network(
Expand All @@ -265,7 +271,9 @@ ExtendedImage.network(
speed: 1.0,
inertialSpeed: 100.0,
initialScale: 1.0,
inPageView: false);
inPageView: false,
initialAlignment: InitialAlignment.center,
);
},
)
```
Expand Down Expand Up @@ -798,9 +806,6 @@ ExtendedRawImage(
)
```

[crop image demo](https://github.com/fluttercandies/extended_image/blob/master/example/lib/crop_image_demo.dart)


## Paint

provide BeforePaintImage and AfterPaintImage callback, you will have the chance to paint things you want.
Expand Down Expand Up @@ -846,9 +851,65 @@ ExtendedImage
);
```

see [paint image demo](https://github.com/fluttercandies/extended_image/blob/master/example/lib/paint_image_demo.dart)
see [paint image demo](https://github.com/fluttercandies/extended_image/blob/master/example/lib/pages/paint_image_demo.dart)
and [push to refresh header which is used in crop image demo](https://github.com/fluttercandies/extended_image/tree/master/example/lib/common/push_to_refresh_header.dart)

## WaterfallFlow

build WaterfallFlow with [LoadingMoreList](https://github.com/fluttercandies/loading_more_list) or [WaterfallFlow](https://github.com/fluttercandies/waterfall_flow) with ExtendedImage.

![img](https://github.com/fluttercandies/flutter_candies/tree/master/gif/waterfall_flow/known_sized.gif)

```dart
LoadingMoreList(
ListConfig<TuChongItem>(
waterfallFlowDelegate: WaterfallFlowDelegate(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: buildWaterfallFlowItem,
sourceList: listSourceRepository,
padding: EdgeInsets.all(5.0),
lastChildLayoutType: LastChildLayoutType.foot,
),
),
```
## CollectGarbage/viewportBuilder

you can collect garbage when item is dispose or viewport indexes is changed.

more details, [LoadingMoreList](https://github.com/fluttercandies/loading_more_list), [WaterfallFlow](https://github.com/fluttercandies/waterfall_flow) and [ExtendedList](https://github.com/fluttercandies/extended_list)

```dart
LoadingMoreList(
ListConfig<TuChongItem>(
waterfallFlowDelegate: WaterfallFlowDelegate(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: buildWaterfallFlowItem,
sourceList: listSourceRepository,
padding: EdgeInsets.all(5.0),
lastChildLayoutType: LastChildLayoutType.foot,
collectGarbage: (List<int> garbages) {
///collectGarbage
garbages.forEach((index) {
final provider = ExtendedNetworkImageProvider(
listSourceRepository[index].imageUrl,
);
provider.evict();
});
//print("collect garbage : $garbages");
},
viewportBuilder: (int firstIndex, int lastIndex) {
print("viewport : [$firstIndex,$lastIndex]");
},
),
),
```

## Other APIs

ExtendedImage
Expand Down
1 change: 1 addition & 0 deletions example/.flutter-plugins-dependencies
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"dependencyGraph":[{"name":"image_editor","dependencies":[]},{"name":"image_picker","dependencies":[]},{"name":"image_picker_saver","dependencies":[]},{"name":"path_provider","dependencies":[]},{"name":"url_launcher","dependencies":[]}]}
Binary file added example/assets/avatar.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading