Skip to content

Commit f267807

Browse files
wanwusangzhiwanwusangzhi
committed
feat: add scrollable
1 parent 0475ded commit f267807

File tree

20 files changed

+713
-234
lines changed

20 files changed

+713
-234
lines changed

‎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/page/component/index.dart‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ 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;
1717
List mapList = [];
1818
int index;
19+
1920
_IndexState({Key key, this.model});
2021

2122
@override
@@ -31,6 +32,9 @@ class _IndexState extends State<Index> {
3132
String nameSpaces = widgetsItem.nameSpaces;
3233
List _tmpWidgetList = widgetsItem.widgetList;
3334
return ExpansionTile(
35+
onExpansionChanged: (isOpen) {
36+
print(isOpen);
37+
},
3438
title: Text(
3539
widgetsItem.typeName,
3640
style: TextStyle(
@@ -40,57 +44,66 @@ class _IndexState extends State<Index> {
4044
),
4145
leading: Icon(
4246
IconData(
43-
widgetsItem.code ?? 58353,
47+
widgetsItem.code,
4448
fontFamily: 'MaterialIcons',
4549
matchTextDirection: true,
4650
),
4751
// color: Color(AppTheme.mainColor),
4852
),
49-
backgroundColor: Colors.white,
53+
backgroundColor: Colors.grey.shade100.withOpacity(0.1),
5054
children: [
51-
GridView.count(
52-
shrinkWrap: true,
53-
physics: NeverScrollableScrollPhysics(),
54-
childAspectRatio: 1,
55-
crossAxisCount: 3,
56-
children: List.generate(
57-
_tmpWidgetList.length,
58-
(index) {
59-
return Container(
60-
decoration: BoxDecoration(
61-
border: Border(
62-
bottom: BorderSide(
63-
width: .1,
55+
Container(
56+
decoration: BoxDecoration(
57+
color: Colors.grey.shade100,
58+
borderRadius: BorderRadius.all(
59+
Radius.circular(20),
60+
),
61+
),
62+
child: GridView.count(
63+
shrinkWrap: true,
64+
physics: NeverScrollableScrollPhysics(),
65+
childAspectRatio: 1,
66+
crossAxisCount: 3,
67+
children: List.generate(
68+
_tmpWidgetList.length,
69+
(index) {
70+
return Container(
71+
decoration: BoxDecoration(
72+
border: Border(
73+
bottom: BorderSide(
74+
width: .1,
75+
),
6476
),
6577
),
66-
),
67-
child: Column(
68-
mainAxisAlignment: MainAxisAlignment.center,
69-
children: [
70-
IconButton(
71-
iconSize: 48,
72-
icon: Icon(
73-
IconData(
74-
_tmpWidgetList[index].code ?? 59101,
75-
fontFamily: 'MaterialIcons',
76-
matchTextDirection: true,
78+
child: Column(
79+
mainAxisAlignment: MainAxisAlignment.center,
80+
children: [
81+
IconButton(
82+
iconSize: 48,
83+
icon: Icon(
84+
IconData(
85+
_tmpWidgetList[index].code ?? 59101,
86+
fontFamily: 'MaterialIcons',
87+
matchTextDirection: true,
88+
),
89+
color: Color(AppTheme.mainColor),
7790
),
78-
color: Color(AppTheme.mainColor),
91+
onPressed: () {
92+
FluroRouter.router.navigateTo(
93+
context,
94+
nameSpaces + _tmpWidgetList[index].title,
95+
);
96+
},
7997
),
80-
onPressed: () {
81-
FluroRouter.router.navigateTo(
82-
context,
83-
nameSpaces + _tmpWidgetList[index].title,
84-
);
85-
},
86-
),
87-
Text(
88-
_tmpWidgetList[index].title,
89-
),
90-
],
91-
),
92-
);
93-
},
98+
Text(
99+
_tmpWidgetList[index].title,
100+
overflow: TextOverflow.ellipsis,
101+
),
102+
],
103+
),
104+
);
105+
},
106+
),
94107
),
95108
),
96109
],

‎lib/page/home.dart‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@ import 'package:flutter/material.dart';
22
import 'package:efox_flutter/lang/application.dart';
33
import 'package:efox_flutter/lang/app_translations.dart';
44
import 'package:flutter_screenutil/flutter_screenutil.dart';
5-
//
6-
import 'package:efox_flutter/store/store.dart' show Store, MainStateModel;
5+
import 'package:efox_flutter/store/store.dart' show Store;
76

87
import 'package:efox_flutter/components/header.dart' as Header;
98
import 'component/index.dart' as TabIndex;
109
import 'mine/index.dart' as MyIndex;
11-
import 'package:efox_flutter/config/theme.dart' show AppTheme;
1210

1311
class Index extends StatefulWidget {
1412
@override
@@ -31,55 +29,6 @@ class _IndexState extends State<Index> with SingleTickerProviderStateMixin {
3129
super.dispose();
3230
}
3331

34-
//::TODO 保留到下个版本 考虑去掉
35-
Widget menu(MainStateModel model) {
36-
return Container(
37-
decoration: BoxDecoration(
38-
border: Border(
39-
top: BorderSide(
40-
width: .1,
41-
color: Color(AppTheme.greyColor),
42-
),
43-
),
44-
),
45-
child: TabBar(
46-
indicator: BoxDecoration(
47-
border: Border(
48-
bottom: BorderSide(
49-
width: .2,
50-
color: Color(AppTheme.mainColor),
51-
),
52-
),
53-
),
54-
labelColor: Color(AppTheme.mainColor),
55-
unselectedLabelColor: Color(AppTheme.greyColor),
56-
indicatorSize: TabBarIndicatorSize.tab,
57-
indicatorColor: Color(AppTheme.secondColor),
58-
labelStyle: TextStyle(
59-
color: Colors.green,
60-
fontWeight: FontWeight.w700,
61-
fontSize: 16,
62-
),
63-
tabs: [
64-
Tab(
65-
text: AppTranslations.of(context).t('title_component'),
66-
icon: Icon(
67-
Icons.dashboard,
68-
size: 28,
69-
),
70-
),
71-
Tab(
72-
text: AppTranslations.of(context).t('title_my'),
73-
icon: Icon(
74-
Icons.person_outline,
75-
size: 28,
76-
),
77-
),
78-
],
79-
),
80-
);
81-
}
82-
8332
Widget _bottomNavigationBar(model) {
8433
AppTranslations lang = AppTranslations.of(context);
8534
return BottomNavigationBar(
@@ -103,7 +52,6 @@ class _IndexState extends State<Index> with SingleTickerProviderStateMixin {
10352
PopupMenuButton(
10453
icon: Icon(
10554
Icons.more_vert,
106-
// color: Color(AppTheme.textColor),
10755
),
10856
onSelected: (local) {
10957
Application().onLocaleChanged(Locale(local));
@@ -138,23 +86,6 @@ class _IndexState extends State<Index> with SingleTickerProviderStateMixin {
13886
AppTranslations lang = AppTranslations.of(context);
13987
return Store.connect(
14088
builder: (context, child, model) {
141-
/* return DefaultTabController(
142-
initialIndex: 0,
143-
length: 2,
144-
child: Scaffold(
145-
appBar: AppBar(
146-
title: Header.Index(lang.t('title')),
147-
actions: appBarActions(model),
148-
),
149-
bottomNavigationBar: menu(model),
150-
body: TabBarView(
151-
children: <Widget>[
152-
TabIndex.Index(model: model),
153-
MyIndex.Index(model: model),
154-
],
155-
),
156-
),
157-
); */
15889
return Scaffold(
15990
appBar: AppBar(
16091
title: Header.Index(lang.t('title')),

0 commit comments

Comments
 (0)