flutter_inner_drawer 使用
版本:
flutter_inner_drawer: "^0.2.2"
github: https://github.com/Dn-a/flutter_inner_drawer
这个比较简单,直接上code,或者在github上面看就ok了
story.dart
import 'package:flutter/material.dart'; import 'story_data.dart';
import 'story_item.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart'; void main() => runApp(Story()); class Story extends StatefulWidget {
@override
_Story createState() => new _Story();
} class _Story extends State<Story> {
bool isLoading = false; //是否正在请求新数据
bool showMore = false; //是否显示底部加载中提示
bool offState = false; //是否显示进入页面时的圆形进度条
int page = ;
ScrollController scrollController = ScrollController();
final GlobalKey<InnerDrawerState> _innerDrawerKey =
GlobalKey<InnerDrawerState>();
Future<void> getMoreData() async {
print('xx');
if (isLoading) {
return;
}
setState(() {
isLoading = true;
page = ;
});
print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: ), () {
setState(() {
isLoading = false;
final arr = new StoryData(
,
'images/story/03/cover.jpg',
'episode.26',
'放课後',
'终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
[]);
storyData.add(arr);
print('下拉刷新结束,page = $page');
});
});
} void getListData() {} @override
void initState() {
super.initState();
scrollController.addListener(() {
if (scrollController.position.pixels ==
scrollController.position.maxScrollExtent) {
print('滑动到了最底部${scrollController.position.pixels}');
setState(() {
showMore = true;
});
getMoreData(); // 增加点数据
}
});
getListData(); // 暂时未使用
} @override
void dispose() {
super.dispose();
//手动停止滑动监听
scrollController.dispose();
} @override
Widget build(BuildContext context) {
// TODO: implement build return InnerDrawer(
key: _innerDrawerKey,
position: InnerDrawerPosition.start, // 滑动方向
onTapClose: true, // default false 点击关闭
swipe: true, // default true
offset: 0.6, // default 0.4
colorTransition: Colors.yellow, // default Color.black54 转变颜色
animationType: InnerDrawerAnimation.linear, // default static static / linear / quadratic
innerDrawerCallback: (a) => print(a), // return bool
child: Material(
child: SafeArea(
child: Container(
alignment: Alignment.topLeft,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/bg/flower_one.jpg'),
fit: BoxFit.cover,
),
border: new Border(
right: BorderSide(color: Colors.pink, width: 0.5),
bottom: BorderSide(color: Colors.pink, width: 0.5),
)),
child: new Column(
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 100.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
))
],
),
))),
// A Scaffold is generally used but you are free to use other widgets
// Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
scaffold: Scaffold(
body: new RefreshIndicator(
child: isLoading == false
? new ListView.builder(
controller: scrollController,
itemCount: storyData.length, //列表长度+底部加载中提示
itemBuilder: (BuildContext context, int index) {
// 传入MessageData返回列表项
return new StoryItem(storyData[index]);
},
)
: new Stack(
children: <Widget>[
new Padding(
padding:
new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
child: new Center(
child: SpinKitFadingCircle(
color: Colors.blueAccent,
size: 30.0,
),
),
),
new Padding(
padding:
new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
child: new Center(
child: new Text('正在加载中,莫着急哦~'),
),
),
],
),
onRefresh: _onRefresh)));
} Future<void> _onRefresh() async {
if (isLoading) {
return;
}
setState(() {
isLoading = true;
page = ;
}); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: ), () {
setState(() {
isLoading = false;
final arr = new StoryData(
,
'images/story/03/cover.jpg',
'episode.26',
'放课後',
'终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
[]);
storyData.add(arr);
print('下拉刷新结束,page = $page');
});
});
} void _open() {
_innerDrawerKey.currentState.open();
} void _close() {
_innerDrawerKey.currentState.close();
}
}
效果图:
---------------------拖动--------------------->
源码地址:https://github.com/ft1107949255/kiminitodoke
flutter_inner_drawer 使用的更多相关文章
随机推荐
- 分布式事物 - 基于RPC调用 - TCC模式
前提 前端业务(主服务)可以以同步或异步调用TCC框架,或者TCC框架本身就是同步异步兼备的. 假定TCC框架拥有断电后的自动恢复能力.同时,在下游业务出现无限失败的情况下,也会进行无限的重试,以达到 ...
- 搭建zabbix 4.0
[root@localhost /]# sed ‐i "s#SELINUX=enforcing#SELINUX=disabled#g" /etc/selinux/config #永 ...
- 利用百度AI快速开发出一款“问答机器人”并接入小程序
先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之 ...
- 通知advice
基于注解的Spring AOP开发,来自https://www.cnblogs.com/junzi2099/p/8274813.html 1.定义目标类接口和实现类 2.编写Spring AOP的as ...
- nginx和swoole怎么混合使用
有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群jq.qq.com 基于epoll的Nginx 有了epoll,理论上1个进程就可以 ...
- react-组件间的传值
父组件向子组件传值 父组件通过属性进行传递,子组件通过props获取 //父组件 class CommentList extends Component{ render(){ return( < ...
- WebShell代码分析溯源(十)
WebShell代码分析溯源(十) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];register_shutdown_function($e, $_REQUEST[' ...
- Centos7部署mysql
安装mysql yum install mysql mysql-server 会出现以下错误: [root@yl-web yl]# yum install mysql-server Loaded pl ...
- 一起学SpringMVC之文件上传
概述 在Web系统开发过程中,文件上传是普遍的功能,本文主要以一个简单的小例子,讲解SpringMVC中文件上传的使用方法,仅供学习分享使用,如有不足之处,还请指正. 文件上传依赖包 如下所示,文件上 ...
- day 27-1 反射、内置方法
反射 反射:通过字符串来映射到对象的属性 class People(): def __init__(self, name, age): self.name = name self.age = age ...