v1.0.3 release, add QQ Group

flutterchina · Jul 2, 2020 · 9a812ec · 9a812ec
1 parent 88c4856
commit 9a812ec
Show file tree

Hide file tree

Showing 11 changed files with 306 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.0.3
+
+* TODO: add QQ Group avatar effects.
+
 ## 1.0.2
 
 * TODO: fix bug.

diff --git a/README-ZH.md b/README-ZH.md
@@ -4,21 +4,22 @@ Language: [English](https://github.com/flutterchina/nine_grid_view) | 中文简
 
 ### NineGridView
 类似微博动态，微信朋友圈，展示图片的九宫格控件。支持单张大图预览。  
-同时也支持微信群组，钉钉群组头像效果。
+同时也支持微信群组，钉钉群组，QQ讨论组头像效果。
 
 ### DragSortView
 类似微博/微信发布动态选图九宫格。支持按压放大效果，拖拽排序，拖拽到指定位置删除。
 
 ### Pub
 ```yaml
 dependencies:
-  nine_grid_view: ^1.0.2
+  nine_grid_view: ^1.0.3
 ```
 
 ### Example
 ```yaml
 import 'package:nine_grid_view/nine_grid_view.dart';
 
+// bigImage参数 单张大图建议使用中等质量图片，因为原图太大加载耗时。
 NineGridView(
   margin: EdgeInsets.all(12),
   padding: EdgeInsets.all(5),
@@ -28,6 +29,7 @@ NineGridView(
   itemBuilder: (BuildContext context, int index) {},
 );
 
+// 建议使用略微缩图，因为原图太大可能会引起重复加载导致闪动.
 DragSortView(
   imageList,
   space: 5,
@@ -49,7 +51,7 @@ DragSortView(
 ### Screenshots
 
 截图无法查看？  
-掘金地址：[Flutter 仿微信/微博九宫格](https://juejin.im/post/5ee825ab5188251f3f07af75)  
+掘金地址：[Flutter 仿微信/微博九宫格](https://juejin.im/post/5ee825ab5188251f3f07af75)、[Flutter 仿QQ讨论组头像](https://juejin.im/post/5efd42665188252e6350d496)  
 简书地址：[Flutter 仿微信/微博九宫格](https://www.jianshu.com/p/73548cc82326)
 
 |<img src="screenshots/nine_grid_view1.jpg" width="260" height="513"/>|<img src="screenshots/nine_grid_view2.jpg" width="260" height="513"/>|<img src="screenshots/nine_grid_view3.jpg" width="260" height="513"/>|

diff --git a/README.md b/README.md
@@ -4,22 +4,23 @@ Language: English | [中文简体](README-ZH.md)
 
 ### NineGridView
 Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.  
-It also supports WeChat group and DingTalk group avatar effects.
+It also supports WeChat group , DingTalk group, QQ group avatar effects.
 
 ### DragSortView
 Similar to Weibo/WeChat release dynamic picture selection nine grid view. Support press to enlarge effect, drag and drop sorting, drag and drop to a specified location to delete.
 
 ### Pub
 ```yaml
 dependencies:
-  nine_grid_view: ^1.0.2
+  nine_grid_view: ^1.0.3
 ```
 
 ### Example
 
 ```yaml
 import 'package:nine_grid_view/nine_grid_view.dart';
 
+// bigImage param, It is recommended to use a medium-quality picture, because the original picture is too large and takes time to load.
 NineGridView(
   margin: EdgeInsets.all(12),
   padding: EdgeInsets.all(5),
@@ -29,6 +30,7 @@ NineGridView(
   itemBuilder: (BuildContext context, int index) {},
 );
 
+// It is recommended to use a thumbnail picture，because the original picture is too large, it may cause repeated loading and cause flashing.
 DragSortView(
   imageList,
   space: 5,
@@ -56,7 +58,7 @@ DragSortView(
 
 ### App
 A Weibo client app developed with Flutter [Fitness](https://github.com/Sky24n/Fitness)。  
-Apk ：[v0.0.2](https://github.com/Sky24n/Doc/blob/master/apks/fitness.apk) (arm64-v8a)
+Apk ：[v0.0.3](https://github.com/Sky24n/Doc/blob/master/apks/fitness.apk) (arm64-v8a)
 
 ### Others
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -42,8 +42,9 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
-  String _title = 'WeChat Group';
-  NineGridType _gridType = NineGridType.weChatGp;
+  String _title = 'QQ Group';
+
+  NineGridType _gridType = NineGridType.qqGp;
 
   List<ImageBean> imageList = List();
 
@@ -112,11 +113,57 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  Widget _buildGroup(BuildContext context) {
+    Decoration decoration = BoxDecoration(
+      color: Color(0XFFE5E5E5),
+      shape: BoxShape.rectangle,
+      borderRadius: BorderRadius.all(Radius.circular(4)),
+    );
+    int total;
+    switch (_gridType) {
+      case NineGridType.qqGp:
+        total = 5;
+        break;
+      case NineGridType.weChatGp:
+        total = 9;
+        break;
+      case NineGridType.dingTalkGp:
+        total = 4;
+        break;
+    }
+    List<Widget> children = List();
+    for (int i = 0; i < 9; i++) {
+      children.add(NineGridView(
+        width: (MediaQuery.of(context).size.width - 60) / 3,
+        height: (MediaQuery.of(context).size.width - 60) / 3,
+        padding: EdgeInsets.all(2),
+        margin: EdgeInsets.all(5),
+        alignment: Alignment.center,
+        space: 2,
+        arcAngle: 60,
+        type: _gridType,
+        decoration: _gridType == NineGridType.dingTalkGp ? null : decoration,
+        itemCount: i % total + 1,
+        itemBuilder: (BuildContext context, int index) {
+          ImageBean bean = imageList[index];
+          return Utils.getWidget(bean.middlePath);
+        },
+      ));
+    }
+    return Wrap(
+      alignment: WrapAlignment.center,
+      children: children,
+    );
+  }
+
   void _onPopSelected(NineGridType value) {
     print('Sky24n _onPopSelected...... $value');
     if (_gridType != value) {
       _gridType = value;
       switch (value) {
+        case NineGridType.qqGp:
+          _title = 'QQ Group';
+          break;
         case NineGridType.weChatGp:
           _title = 'WeChat Group';
           break;
@@ -150,6 +197,14 @@ class _HomePageState extends State<HomePage> {
               onSelected: _onPopSelected,
               itemBuilder: (BuildContext context) =>
                   <PopupMenuItem<NineGridType>>[
+                    PopupMenuItem<NineGridType>(
+                        value: NineGridType.qqGp,
+                        child: ListTile(
+                            contentPadding: EdgeInsets.all(0.0),
+                            dense: false,
+                            title: Text(
+                              'QQ Group',
+                            ))),
                     PopupMenuItem<NineGridType>(
                         value: NineGridType.weChatGp,
                         child: ListTile(
@@ -205,13 +260,28 @@ class _HomePageState extends State<HomePage> {
                   ]),
         ],
       ),
-      body: ListView.builder(
-          physics: BouncingScrollPhysics(),
-          itemCount: 9,
-          padding: EdgeInsets.all(0),
-          itemBuilder: (BuildContext context, int index) {
-            return _buildItem(context, index);
-          }),
+      body: (_gridType == NineGridType.qqGp ||
+              _gridType == NineGridType.weChatGp ||
+              _gridType == NineGridType.dingTalkGp)
+          ? ListView(
+              physics: AlwaysScrollableScrollPhysics(
+                  parent: BouncingScrollPhysics()),
+              children: <Widget>[
+                SizedBox(height: 15),
+                _buildGroup(context),
+                Offstage(
+                  offstage: _gridType != NineGridType.qqGp,
+                  child: QQGroup(),
+                ),
+              ],
+            )
+          : ListView.builder(
+              physics: BouncingScrollPhysics(),
+              itemCount: 9,
+              padding: EdgeInsets.all(0),
+              itemBuilder: (BuildContext context, int index) {
+                return _buildItem(context, index);
+              }),
       floatingActionButton: FloatingActionButton(
         onPressed: () {
           Utils.pushPage(context, DragSortPage());
@@ -221,3 +291,48 @@ class _HomePageState extends State<HomePage> {
     );
   }
 }
+
+class QQGroup extends StatefulWidget {
+  @override
+  _QQGroupState createState() => _QQGroupState();
+}
+
+class _QQGroupState extends State<QQGroup> with TickerProviderStateMixin {
+  AnimationController _controller;
+  List<ImageBean> imageList = List();
+
+  @override
+  void initState() {
+    super.initState();
+    imageList = Utils.getTestData();
+    _controller = AnimationController(
+        duration: Duration(milliseconds: 2000), vsync: this);
+    _controller.addListener(() {
+      setState(() {});
+    });
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: NineGridView(
+        width: 200,
+        height: 200,
+        arcAngle: (_controller.value * 180).round().toDouble(),
+        type: NineGridType.qqGp,
+        itemCount: 5,
+        itemBuilder: (BuildContext context, int index) {
+          ImageBean bean = imageList[index];
+          return Utils.getWidget(bean.middlePath);
+        },
+      ),
+    );
+  }
+}
diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -108,7 +108,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.0.2"
+    version: "1.0.3"
   path:
     dependency: transitive
     description:

diff --git a/lib/src/drag_sort_view.dart b/lib/src/drag_sort_view.dart
@@ -169,11 +169,11 @@ class DragSortViewState extends State<DragSortView>
 
   @override
   void dispose() {
-    super.dispose();
     _controller?.dispose();
     _zoomController?.dispose();
     _floatController?.dispose();
     _removeOverlay();
+    super.dispose();
   }
 
   /// init child size and positions.