// 做一个列表页
import 'package:flutter/material.dart';
import 'package:yunote/module/toast.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:"我的第三个App",
theme: ThemeData(
primaryColor:Colors.blue
),
home: MyHomePage(title:"列表展示")
);
}
}
void _addOverlay(BuildContext context, String info) async {
//获取OverlayState
OverlayState overlayState = Overlay.of(context);
//创建OverlayEntry
OverlayEntry _overlayEntry = OverlayEntry(
builder: (BuildContext context) => Positioned(
top: MediaQuery.of(context).size.height * 2 / 3,
child: new Container(
margin: EdgeInsets.all(20),
padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
color: Color(0xFF6666666)
),
child: Text(info, style: TextStyle(color: Colors.white, fontSize: 14.0,decoration: null))
)
));
//显示到屏幕上。
overlayState.insert(_overlayEntry);
//等待2秒
await Future.delayed(Duration(seconds: 2));
//移除
_overlayEntry.remove();
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key,this.title}): super(key:key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
List<Widget> makeList(BuildContext context) {
List<Widget> result = List();
for(int i=0;i<100;i++){
String data = new WordPair.random().asPascalCase;
result.insert(i, new GestureDetector(
onTap:() {
print("你点击了" + data);
Toast.toast(context, data);
},
child: new Container(
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(border: Border(bottom: BorderSide(
color: const Color(0xFFEEEEEE),
width: 1,
style: BorderStyle.solid
))),
child: Text(data)
)
));
}
return result;
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//返回一个列表
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: new Container(
child: new ListView(
children: makeList(context)
),
)
);
}
}
效果:
image.png附toast.dart代码:
import 'package:flutter/material.dart';
class Toast {
static OverlayEntry _overlayEntry; //toast靠它加到屏幕上
static bool _showing = false; //toast是否正在showing
static DateTime _startedTime; //开启一个新toast的当前时间,用于对比是否已经展示了足够时间
static String _msg;
static void toast(
BuildContext context,
String msg,
) async {
assert(msg != null);
_msg = msg;
_startedTime = DateTime.now();
//获取OverlayState
OverlayState overlayState = Overlay.of(context);
_showing = true;
if (_overlayEntry == null) {
_overlayEntry = OverlayEntry(
builder: (BuildContext context) => Positioned(
//top值,可以改变这个值来改变toast在屏幕中的位置
top: MediaQuery.of(context).size.height * 2 / 3,
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0),
child: AnimatedOpacity(
opacity: _showing ? 1.0 : 0.0, //目标透明度
duration: _showing
? Duration(milliseconds: 100)
: Duration(milliseconds: 400),
child: _buildToastWidget(),
),
)),
));
overlayState.insert(_overlayEntry);
} else {
//重新绘制UI,类似setState
_overlayEntry.markNeedsBuild();
}
await Future.delayed(Duration(milliseconds: 2000)); //等待两秒
//2秒后 到底消失不消失
if (DateTime.now().difference(_startedTime).inMilliseconds >= 2000) {
_showing = false;
_overlayEntry.markNeedsBuild();
}
}
//toast绘制
static _buildToastWidget() {
return Center(
child: Card(
color: Color(0xFF333333),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Text(
_msg,
style: TextStyle(
fontSize: 14.0,
color: Colors.white,
),
),
),
),
);
}
}
网友评论