Skip to content

Commit b81ff8f

Browse files
wanwusangzhiwanwusangzhi
authored
Merge pull request #5 from efoxTeam/ysz
Ysz
2 parents e56c7b0 + fedd598 commit b81ff8f

File tree

9 files changed

+206
-97
lines changed

9 files changed

+206
-97
lines changed

‎docs/widget/scrollview/gridview/code.md

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
1-
### ***GridView***
2-
3-
> GridView可创建一个二维的网格布局
41
```
2+
import 'package:flutter/material.dart';
3+
class Example extends StatelessWidget {
4+
@override
5+
Widget build(BuildContext context) {
6+
return Scaffold(
7+
appBar: AppBar(
8+
title: Text('Gridview'),
9+
),
10+
body: GridView.count(
11+
crossAxisCount: 3,
12+
reverse: false,
13+
scrollDirection: Axis.vertical,
14+
controller: ScrollController(
15+
initialScrollOffset: 0.0,
16+
),
17+
crossAxisSpacing: 10.0,
18+
mainAxisSpacing: 20.0,
19+
childAspectRatio: 2,
20+
physics: BouncingScrollPhysics(),
21+
primary: false,
22+
children: List.generate(25, (index) {
23+
return Container(
24+
decoration: BoxDecoration(
25+
border: Border.all(
26+
color: Colors.redAccent,
27+
),
28+
),
29+
child: Center(
30+
child: Text('Item $index',
31+
style: Theme.of(context).textTheme.headline),
32+
),
33+
);
34+
}, growable: false),
35+
),
36+
);
37+
}
38+
}
539
6-
GridView({
7-
Key key,
8-
Axis scrollDirection: Axis.vertical,
9-
bool reverse: false,
10-
ScrollController controller,
11-
bool primary,
12-
ScrollPhysics physics,
13-
bool shrinkWrap: false,
14-
EdgeInsetsGeometry padding,
15-
@required SliverGridDelegate gridDelegate,
16-
bool addAutomaticKeepAlives: true,
17-
bool addRepaintBoundaries: true,
18-
bool addSemanticIndexes: true,
19-
double cacheExtent,
20-
List<Widget> children: const [],
21-
int semanticChildCount
22-
})
40+
```

‎docs/widget/scrollview/gridview/index.md

