Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b81ff8f

Browse files
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
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+
```
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
}
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)

AltStyle によって変換されたページ (->オリジナル) /