diff --git a/docs/widget/scrollview/gridview/code.md b/docs/widget/scrollview/gridview/code.md index ccab53d..c70cf3d 100644 --- a/docs/widget/scrollview/gridview/code.md +++ b/docs/widget/scrollview/gridview/code.md @@ -1,22 +1,40 @@ -### ***GridView*** - -> GridView可创建一个二维的网格布局 ``` +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({ - Key key, - Axis scrollDirection: Axis.vertical, - bool reverse: false, - ScrollController controller, - bool primary, - ScrollPhysics physics, - bool shrinkWrap: false, - EdgeInsetsGeometry padding, - @required SliverGridDelegate gridDelegate, - bool addAutomaticKeepAlives: true, - bool addRepaintBoundaries: true, - bool addSemanticIndexes: true, - double cacheExtent, - List<Widget> children: const [], - int semanticChildCount -}) +``` \ No newline at end of file diff --git a/docs/widget/scrollview/gridview/index.md b/docs/widget/scrollview/gridview/index.md index c0dee0c..ac74488 100644 --- a/docs/widget/scrollview/gridview/index.md +++ b/docs/widget/scrollview/gridview/index.md @@ -1,48 +1,80 @@ -``` - -class _DemoState extends State<Demo> { - bool loading = true; - String ___MD___ = _mdUrl; +## ***GridView*** - @override - void initState() { - super.initState(); - this.initMd(); - } +> GridView是自带滚动的二维列表组件。 - initMd() async { - String mdStr = await FileUtils.readLocaleFile(___MD___); - setState(() { - this.___MD___ = mdStr; - loading = false; - }); - } +### 构造方法 +``` +GridView({ + Key key, + Axis scrollDirection: Axis.vertical, + bool reverse: false, + ScrollController controller, + bool primary, + ScrollPhysics physics, + bool shrinkWrap: false, + EdgeInsetsGeometry padding, + @required SliverGridDelegate gridDelegate, + bool addAutomaticKeepAlives: true, + bool addRepaintBoundaries: true, + bool addSemanticIndexes: true, + double cacheExtent, + List<Widget> children: const [], + int semanticChildCount +}) +``` +### 进阶用法 +``` +GridView.builder // 动态加载,用于分页较多 +GridView.count // 指定数据加载 +GridView.custom +GridView.extent +``` - @override - Widget build(BuildContext context) { - return WidgetComp( - name: Demo.name, - codeUrl: Demo.codeUrl, - mdUrl: Demo.mdUrl, - loading: loading, - modelChild: (context, child, model) { - return [ - ___MD___, - Container( - color: Colors.teal.shade700, - alignment: Alignment.center, - child: Text( - 'Hello WorldHello WorldHello WorldHello WorldHello World', - style: Theme.of(context) - .textTheme - .display1 - .copyWith(color: Colors.white), - ), - ), - ]; - }, +### 用例 +* GridView.count +> +crossAxisCount:必填,指定列数 +children: 子组件 +reverse:默认false, 当为true时反转滚动方向,即上到下反转成下到上,左到右反转成右到左 +controller: ScrollController类,能初始化滚动相关的属性,如位置,也能监听滚动变化 +primary: 默认true, 当填充数量调试不足以产生滚动条,滚动组件时,不影响最外层滚动条,即界面不随着手势滚动。 +primary: false, 且controller=null(或者ScrollContorller中的initialScrollOffset属性为0),GridView.count的数量较少不足产生滚动条时,滚动主体为最外层滚动条。 +physics: ScrollPhysics类,影响视图与用户输入交互。 +shrinkWrap: 默认false, 滚动视图内容展开和收缩时不重新计算视图大小,例如外层height=200, 滚动的内容可能增加了expendTile,展开后的内容超过了200高,这时候会报错,此时修改shrinkWrap=true,即滚动视图会重新计算。 +scrollDirection:默认Axis.vertical.,垂直方向,可通过Axis.horizontal修改为水平方向。 +mainAxisSpacing: 主轴方向间距, 主轴方向由scrollDirection确定 +crossAxisSpacing: 副轴方向间距, +childAspectRatio: 子元素中宽高比,宽度由ViewPort/crossAxisCount确定 + +``` +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(15, (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), + ), +); ``` + +>ScrollPhysics类: +* BouncingScrollPhysics,ClampingScrollPhysics,AlwaysScrollableScrollPhysics,NeverScrollableScrollPhysics \ No newline at end of file diff --git a/lib/components/exampleComp.dart b/lib/components/exampleComp.dart new file mode 100644 index 0000000..9db343b --- /dev/null +++ b/lib/components/exampleComp.dart @@ -0,0 +1,22 @@ +import 'package:flutter/material.dart'; + +class ExampleComp extends StatelessWidget { + final Widget child; + + ExampleComp({Key key, this.child}):super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + height: 420.0, + margin: EdgeInsets.fromLTRB(50, 40, 50, 40), + decoration: BoxDecoration( + border: Border.all( + color: Colors.deepOrange, + width: 1.0 + ), + ), + child: this.child, + ); + } +} \ No newline at end of file diff --git a/lib/components/webviewComp.dart b/lib/components/webviewComp.dart index 0f21af1..85c911e 100644 --- a/lib/components/webviewComp.dart +++ b/lib/components/webviewComp.dart @@ -6,6 +6,12 @@ class WebViewComp extends StatelessWidget { final String title; WebViewComp({Key key, @required this.url, this.title}) : super(key: key); + void controller() { + final flutterWebviewPlugin = new FlutterWebviewPlugin(); + flutterWebviewPlugin.onUrlChanged.listen((String url) { + print('url ${url}'); + }); + } @override Widget build(BuildContext context) { return WebviewScaffold( @@ -13,6 +19,14 @@ class WebViewComp extends StatelessWidget { appBar: new AppBar( title: new Text("Webview"), ), + withZoom: true, + withLocalStorage: true, + hidden: true, + // initialChild: Container( + // child: const Center( + // child: CircularProgressIndicator(), + // ), + // ), ); } } diff --git a/lib/components/widgetLodingComp.dart b/lib/components/widgetLodingComp.dart index 780f4a1..98a69a5 100644 --- a/lib/components/widgetLodingComp.dart +++ b/lib/components/widgetLodingComp.dart @@ -3,12 +3,14 @@ import 'package:efox_flutter/store/STORE.dart'; import 'package:efox_flutter/components/markdownComp.dart'; import 'package:efox_flutter/lang/app_translations.dart'; import 'package:efox_flutter/components/baseComp.dart'; +import 'package:efox_flutter/components/exampleComp.dart'; import 'package:efox_flutter/utils/file.dart' as FileUtils; import 'package:efox_flutter/router/index.dart' show FluroRouter; class WidgetComp extends StatelessWidget { final List<Widget> _bodyList = []; final dynamic modelChild; + final List<Widget> demoChild; final String codeUrl; final String mdUrl; final String name; @@ -18,6 +20,7 @@ class WidgetComp extends StatelessWidget { Key key, this.name, @required this.modelChild, + this.demoChild, this.loading, this.codeUrl, this.mdUrl, @@ -26,6 +29,7 @@ class WidgetComp extends StatelessWidget { @override Widget build(BuildContext context) { return STORE.connect(builder: (context, child, model) { + _bodyList.length = 0; List _list = this.modelChild(context, child, model); _list.forEach((item) { if (item.runtimeType == String) { @@ -34,6 +38,13 @@ class WidgetComp extends StatelessWidget { _bodyList.add(item); } }); + // 增加 + if (this.demoChild != null){ + this.demoChild.forEach((Widget item) { + _bodyList.add(ExampleComp(child: item)); + }); + } + return Scaffold( appBar: AppBar( title: Text(this.name), diff --git a/lib/router/scrollview/index.dart b/lib/router/scrollview/index.dart deleted file mode 100644 index c0a18a4..0000000 --- a/lib/router/scrollview/index.dart +++ /dev/null @@ -1,21 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:efox_flutter/widget/scrollview/gridview/index.dart' as GridViewDemo; -import 'package:fluro/fluro.dart'; - -const nameSpaces = '/scrollview_'; -const gridview = nameSpaces + 'gridview'; - -const routerMaps = { - gridview: '/widget/scrollview/gridview/index', -}; - -void initRouter(router) { - router.define( - gridview, - handler: Handler( - handlerFunc: (BuildContext context, Map<String, dynamic> params) { - return GridViewDemo.Demo(); - }, - ), - ); -} diff --git a/lib/utils/file.dart b/lib/utils/file.dart index 9bc669b..f9591aa 100644 --- a/lib/utils/file.dart +++ b/lib/utils/file.dart @@ -1,6 +1,6 @@ import 'package:flutter/services.dart' show rootBundle; Future<String> readLocaleFile (path) async { - String content = await rootBundle.loadString('${path}'); + String content = await rootBundle.loadString('${path}', cache: false); return content; } \ No newline at end of file diff --git a/lib/widget/scrollview/gridview/demo.dart b/lib/widget/scrollview/gridview/demo.dart new file mode 100644 index 0000000..7d1c0a2 --- /dev/null +++ b/lib/widget/scrollview/gridview/demo.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; +import 'dart:math'; +class Example extends StatelessWidget { + @override + Widget build(BuildContext context) { + int _value = Random().nextInt(60); + return Scaffold( + appBar: AppBar( + title: Text('Gridview ${_value} items'), + ), + 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(_value, (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), + ), + ); + } +} diff --git a/lib/widget/scrollview/gridview/index.dart b/lib/widget/scrollview/gridview/index.dart index 1f1c7f0..c1a99cd 100644 --- a/lib/widget/scrollview/gridview/index.dart +++ b/lib/widget/scrollview/gridview/index.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:efox_flutter/components/widgetLodingComp.dart'; +import 'demo.dart' as Example; import 'package:efox_flutter/utils/file.dart' as FileUtils; String _mdUrl = 'docs/widget/scrollview/gridview/index.md'; @@ -7,7 +8,8 @@ String _mdUrl = 'docs/widget/scrollview/gridview/index.md'; class Demo extends StatefulWidget { static String name = 'GridView'; static String routerName = 'gridview'; - static String codeUrl = 'https://github.com/efoxTeam/flutter-ui/blob/master/readme.md'; + static String originUrl = 'https://flutter.io/docs/cookbook/lists/grid-lists'; + static String codeUrl = 'https://github.com/efoxTeam/flutter-ui/blob/master/docs/widget/scrollview/gridview/code.md'; static String mdUrl = _mdUrl; @override @@ -42,19 +44,11 @@ class _DemoState extends State<Demo> { modelChild: (context, child, model) { return [ ___MD___, - Container( - color: Colors.teal.shade700, - alignment: Alignment.center, - child: Text( - 'Hello WorldHello WorldHello WorldHello WorldHello World', - style: Theme.of(context) - .textTheme - .display1 - .copyWith(color: Colors.white), - ), - ), ]; }, + demoChild: [ + Example.Example(), + ] ); } }