Lines changed: 75 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,80 @@
1-
```
2-
3-
class _DemoState extends State<Demo> {
4-
bool loading = true;
5-
String ___MD___ = _mdUrl;
1+
## ***GridView***
62

7-
@override
8-
void initState() {
9-
super.initState();
10-
this.initMd();
11-
}
3+
> GridView是自带滚动的二维列表组件。
124
13-
initMd() async {
14-
String mdStr = await FileUtils.readLocaleFile(___MD___);
15-
setState(() {
16-
this.___MD___ = mdStr;
17-
loading = false;
18-
});
19-
}
5+
### 构造方法
6+
```
7+
GridView({
8+
Key key,
9+
Axis scrollDirection: Axis.vertical,
10+
bool reverse: false,
11+
ScrollController controller,
12+
bool primary,
13+
ScrollPhysics physics,
14+
bool shrinkWrap: false,
15+
EdgeInsetsGeometry padding,
16+
@required SliverGridDelegate gridDelegate,
17+
bool addAutomaticKeepAlives: true,
18+
bool addRepaintBoundaries: true,
19+
bool addSemanticIndexes: true,
20+
double cacheExtent,
21+
List<Widget> children: const [],
22+
int semanticChildCount
23+
})
24+
```
25+
### 进阶用法
26+
```
27+
GridView.builder // 动态加载，用于分页较多
28+
GridView.count // 指定数据加载
29+
GridView.custom
30+
GridView.extent
31+
```
2032

21-
@override
22-
Widget build(BuildContext context) {
23-
return WidgetComp(
24-
name: Demo.name,
25-
codeUrl: Demo.codeUrl,
26-
mdUrl: Demo.mdUrl,
27-
loading: loading,
28-
modelChild: (context, child, model) {
29-
return [
30-
___MD___,
31-
Container(
32-
color: Colors.teal.shade700,
33-
alignment: Alignment.center,
34-
child: Text(
35-
'Hello WorldHello WorldHello WorldHello WorldHello World',
36-
style: Theme.of(context)
37-
.textTheme
38-
.display1
39-
.copyWith(color: Colors.white),
40-
),
41-
),
42-
];
43-
},
33+
### 用例
34+
* GridView.count
35+
>
36+
crossAxisCount：必填，指定列数
37+
children: 子组件
38+
reverse：默认false, 当为true时反转滚动方向，即上到下反转成下到上，左到右反转成右到左
39+
controller: ScrollController类，能初始化滚动相关的属性，如位置，也能监听滚动变化
40+
primary: 默认true, 当填充数量调试不足以产生滚动条，滚动组件时，不影响最外层滚动条，即界面不随着手势滚动。
41+
primary: false, 且controller=null（或者ScrollContorller中的initialScrollOffset属性为0），GridView.count的数量较少不足产生滚动条时，滚动主体为最外层滚动条。
42+
physics: ScrollPhysics类，影响视图与用户输入交互。
43+
shrinkWrap: 默认false, 滚动视图内容展开和收缩时不重新计算视图大小，例如外层height=200, 滚动的内容可能增加了expendTile，展开后的内容超过了200高，这时候会报错，此时修改shrinkWrap=true，即滚动视图会重新计算。
44+
scrollDirection：默认Axis.vertical.，垂直方向，可通过Axis.horizontal修改为水平方向。
45+
mainAxisSpacing: 主轴方向间距, 主轴方向由scrollDirection确定
46+
crossAxisSpacing: 副轴方向间距,
47+
childAspectRatio: 子元素中宽高比，宽度由ViewPort/crossAxisCount确定
48+
49+
```
50+
GridView.count(
51+
crossAxisCount: 3,
52+
reverse: false,
53+
scrollDirection: Axis.vertical,
54+
controller: ScrollController(
55+
initialScrollOffset: 0.0,
56+
),
57+
crossAxisSpacing: 10.0,
58+
mainAxisSpacing: 20.0,
59+
childAspectRatio: 2,
60+
physics: BouncingScrollPhysics(),
61+
primary: false,
62+
children: List.generate(15, (index) {
63+
return Container(
64+
decoration: BoxDecoration(
65+
border: Border.all(
66+
color: Colors.redAccent,
67+
),
68+
),
69+
child: Center(
70+
child: Text('Item $index',
71+
style: Theme.of(context).textTheme.headline),
72+
),
4473
);
45-
}
46-
}
47-
74+
}, growable: false),
75+
),
76+
);
4877
```
78+
79+
>ScrollPhysics类:
80+
* BouncingScrollPhysics，ClampingScrollPhysics，AlwaysScrollableScrollPhysics，NeverScrollableScrollPhysics

‎lib/components/exampleComp.dart

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import 'package:flutter/material.dart';
2+
3+
class ExampleComp extends StatelessWidget {
4+
final Widget child;
5+
6+
ExampleComp({Key key, this.child}):super(key: key);
7+
8+
@override
9+
Widget build(BuildContext context) {
10+
return Container(
11+
height: 420.0,
12+
margin: EdgeInsets.fromLTRB(50, 40, 50, 40),
13+
decoration: BoxDecoration(
14+
border: Border.all(
15+
color: Colors.deepOrange,
16+
width: 1.0
17+
),
18+
),
19+
child: this.child,
20+
);
21+
}
22+
}

‎lib/components/webviewComp.dart

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,27 @@ class WebViewComp extends StatelessWidget {
66
final String title;
77
WebViewComp({Key key, @required this.url, this.title}) : super(key: key);
88

9+
void controller() {
10+
final flutterWebviewPlugin = new FlutterWebviewPlugin();
11+
flutterWebviewPlugin.onUrlChanged.listen((String url) {
12+
print('url ${url}');
13+
});
14+
}
915
@override
1016
Widget build(BuildContext context) {
1117
return WebviewScaffold(
1218
url: this.url,
1319
appBar: new AppBar(
1420
title: new Text("Webview"),
1521
),
22+
withZoom: true,
23+
withLocalStorage: true,
24+
hidden: true,
25+
// initialChild: Container(
26+
// child: const Center(
27+
// child: CircularProgressIndicator(),
28+
// ),
29+
// ),
1630
);
1731
}
1832
}

‎lib/components/widgetLodingComp.dart

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import 'package:efox_flutter/store/STORE.dart';
33
import 'package:efox_flutter/components/markdownComp.dart';
44
import 'package:efox_flutter/lang/app_translations.dart';
55
import 'package:efox_flutter/components/baseComp.dart';
6+
import 'package:efox_flutter/components/exampleComp.dart';
67
import 'package:efox_flutter/utils/file.dart' as FileUtils;
78
import 'package:efox_flutter/router/index.dart' show FluroRouter;
89

910
class WidgetComp extends StatelessWidget {
1011
final List<Widget> _bodyList = [];
1112
final dynamic modelChild;
13+
final List<Widget> demoChild;
1214
final String codeUrl;
1315
final String mdUrl;
1416
final String name;
@@ -18,6 +20,7 @@ class WidgetComp extends StatelessWidget {
1820
Key key,
1921
this.name,
2022
@required this.modelChild,
23+
this.demoChild,
2124
this.loading,
2225
this.codeUrl,
2326
this.mdUrl,
@@ -26,6 +29,7 @@ class WidgetComp extends StatelessWidget {
2629
@override
2730
Widget build(BuildContext context) {
2831
return STORE.connect(builder: (context, child, model) {
32+
_bodyList.length = 0;
2933
List _list = this.modelChild(context, child, model);
3034
_list.forEach((item) {
3135
if (item.runtimeType == String) {
@@ -34,6 +38,13 @@ class WidgetComp extends StatelessWidget {
3438
_bodyList.add(item);
3539
}
3640
});
41+
// 增加
42+
if (this.demoChild != null){
43+
this.demoChild.forEach((Widget item) {
44+
_bodyList.add(ExampleComp(child: item));
45+
});
46+
}
47+
3748
return Scaffold(
3849
appBar: AppBar(
3950
title: Text(this.name),

‎lib/router/scrollview/index.dart

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎lib/utils/file.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import 'package:flutter/services.dart' show rootBundle;
22

33
Future<String> readLocaleFile (path) async {
4-
String content = await rootBundle.loadString('${path}');
4+
String content = await rootBundle.loadString('${path}', cache: false);
55
return content;
66
}

‎lib/widget/scrollview/gridview/demo.dart

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:math';
3+
class Example extends StatelessWidget {
4+
@override
5+
Widget build(BuildContext context) {
6+
int _value = Random().nextInt(60);
7+
return Scaffold(
8+
appBar: AppBar(
9+
title: Text('Gridview ${_value} items'),
10+
),
11+
body: GridView.count(
12+
crossAxisCount: 3,
13+
reverse: false,
14+
scrollDirection: Axis.vertical,
15+
controller: ScrollController(
16+
initialScrollOffset: 0.0,
17+
),
18+
crossAxisSpacing: 10.0,
19+
mainAxisSpacing: 20.0,
20+
childAspectRatio: 2,
21+
physics: BouncingScrollPhysics(),
22+
primary: false,
23+
children: List.generate(_value, (index) {
24+
return Container(
25+
decoration: BoxDecoration(
26+
border: Border.all(
27+
color: Colors.redAccent,
28+
),
29+
),
30+
child: Center(
31+
child: Text('Item $index',
32+
style: Theme.of(context).textTheme.headline),
33+
),
34+
);
35+
}, growable: false),
36+
),
37+
);
38+
}
39+
}

‎lib/widget/scrollview/gridview/index.dart

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import 'package:flutter/material.dart';
22
import 'package:efox_flutter/components/widgetLodingComp.dart';
3+
import 'demo.dart' as Example;
34
import 'package:efox_flutter/utils/file.dart' as FileUtils;
45

56
String _mdUrl = 'docs/widget/scrollview/gridview/index.md';
67

78
class Demo extends StatefulWidget {
89
static String name = 'GridView';
910
static String routerName = 'gridview';
10-
static String codeUrl = 'https://github.com/efoxTeam/flutter-ui/blob/master/readme.md';
11+
static String originUrl = 'https://flutter.io/docs/cookbook/lists/grid-lists';
12+
static String codeUrl = 'https://github.com/efoxTeam/flutter-ui/blob/master/docs/widget/scrollview/gridview/code.md';
1113
static String mdUrl = _mdUrl;
1214

1315
@override
@@ -42,19 +44,11 @@ class _DemoState extends State<Demo> {
4244
modelChild: (context, child, model) {
4345
return [
4446
___MD___,
45-
Container(
46-
color: Colors.teal.shade700,
47-
alignment: Alignment.center,
48-
child: Text(
49-
'Hello WorldHello WorldHello WorldHello WorldHello World',
50-
style: Theme.of(context)
51-
.textTheme
52-
.display1
53-
.copyWith(color: Colors.white),
54-
),
55-
),
5647
];
5748
},
49+
demoChild: [
50+
Example.Example(),
51+
]
5852
);
5953
}
6054
}

0 commit comments

Comments
 (0)