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

feat:优化首页交互逻辑 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wanwusangzhi merged 6 commits into master from test
Mar 3, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/widget/regular/listview/index.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## **ListView**
59 changes: 59 additions & 0 deletions docs/widget/scrollview/customscrollview/index.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
## **CustomScrollView**

> 一个使用slivers创建自定义的滚动效果的ScrollView

### 构造方法
```
CustomScrollView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
Key center,
double anchor = 0.0,
double cacheExtent,
this.slivers = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
})
```

### 属性介绍
> viewportBuilder:显示滚动组件的属性,实例CustomScrollView/SingleChildScrollView实现不同的滚动效果。
- CustomScrollView: 实现随滚动条,appbar向上移动效果
- SingleChildScrollView:参考SingleChildScrollView

### CustomScrollView
> CustomScrollView:结合slivers使用,常用小组件为SliverAppBar, SliverGrid,SliverFixedExtentList
> SliverAppBar: 滚动标题头小组件
```dart
SliverAppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.forceElevated = false,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.expandedHeight,
this.floating = false,
this.pinned = false,
this.snap = false,
})

```
- pinned: 默认为false, 非滚动至顶部时,标题头始终处于隐藏,当true时,标题头始终显示,但不会显示flexibleSpace内容
- floating: 默认为false,当为true时,下拉会显示appbar,但不会自动展开flexibleSpace的内容
- snap: 默认为false,当floating为true, 当前才能为true,向下拉时,会自动显示flexibleSpace的内容
1 change: 1 addition & 0 deletions docs/widget/scrollview/listview/index.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## **ListView**
12 changes: 8 additions & 4 deletions docs/widget/scrollview/scrollable/index.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
## **GridView**
## **Scrollable**

>
Scrollable是一个可滚动的组件,ListView、GridView都会间接使用到该组件。
> 实现了可滚动widget的交互模型,但不包含UI显示相关的逻辑

### 构造方法
```
Expand All @@ -15,4 +14,9 @@ Scrollable({
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.down
})
```
```

### 属性介绍
> viewportBuilder:显示滚动组件的属性,实例CustomScrollView/SingleChildScrollView实现不同的滚动效果。
- CustomScrollView: 实现随滚动条,appbar向上移动效果,具体参考CustomScrollView
- SingleChildScrollView:具体参考SingleChildScrollView
43 changes: 43 additions & 0 deletions docs/widget/scrollview/singlechildscrollview/index.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
## **SingleChildScrollView**
> 当组件内容超出可视范围或高度时,可增加SingleChildScrollView,通过滚动解决问题

### 构造函数

```
SingleChildScrollView({
Key key,
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.padding,
bool primary,
this.physics,
this.controller,
this.child,
this.dragStartBehavior = DragStartBehavior.down,
});
```

### 属性介绍
> 滚动参数很多同等gridview介绍。

### 用例
> 在固定容器超出屏幕高度则滚动显示
```
Container(
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.blue,
),
),
height: 100,
child: SingleChildScrollView(
child: Text(
'这里是高度100,增加SingleChildScrollView, 内容超过时可滚动。这里是高度100,增加SingleChildScrollView, 内容超过时可滚动。这里是高度100,增加SingleChildScrollView, 内容超过时可滚动。这里是高度100,增加SingleChildScrollView, 内容超过时可滚动。',
style: TextStyle(
color: Colors.blue,
),
),
),
)
```
5 changes: 3 additions & 2 deletions lib/components/widgetComp.dart
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ class IndexState extends State<Index> {
});
}

openPage(context, model, String url) async {
openPage(context, model) async {
String url = this.mdUrl;
// 加载页面
if (model.config.state.isPro) {
FluroRouter.router.navigateTo(context,
Expand Down Expand Up @@ -124,7 +125,7 @@ class IndexState extends State<Index> {
Icons.code,
),
onPressed: () async {
this.openPage(context, model, this.mdUrl);
this.openPage(context, model);
},
),
IconButton(
Expand Down
149 changes: 76 additions & 73 deletions lib/page/component/index.dart
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,102 +12,105 @@ class Index extends StatefulWidget {
_IndexState createState() => _IndexState(model: this.model);
}

class _IndexState extends State<Index> {
class _IndexState extends State<Index> {
final MainStateModel model;
List mapList = [];
int index;
List _mapList = [];
int _isExpandedIndex = -1;

_IndexState({Key key, this.model});

@override
initState() {
super.initState();
this.mapList = WidgetRoot.getAllWidgets();
this._mapList = WidgetRoot.getAllWidgets();
}

/**
* 渲染折叠板
*/
Widget renderExpanel(MainStateModel model, widgetsItem) {
renderPanel(model, widgetsItem, index) {
String nameSpaces = widgetsItem.nameSpaces;
List _tmpWidgetList = widgetsItem.widgetList;
return Container(
margin: EdgeInsets.only(bottom: 10),
child: ExpansionTile(
title: Text(
widgetsItem.typeName,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
leading: Icon(
IconData(
widgetsItem.code ?? 58353,
fontFamily: 'MaterialIcons',
matchTextDirection: true,
return ExpansionPanel(
headerBuilder: (context, flag) {
return Container(
padding: EdgeInsets.all(10),
child: ListTile(
leading: Icon(
IconData(
widgetsItem.code,
fontFamily: 'MaterialIcons',
matchTextDirection: true,
),
),
title: Text('${widgetsItem.typeName}'),
),
// color: Color(AppTheme.mainColor),
);
},
body: Container(
decoration: BoxDecoration(
color: Color(AppTheme.thirdColor),
),
backgroundColor: Colors.white,
children: [
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1,
crossAxisCount: 3,
children: List.generate(
_tmpWidgetList.length,
(index) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: .1,
),
padding: EdgeInsets.all(10),
child: GridView.count(
shrinkWrap: true,
physics: ScrollPhysics(),
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: List.generate(_tmpWidgetList.length, (index) {
return RaisedButton(
color: Color(AppTheme.secondColor),
splashColor: Color(AppTheme.mainColor),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(
IconData(
_tmpWidgetList[index].code,
fontFamily: 'MaterialIcons',
matchTextDirection: true,
),
color: Color(AppTheme.mainColor),
size: 48,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
iconSize: 48,
icon: Icon(
IconData(
_tmpWidgetList[index].code ?? 59101,
fontFamily: 'MaterialIcons',
matchTextDirection: true,
),
color: Color(AppTheme.mainColor),
),
onPressed: () {
FluroRouter.router.navigateTo(
context,
nameSpaces + _tmpWidgetList[index].title,
);
},
),
Text(
_tmpWidgetList[index].title,
),
],
),
Text(
'${_tmpWidgetList[index].title}',
overflow: TextOverflow.ellipsis,
)
],
),
onPressed: () {
FluroRouter.router.navigateTo(
context,
nameSpaces + _tmpWidgetList[index].title,
);
},
),
),
],
);
}),
),
),
isExpanded: _isExpandedIndex == index,
);
}

Widget build(BuildContext context) {
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(10),
child: Column(
children: List.generate(mapList.length, (_index) {
return renderExpanel(model, mapList[_index]);
}),
// padding: EdgeInsets.all(10),
child: ExpansionPanelList(
children: List.generate(
_mapList.length,
(_index) {
return renderPanel(model, _mapList[_index], _index);
},
),
expansionCallback: (index, flag) {
if (flag) {
index = -1;
}
setState(() {
this._isExpandedIndex = index;
});
},
),
);
}
Expand Down
Loading

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