Skip to content

Commit 6c27d4f

Browse files
wanwusangzhiwanwusangzhi
authored
Merge pull request #18 from efoxTeam/test
feat:优化首页交互逻辑
2 parents 8517b35 + a1f661b commit 6c27d4f

File tree

24 files changed

+781
-189
lines changed

24 files changed

+781
-189
lines changed

‎docs/widget/regular/listview/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## **ListView**

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
## **CustomScrollView**
2+
3+
> 一个使用slivers创建自定义的滚动效果的ScrollView
4+
5+
### 构造方法
6+
```
7+
CustomScrollView({
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+
Key center,
16+
double anchor = 0.0,
17+
double cacheExtent,
18+
this.slivers = const <Widget>[],
19+
int semanticChildCount,
20+
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
21+
})
22+
```
23+
24+
### 属性介绍
25+
> viewportBuilder：显示滚动组件的属性，实例CustomScrollView/SingleChildScrollView实现不同的滚动效果。
26+
- CustomScrollView: 实现随滚动条，appbar向上移动效果
27+
- SingleChildScrollView：参考SingleChildScrollView
28+
29+
### CustomScrollView
30+
> CustomScrollView：结合slivers使用,常用小组件为SliverAppBar, SliverGrid,SliverFixedExtentList
31+
> SliverAppBar: 滚动标题头小组件
32+
```dart
33+
SliverAppBar({
34+
Key key,
35+
this.leading,
36+
this.automaticallyImplyLeading = true,
37+
this.title,
38+
this.actions,
39+
this.flexibleSpace,
40+
this.bottom,
41+
this.elevation,
42+
this.forceElevated = false,
43+
this.backgroundColor,
44+
this.brightness,
45+
this.iconTheme,
46+
this.textTheme,
47+
this.primary = true,
48+
this.centerTitle,
49+
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
50+
this.expandedHeight,
51+
this.floating = false,
52+
this.pinned = false,
53+
this.snap = false,
54+
})
55+
56+
```
57+
- pinned: 默认为false, 非滚动至顶部时，标题头始终处于隐藏，当true时，标题头始终显示，但不会显示flexibleSpace内容
58+
- floating: 默认为false，当为true时，下拉会显示appbar，但不会自动展开flexibleSpace的内容
59+
- snap: 默认为false，当floating为true, 当前才能为true，向下拉时，会自动显示flexibleSpace的内容

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## **ListView**

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
## **GridView**
1+
## **Scrollable**
22

