From 2a67cdde7c7bbdd6e98d9fe625e5e710c0ecde56 Mon Sep 17 00:00:00 2001 From: KenZR Date: Mon, 11 Mar 2019 18:46:58 +0800 Subject: [PATCH 1/5] =?UTF-8?q?style:=E4=BC=98=E5=8C=96md=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 51 +++++++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/readme.md b/readme.md index d1acc73..b1dafc1 100644 --- a/readme.md +++ b/readme.md @@ -31,7 +31,7 @@ ``` ## 组件进度列表 -- animate +### animate 1. animationController【✔️ v1.0】 2. animatedbuilder【】 3. animatedcontainer【】 @@ -56,16 +56,15 @@ 22. slidetransition【】 -- bulletbox +### bulletbox 1. alertdialog【✔️ v1.0】 2. bottomsheet【✔️ v1.0】 3. expansionPanel【✔️ v1.0】 4. simpledialog【✔️ v1.0】 5. snackbar【✔️ v1.0】 -``` ### common -``` + 1. assetbundle【】 2. buttonbar【】 3. chip【】 @@ -82,37 +81,37 @@ 14. stepper【】 15. text【✔️ v1.0】 16. tooltip【】 -``` + ### form -``` + 1. checkbox【✔️ v1.0】 2. checkboxlisttile【✔️ v1.0】 3. slider【✔️ v1.0】 -3. daypicker【】 -4. form【】 -5. formfield【】 -6. radio【】 -7. rawkeyboard【】 -8. switch【】 -9. textfield【】 -10. textinput【】 -11. 【】 +4. daypicker【】 +5. form【】 +6. formfield【】 +7. radio【】 +8. rawkeyboard【】 +9. switch【】 +10. textfield【】 +11. textinput【】 12. 【】 -``` +13. 【】 + ### gestures -``` + 1. absorbpointer【】 2. dismissible【】 3. dragtarget【】 4. gesturedetector【】 5. ignorepointer【】 6. longpressdraggable【✔️ v1.0】 -``` + ### navigator -``` + 1. appbar【】 2. bottomnavigationbar【】 3. drawer【】 @@ -124,10 +123,10 @@ 9. tabbar【】 10. tabbarview【】 11. widgetsapp【】 -``` + ### regular -``` + 1. align【✔️ v1.0】 2. aspectratio【✔️ v1.0】 3. center【✔️ v1.0】 @@ -144,10 +143,10 @@ 14. stack【✔️ v1.0】 15. table【✔️ v1.0】 16. wrap【✔️ v1.0】 -``` + ### scrollview -``` + 1. customscrollview【✔️ v1.0】 2. gridview【✔️ v1.0】 3. listview【✔️ v1.0】 @@ -160,10 +159,10 @@ 10. 【】 11. 【】 12. 【】 -``` + ### vision -``` + 1. backdropfilter【】 2. clipoval【】 3. clippath【】 @@ -176,4 +175,4 @@ 10. rotatedbox【】 11. theme【】 12. transform【】 -``` + From b213a9265502f7f5b726042ecadd7e1efdf76f85 Mon Sep 17 00:00:00 2001 From: KenZR Date: Mon, 11 Mar 2019 18:48:37 +0800 Subject: [PATCH 2/5] =?UTF-8?q?style:=E4=BC=98=E5=8C=96md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index b1dafc1..71fd672 100644 --- a/readme.md +++ b/readme.md @@ -8,13 +8,13 @@ # 目录 ``` -——assets -——docs +——assets 静态资源 +——docs 教程文件 ——widget ——regular ——scrollview ... -——lib +——lib 代码文件 ——components ——config ——controller @@ -27,7 +27,7 @@ ——regular ——scrollview ... -——locale +——locale 语言包 ``` ## 组件进度列表 From 267780a2e5dd30e388fa1909a3b89945a4c5d0a6 Mon Sep 17 00:00:00 2001 From: KenZR Date: Mon, 11 Mar 2019 19:21:24 +0800 Subject: [PATCH 3/5] =?UTF-8?q?style:=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 97 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 74 insertions(+), 23 deletions(-) diff --git a/readme.md b/readme.md index 71fd672..a9a2266 100644 --- a/readme.md +++ b/readme.md @@ -1,33 +1,84 @@ -# Flutter UI v1.0 +# Flutter UI -# app预览 +> flutter ui 中文社区 提供各种flutter相关开发教程 + +## app预览 ![Alt 预览](readme/flutter_ui2.gif) ![Alt 预览](readme/flutter_ui3.gif) -# 目录 + +## 目录 ``` -——assets 静态资源 -——docs 教程文件 - ——widget - ——regular - ——scrollview - ... -——lib 代码文件 - ——components - ——config - ——controller - ——lang - ——page - ——router - ——store - ——utils - ——widget - ——regular - ——scrollview - ... -——locale 语言包 +Flutter UI + ├─assets 静态资源 + ├─docs 教程文件 + ├─widget + ├─regular + ├─scrollview + ... + ├─lib dart执行代码 + ├─components + ├─config + ├─controller + ├─lang + ├─page + │ ├─component + │ └─mine + ├─router + ├─store + │ ├─models + │ └─objects + ├─utils + └─widget + ├─animate + │ ├─animatedbuilder + │ ├─animatedcontainer + ...... + │ └─slidetransition + ├─bulletbox + │ ├─alertdialog + │ ├─bottomsheet + ...... + │ └─snackbar + ├─common + │ ├─assetbundle + │ ├─buttonbar + ...... + │ └─tooltip + ├─form + │ ├─checkbox + │ ├─checkboxlisttile + ...... + │ └─textinput + ├─gestures + │ ├─absorbpointer + │ ├─dismissible + ...... + │ └─longpressdraggable + ├─navigator + │ ├─appbar + │ ├─bottomnavigationbar + ...... + │ └─widgetsapp + ├─regular + │ ├─align + │ ├─aspectratio + ...... + │ └─wrap + ├─scrollview + │ ├─customscrollview + │ ├─gridview + ...... + │ └─singlechildscrollview + └─vision + ├─backdropfilter + ├─clipoval + ...... + └─transform + + ├─locale 语言包 ``` ## 组件进度列表 From acd8c7a66b3902c2c1731b5dc5d78632f2e94610 Mon Sep 17 00:00:00 2001 From: KenZR Date: Mon, 11 Mar 2019 19:25:36 +0800 Subject: [PATCH 4/5] =?UTF-8?q?style:=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 16657f6..153e295 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Flutter UI -> flutter ui 中文社区 提供各种flutter相关开发教程 +> flutter ui 开发者社区 提供各种flutter相关开发教程 ## app预览 From 2e464ca6072269b03fa82a4c2c7cb2aab5764133 Mon Sep 17 00:00:00 2001 From: wanwusangzhi <609780590@qq.com> Date: Mon, 11 Mar 2019 19:37:41 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96md=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/widget/scrollview/gridview/code.md | 152 ----------------------- docs/widget/scrollview/gridview/index.md | 108 ++++++++-------- 2 files changed, 51 insertions(+), 209 deletions(-) delete mode 100644 docs/widget/scrollview/gridview/code.md diff --git a/docs/widget/scrollview/gridview/code.md b/docs/widget/scrollview/gridview/code.md deleted file mode 100644 index e9650e9..0000000 --- a/docs/widget/scrollview/gridview/code.md +++ /dev/null @@ -1,152 +0,0 @@ -### GridView.count -``` -import 'package:flutter/material.dart'; -class Example extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('Gridview'), - ), - body: GridView.count( - crossAxisCount: 3, - reverse: false, - scrollDirection: Axis.vertical, - controller: ScrollController( - initialScrollOffset: 0.0, - ), - crossAxisSpacing: 10.0, - mainAxisSpacing: 20.0, - childAspectRatio: 2, - physics: BouncingScrollPhysics(), - primary: false, - children: List.generate(25, (index) { - return Container( - decoration: BoxDecoration( - border: Border.all( - color: Colors.redAccent, - ), - ), - child: Center( - child: Text('Item $index', - style: Theme.of(context).textTheme.headline), - ), - ); - }, growable: false), - ), - ); - } -} - -``` - -### GridView.extent -```extent -import 'package:flutter/material.dart'; - -class Index extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('GridView.extent'), - ), - body: GridView.extent( - scrollDirection: Axis.vertical, - maxCrossAxisExtent: 150, - mainAxisSpacing: 10, - crossAxisSpacing: 10, - childAspectRatio: 1, - padding: EdgeInsets.all(10), - children: List.generate( - 10, - (index) { - return Container( - decoration: BoxDecoration( - border: Border.all( - width: 0.1, - ) - ), - child: Image.network('https://dianhu-1253537286.cos.eu-moscow.myqcloud.com/efoxfile/Moschat/ojbk.png'), - ); - }, - ), - ), - ); - } -} - -``` - -### GridView.custom -```flutter -import 'package:flutter/material.dart'; - -class Index extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('GridView.costom'), - ), - body: GridView.custom( -// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( -// crossAxisCount: 10, // 单行最大10个元素布局 -// ), - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 100, // 单列最大宽度100 - ), - childrenDelegate: SliverChildBuilderDelegate( - (context, index) { - return Container( - child: Text('$index'), - ); - }, - // 滚动时回调函数 - semanticIndexCallback: (widget, index) { - print('index $index'); - }, - ), - // 数量滚滚动限制，类似GridView.count -// childrenDelegate: SliverChildListDelegate( -// List.generate(30, (index) { -// return Container( -// child: Text('index $index'), -// ); -// }), -// ), - ), - ); - } -} - -``` - -### GridView.builder -```flutter -import 'package:flutter/material.dart'; - -class Index extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('GridView.builder'), - ), - body: GridView.builder( - itemCount: 31, - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 3, // 单行最大数量值 - ), - itemBuilder: (context, index) { - print('index $index'); - return Center( - child: Text('index $index'), - ); - }, - ), - ); - } -} - -``` diff --git a/docs/widget/scrollview/gridview/index.md b/docs/widget/scrollview/gridview/index.md index 6336ee4..b648e16 100644 --- a/docs/widget/scrollview/gridview/index.md +++ b/docs/widget/scrollview/gridview/index.md @@ -1,7 +1,5 @@ ## **GridView** - -> -GridView是自带滚动的二维列表组件。 +> GridView是自带滚动的二维列表组件。 ### 构造方法 ``` @@ -23,6 +21,7 @@ GridView({ int semanticChildCount }) ``` + ### 高级用法 ``` GridView.builder // 动态加载，用于分页较多 @@ -102,52 +101,48 @@ GridView.extent }, ), ), - ); ``` > GridView.custom 动态创建子组件 - SliverGridDelegate gridDelegate : 布局相关 - SliverChildDelegate childrenDelegate：动态创建子组件 - ``` - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount 单行最大数量布局 - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 10, // 单行最大10个元素布局 - ), - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent 单列最大宽度布局 - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 100, // 单列最大宽度100 - ), - // 创建无限滚动 - childrenDelegate: SliverChildBuilderDelegate( - (context, index) { - return Container( - child: Text('$index'), - ); - }, - // 滚动时回调函数 - semanticIndexCallback: (widget, index) { - print('index $index'); - }, - ), - // 创建有数量的滚动 - childrenDelegate: SliverChildListDelegate( - List.generate(30, (index) { - return Container( - child: Text('index $index'), - ); - }), - ), + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount // 单行最大数量布局 + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 10, // 单行最大10个元素布局 + ), + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent // 单列最大宽度布局 + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 100, // 单列最大宽度100 + ), + childrenDelegate: SliverChildBuilderDelegate( // 创建无限滚动 + (context, index) { + return Container( + child: Text('$index'), + ); + }, + semanticIndexCallback: (widget, index) { // 滚动时回调函数 + print('index $index'); + }, + ), + childrenDelegate: SliverChildListDelegate( // 创建有数量的滚动 + List.generate(30, (index) { + return Container( + child: Text('index $index'), + ); + }), + ), ``` + ``` GridView.custom( // gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // crossAxisCount: 10, // 单行最大10个元素布局 // ), - gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 100, // 单列最大宽度100 - ), + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 100, // 单列最大宽度100 + ), // childrenDelegate: SliverChildBuilderDelegate( // (context, index) { // return Container( @@ -159,15 +154,15 @@ GridView.extent // print('index $index'); // }, // ), - // 数量滚滚动限制，类似GridView.count - childrenDelegate: SliverChildListDelegate( - List.generate(30, (index) { - return Container( - child: Text('index $index'), - ); - }), - ), - ) + // 数量滚滚动限制，类似GridView.count + childrenDelegate: SliverChildListDelegate( + List.generate(30, (index) { + return Container( + child: Text('index $index'), + ); + }), + ), + ) ``` > GridView.builder @@ -175,20 +170,19 @@ GridView.extent - itemCount： 子组件最大数量，默认没有限制。效果跟GridView.custom一致 - gridDelegate：设置布局，单行最大布局数量或单列单项最大长度，参考GridView.custom - itemBuilder：子组件动态加载回调方法，长度受itemCount值影响，itemCount不为0且存在时，数量需小于itemCount值 - ``` GridView.builder( - itemCount: 31, - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 3, // 单行最大数量值 - ), - itemBuilder: (context, index) { - print('index $index'); - return Center( - child: Text('index $index'), - ); - }, - ), + itemCount: 31, + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 3, // 单行最大数量值 + ), + itemBuilder: (context, index) { + print('index $index'); + return Center( + child: Text('index $index'), + ); + }, + ), ``` ### 其它补充