Toast在Android上是最常用的提示組件了沦辙，它的優(yōu)勢(shì)在于靜態(tài)調(diào)用判族、全局顯示，可以在任意你想要的地方調(diào)用他而絲毫不影響界面的布局吝岭，調(diào)用簡(jiǎn)單程度與Logger的調(diào)用不相上下肋联。
然而在Flutter中并沒(méi)有給我們提供Toast的接口威蕉，想要實(shí)現(xiàn)Toast的效果有兩種途徑，一種是接Android/iOS原生工程牺蹄，第二種是不依托于使用Flutter來(lái)實(shí)現(xiàn)忘伞。
本篇選用第二種方案來(lái)實(shí)現(xiàn)薄翅，接原生代碼一方面要求雙端開(kāi)發(fā)工作量和門(mén)檻都較大沙兰，而且不利于以后的樣式擴(kuò)展，二是純Flutter實(shí)現(xiàn)的Toast確實(shí)效果非常好翘魄，自定義樣式也非常的方便鼎天。使用Flutter相對(duì)于RN來(lái)說(shuō)，F(xiàn)lutter的渲染引擎是非常強(qiáng)大的暑竟，基本上能用Flutter實(shí)現(xiàn)的效果都不建議接原生斋射，而RN則沒(méi)有自己的渲染引擎育勺，性能的限制造成RN需要頻繁的接入原生模塊，這也是我傾心Flutter的原因罗岖。
本篇要用的核心組件是Overlay涧至，這個(gè)組件提供了動(dòng)態(tài)的在Flutter的渲染樹(shù)上插入布局的特性，從而讓我們有了在包括路由在內(nèi)的所有組件的上層插入toast的可能性桑包。
創(chuàng)建Flutter工程
本品系列的Flutter博客都會(huì)以創(chuàng)建純凈的Flutter工程開(kāi)篇南蓬，創(chuàng)建工程后，放一個(gè)Button在布局中哑了，便于觸發(fā)Toast調(diào)用赘方。
代碼：略。
使用Overlay插入Toast布局
因?yàn)槲覀円獙?shí)現(xiàn)全局的靜態(tài)調(diào)用弱左，所以這里先創(chuàng)建一個(gè)工具類(lèi)窄陡，并在這個(gè)類(lèi)中創(chuàng)建靜態(tài)方法show：
class Toast {
static show(BuildContext context, String msg) {
//這里實(shí)現(xiàn)toast的彈出邏輯
}
}
這是一種很常見(jiàn)的靜態(tài)調(diào)用方式，是需要在你的某個(gè)回調(diào)中調(diào)用Toast.show(context, "你的消息提示");即可完成toast的顯示拆火，而不用考慮布局嵌套問(wèn)題跳夭。
下面我們就在show方法中向布局中插入一個(gè)toast：
class Toast {
static show(BuildContext context, String msg) {
var overlayState = Overlay.of(context);
OverlayEntry overlayEntry;
overlayEntry = new OverlayEntry(builder: (context) {
return buildToastLayout(msg);
});
overlayState.insert(overlayEntry);
}
static LayoutBuilder buildToastLayout(String msg) {
return LayoutBuilder(builder: (context, constraints) {
return IgnorePointer(
ignoring: true,
child: Container(
child: Material(
color: Colors.white.withOpacity(0),
child: Container(
child: Container(
child: Text(
"${msg}",
style: TextStyle(color: Colors.white),
),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.6),
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
),
margin: EdgeInsets.only(
bottom: constraints.biggest.height * 0.15,
left: constraints.biggest.width * 0.2,
right: constraints.biggest.width * 0.2,
),
),
),
alignment: Alignment.bottomCenter,
),
);
});
}
}
在show方法中使用Overlay插入了一個(gè)OverlayEntry，而OverlayEntry負(fù)責(zé)構(gòu)建布局们镜，buildToastLayout方法這是一個(gè)正常的布局構(gòu)建方法优妙，通過(guò)這個(gè)方法我們構(gòu)建了一個(gè)Toast樣式的ToastView，并通過(guò)OverlayEntry插入到了整個(gè)布局的最上層憎账。
這時(shí)候通過(guò)調(diào)用Toast.show方法就能在界面上看到一個(gè)Toast樣式的提示了套硼。
但是，這個(gè)ToastView是不會(huì)消失的胞皱，它會(huì)一直呆在界面上邪意，這顯然不是我們想要的。
讓Toast自動(dòng)消失
我們繼續(xù)改造這個(gè)Toast反砌，讓它能夠自動(dòng)消失雾鬼。
創(chuàng)建一個(gè)叫做ToastView的類(lèi)，便于控制每次插入的ToastView：
class ToastView {
OverlayEntry overlayEntry;
OverlayState overlayState;
bool dismissed = false;
_show() async {
overlayState.insert(overlayEntry);
await Future.delayed(Duration(milliseconds: 3500));
this.dismiss();
}
dismiss() async {
if (dismissed) {
return;
}
this.dismissed = true;
overlayEntry?.remove();
}
}
這樣宴树，就把ToastView的顯示和消失的控制封裝起來(lái)了策菜。然后在Toast的show方法中對(duì)他進(jìn)行調(diào)用
class Toast {
static show(BuildContext context, String msg) {
var overlayState = Overlay.of(context);
OverlayEntry overlayEntry;
overlayEntry = new OverlayEntry(builder: (context) {
return buildToastLayout(msg);
});
var toastView = ToastView();
toastView.overlayState = overlayState;
toastView.overlayEntry = overlayEntry;
toastView._show();
}
...
}
通過(guò)上面的方法，已經(jīng)實(shí)現(xiàn)了Toast的全局靜態(tài)調(diào)用酒贬，并插入全局布局又憨，并在顯示3.5秒后自動(dòng)消失的Toast，但是這個(gè)toast好像怪怪的锭吨，沒(méi)錯(cuò)蠢莺，他沒(méi)有動(dòng)畫(huà)，下面來(lái)給這個(gè)toast增加動(dòng)畫(huà)零如。
給Toast增加動(dòng)畫(huà)
這個(gè)Toast的動(dòng)畫(huà)算是Flutter的高級(jí)應(yīng)用了躏将，它涉及到了縮放锄弱，位移，自定義差值器祸憋，AnimatedBuilder等特性会宪，本篇的核心在介紹Overlay的使用和ToastView的封裝，關(guān)于動(dòng)畫(huà)的使用如果在這里講就發(fā)散的太多了蚯窥，篇幅限制以后單獨(dú)來(lái)講動(dòng)畫(huà)吧狈谊，這里以你對(duì)動(dòng)畫(huà)系統(tǒng)了解的前提來(lái)講解。
class Toast {
static show(BuildContext context, String msg) {
var overlayState = Overlay.of(context);
var controllerShowAnim = new AnimationController(
vsync: overlayState,
duration: Duration(milliseconds: 250),
);
var controllerShowOffset = new AnimationController(
vsync: overlayState,
duration: Duration(milliseconds: 350),
);
var controllerHide = new AnimationController(
vsync: overlayState,
duration: Duration(milliseconds: 250),
);
var opacityAnim1 =
new Tween(begin: 0.0, end: 1.0).animate(controllerShowAnim);
var controllerCurvedShowOffset = new CurvedAnimation(
parent: controllerShowOffset, curve: _BounceOutCurve._());
var offsetAnim =
new Tween(begin: 30.0, end: 0.0).animate(controllerCurvedShowOffset);
var opacityAnim2 = new Tween(begin: 1.0, end: 0.0).animate(controllerHide);
OverlayEntry overlayEntry;
overlayEntry = new OverlayEntry(builder: (context) {
return ToastWidget(
opacityAnim1: opacityAnim1,
opacityAnim2: opacityAnim2,
offsetAnim: offsetAnim,
child: buildToastLayout(msg),
);
});
var toastView = ToastView();
toastView.overlayEntry = overlayEntry;
toastView.controllerShowAnim = controllerShowAnim;
toastView.controllerShowOffset = controllerShowOffset;
toastView.controllerHide = controllerHide;
toastView.overlayState = overlayState;
preToast = toastView;
toastView._show();
}
...
}
class ToastView {
OverlayEntry overlayEntry;
AnimationController controllerShowAnim;
AnimationController controllerShowOffset;
AnimationController controllerHide;
OverlayState overlayState;
bool dismissed = false;
_show() async {
overlayState.insert(overlayEntry);
controllerShowAnim.forward();
controllerShowOffset.forward();
await Future.delayed(Duration(milliseconds: 3500));
this.dismiss();
}
dismiss() async {
if (dismissed) {
return;
}
this.dismissed = true;
controllerHide.forward();
await Future.delayed(Duration(milliseconds: 250));
overlayEntry?.remove();
}
}
class ToastWidget extends StatelessWidget {
final Widget child;
final Animation<double> opacityAnim1;
final Animation<double> opacityAnim2;
final Animation<double> offsetAnim;
ToastWidget(
{this.child, this.offsetAnim, this.opacityAnim1, this.opacityAnim2});
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: opacityAnim1,
child: child,
builder: (context, child_to_build) {
return Opacity(
opacity: opacityAnim1.value,
child: AnimatedBuilder(
animation: offsetAnim,
builder: (context, _) {
return Transform.translate(
offset: Offset(0, offsetAnim.value),
child: AnimatedBuilder(
animation: opacityAnim2,
builder: (context, _) {
return Opacity(
opacity: opacityAnim2.value,
child: child_to_build,
);
},
),
);
},
),
);
},
);
}
}
class _BounceOutCurve extends Curve {
const _BounceOutCurve._();
@override
double transform(double t) {
t -= 1.0;
return t * t * ((2 + 1) * t + 2) + 1.0;
}
}
這是段非常長(zhǎng)的代碼沟沙，本來(lái)是不想往上面貼這么多代碼的河劝，但是動(dòng)畫(huà)這塊兒講的話篇幅又太長(zhǎng)，不貼代碼的話講起來(lái)又太空洞矛紫，只能貼了赎瞎，大概說(shuō)一下。
上面代碼分為四段：
第一段颊咬，在show方法中創(chuàng)建3個(gè)動(dòng)畫(huà)务甥，Toast顯示的位移和漸顯動(dòng)畫(huà)，Toast消失的漸隱動(dòng)畫(huà)喳篇，然后把這三個(gè)動(dòng)畫(huà)的controller交給ToastView來(lái)控制動(dòng)畫(huà)播放敞临。
第二段，在ToastView中接收三個(gè)動(dòng)畫(huà)controller麸澜，并在show和dismiss方法中控制動(dòng)畫(huà)的播放挺尿。
第三段，創(chuàng)建一個(gè)自定義Widget炊邦，并使用三個(gè)AnimatedBuilder來(lái)實(shí)現(xiàn)動(dòng)畫(huà)编矾，并在show方法中把Toast的布局包裹起來(lái)。
第四段馁害，定義了一個(gè)動(dòng)畫(huà)差值器窄俏，F(xiàn)lutter中提供了很多動(dòng)畫(huà)差值器，但是并沒(méi)有我們需要的碘菜，所以這里定義一個(gè)彈跳一次后回彈的動(dòng)畫(huà)差值器用來(lái)控制ToastView的偏移動(dòng)畫(huà)效果凹蜈。
到目前為止，這個(gè)Toast已經(jīng)滿足了最基本的樣式忍啸，全局調(diào)用仰坦，動(dòng)畫(huà)彈出，延遲3.5秒后自動(dòng)漸隱消失吊骤。
防止連續(xù)調(diào)用造成toast堆疊
但是還存在一個(gè)問(wèn)題缎岗，因?yàn)門(mén)oast的樣式的半透明的黑色，如果連續(xù)調(diào)用多次的話白粉，會(huì)有多個(gè)Toast同時(shí)彈出传泊，并堆疊在一起，會(huì)顯得非常的黑鸭巴。
下面再做一個(gè)處理眷细，在show之前，判斷是否已經(jīng)有一個(gè)Toast在顯示了鹃祖，如果有溪椎，即刻把它dismiss了。
static ToastView preToast;
static show(BuildContext context, String msg) {
preToast?.dismiss();
preToast = null;
...
preToast = toastView;
toastView._show();
}
...
}
這樣就可以了恬口，?.操作符和kotlin的效果是一樣的校读，空指針安全，很舒服祖能。
更多干貨移步我的個(gè)人博客 https://www.nightfarmer.top/