3-
>
4-
Scrollable是一个可滚动的组件，ListView、GridView都会间接使用到该组件。
3+
> 实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
54
65
### 构造方法
76
```
@@ -15,4 +14,9 @@ Scrollable({
1514
int semanticChildCount,
1615
DragStartBehavior dragStartBehavior: DragStartBehavior.down
1716
})
18-
```
17+
```
18+
19+
### 属性介绍
20+
> viewportBuilder：显示滚动组件的属性，实例CustomScrollView/SingleChildScrollView实现不同的滚动效果。
21+
- CustomScrollView: 实现随滚动条，appbar向上移动效果，具体参考CustomScrollView
22+
- SingleChildScrollView：具体参考SingleChildScrollView

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
## **SingleChildScrollView**
2+
> 当组件内容超出可视范围或高度时，可增加SingleChildScrollView，通过滚动解决问题
3+
4+
### 构造函数
5+
6+
```
7+
SingleChildScrollView({
8+
Key key,
9+
this.scrollDirection = Axis.vertical,
10+
this.reverse = false,
11+
this.padding,
12+
bool primary,
13+
this.physics,
14+
this.controller,
15+
this.child,
16+
this.dragStartBehavior = DragStartBehavior.down,
17+
});
18+
```
19+
20+
### 属性介绍
21+
> 滚动参数很多同等gridview介绍。
22+
23+
### 用例
24+
> 在固定容器超出屏幕高度则滚动显示
25+
```
26+
Container(
27+
decoration: BoxDecoration(
28+
border: Border.all(
29+
width: 1,
30+
color: Colors.blue,
31+
),
32+
),
33+
height: 100,
34+
child: SingleChildScrollView(
35+
child: Text(
36+
'这里是高度100，增加SingleChildScrollView, 内容超过时可滚动。这里是高度100，增加SingleChildScrollView, 内容超过时可滚动。这里是高度100，增加SingleChildScrollView, 内容超过时可滚动。这里是高度100，增加SingleChildScrollView, 内容超过时可滚动。',
37+
style: TextStyle(
38+
color: Colors.blue,
39+
),
40+
),
41+
),
42+
)
43+
```

‎lib/components/widgetComp.dart‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ class IndexState extends State<Index> {
9191
});
9292
}
9393

94-
openPage(context, model, String url) async {
94+
openPage(context, model) async {
95+
String url = this.mdUrl;
9596
// 加载页面
9697
if (model.config.state.isPro) {
9798
FluroRouter.router.navigateTo(context,
@@ -124,7 +125,7 @@ class IndexState extends State<Index> {
124125
Icons.code,
125126
),
126127
onPressed: () async {
127-
this.openPage(context, model, this.mdUrl);
128+
this.openPage(context, model);
128129
},
129130
),
130131
IconButton(

‎lib/page/component/index.dart‎

Lines changed: 76 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -12,102 +12,105 @@ class Index extends StatefulWidget {
1212
_IndexState createState() => _IndexState(model: this.model);
1313
}
1414

15-
class _IndexState extends State<Index> {
15+
class _IndexState extends State<Index> {
1616
final MainStateModel model;
17-
List mapList = [];
18-
int index;
17+
List _mapList = [];
18+
int _isExpandedIndex = -1;
19+
1920
_IndexState({Key key, this.model});
2021

2122
@override
2223
initState() {
2324
super.initState();
24-
this.mapList = WidgetRoot.getAllWidgets();
25+
this._mapList = WidgetRoot.getAllWidgets();
2526
}
2627

27-
/**
28-
* 渲染折叠板
29-
*/
30-
Widget renderExpanel(MainStateModel model, widgetsItem) {
28+
renderPanel(model, widgetsItem, index) {
3129
String nameSpaces = widgetsItem.nameSpaces;
3230
List _tmpWidgetList = widgetsItem.widgetList;
33-
return Container(
34-
margin: EdgeInsets.only(bottom: 10),
35-
child: ExpansionTile(
36-
title: Text(
37-
widgetsItem.typeName,
38-
style: TextStyle(
39-
fontSize: 20,
40-
fontWeight: FontWeight.bold,
41-
),
42-
),
43-
leading: Icon(
44-
IconData(
45-
widgetsItem.code ?? 58353,
46-
fontFamily: 'MaterialIcons',
47-
matchTextDirection: true,
31+
return ExpansionPanel(
32+
headerBuilder: (context, flag) {
33+
return Container(
34+
padding: EdgeInsets.all(10),
35+
child: ListTile(
36+
leading: Icon(
37+
IconData(
38+
widgetsItem.code,
39+
fontFamily: 'MaterialIcons',
40+
matchTextDirection: true,
41+
),
42+
),
43+
title: Text('${widgetsItem.typeName}'),
4844
),
49-
// color: Color(AppTheme.mainColor),
45+
);
46+
},
47+
body: Container(
48+
decoration: BoxDecoration(
49+
color: Color(AppTheme.thirdColor),
5050
),
51-
backgroundColor: Colors.white,
52-
children: [
53-
GridView.count(
54-
shrinkWrap: true,
55-
physics: NeverScrollableScrollPhysics(),
56-
childAspectRatio: 1,
57-
crossAxisCount: 3,
58-
children: List.generate(
59-
_tmpWidgetList.length,
60-
(index) {
61-
return Container(
62-
decoration: BoxDecoration(
63-
border: Border(
64-
bottom: BorderSide(
65-
width: .1,
66-
),
51+
padding: EdgeInsets.all(10),
52+
child: GridView.count(
53+
shrinkWrap: true,
54+
physics: ScrollPhysics(),
55+
crossAxisCount: 3,
56+
crossAxisSpacing: 10,
57+
mainAxisSpacing: 10,
58+
children: List.generate(_tmpWidgetList.length, (index) {
59+
return RaisedButton(
60+
color: Color(AppTheme.secondColor),
61+
splashColor: Color(AppTheme.mainColor),
62+
child: Column(
63+
crossAxisAlignment: CrossAxisAlignment.center,
64+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
65+
children: [
66+
Icon(
67+
IconData(
68+
_tmpWidgetList[index].code,
69+
fontFamily: 'MaterialIcons',
70+
matchTextDirection: true,
6771
),
72+
color: Color(AppTheme.mainColor),
73+
size: 48,
6874
),
69-
child: Column(
70-
mainAxisAlignment: MainAxisAlignment.center,
71-
children: [
72-
IconButton(
73-
iconSize: 48,
74-
icon: Icon(
75-
IconData(
76-
_tmpWidgetList[index].code ?? 59101,
77-
fontFamily: 'MaterialIcons',
78-
matchTextDirection: true,
79-
),
80-
color: Color(AppTheme.mainColor),
81-
),
82-
onPressed: () {
83-
FluroRouter.router.navigateTo(
84-
context,
85-
nameSpaces + _tmpWidgetList[index].title,
86-
);
87-
},
88-
),
89-
Text(
90-
_tmpWidgetList[index].title,
91-
),
92-
],
93-
),
75+
Text(
76+
'${_tmpWidgetList[index].title}',
77+
overflow: TextOverflow.ellipsis,
78+
)
79+
],
80+
),
81+
onPressed: () {
82+
FluroRouter.router.navigateTo(
83+
context,
84+
nameSpaces + _tmpWidgetList[index].title,
9485
);
9586
},
96-
),
97-
),
98-
],
87+
);
88+
}),
89+
),
9990
),
91+
isExpanded: _isExpandedIndex == index,
10092
);
10193
}
10294

10395
Widget build(BuildContext context) {
10496
return SingleChildScrollView(
10597
physics: BouncingScrollPhysics(),
106-
padding: EdgeInsets.all(10),
107-
child: Column(
108-
children: List.generate(mapList.length, (_index) {
109-
return renderExpanel(model, mapList[_index]);
110-
}),
98+
// padding: EdgeInsets.all(10),
99+
child: ExpansionPanelList(
100+
children: List.generate(
101+
_mapList.length,
102+
(_index) {
103+
return renderPanel(model, _mapList[_index], _index);
104+
},
105+
),
106+
expansionCallback: (index, flag) {
107+
if (flag) {
108+
index = -1;
109+
}
110+
setState(() {
111+
this._isExpandedIndex = index;
112+
});
113+
},
111114
),
112115
);
113116
}

0 commit comments

Comments
 (0)