什么是Overlay ，OverlayEntry烈和，OverlayState
Overlay： 一個(gè)可以獨(dú)立管理的Stack让蕾。 通過(guò)它讓W(xué)idget浮在其他的Widget之上，從而實(shí)現(xiàn)懸浮窗效果结蟋。主要作用是通過(guò)內(nèi)部的Stack來(lái)管理和疊放各個(gè)組件層脯倚，包括需要置頂?shù)膽腋〗M件已經(jīng)各中頁(yè)面至今的切換。
OverlayEntry: 可以放在Overlay上的組件嵌屎。OverlayEntry是通過(guò)build創(chuàng)建widget的推正，可以同過(guò)OverlayEntry的markNeedsBuild方法在下一幀重繪。
OverlayState:通過(guò) Overlay.of(context).insert和 Overlay.of(context).insert()和OverlayEntry的remove()將OverlayEntry從Overlay上插入和移除宝惰。
Overlay一般不需要開發(fā)者手動(dòng)創(chuàng)建植榕，因?yàn)橐话鉌lutter應(yīng)用常見 的根 MaterialApp，WidgetsApp都會(huì)默認(rèn)創(chuàng)建一個(gè)Navigator尼夺，而Navigator內(nèi)部又會(huì)創(chuàng)建一個(gè)Overlay組件内贮。
關(guān)系：
MaterialApp -> WidgetsApp -> Navigator -> Overlay
簡(jiǎn)單的使用
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
home: const Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
OverlayEntry? _entry;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('OverlayEntry的使用'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () {
_entry = OverlayEntry(builder: (cxt) {
//可以看出內(nèi)部使用的是Stack包裹的,可以使用Center將Container居中
return Positioned(
right: 100,
top: 100,
child: Container(
width: 100,
height: 100,
color: Colors.deepOrange,
));
});
Overlay.of(context)?.insert(_entry!);
},
style: ButtonStyle(
foregroundColor: ButtonStyleButton.allOrNull(Colors.white),
backgroundColor: ButtonStyleButton.allOrNull(Colors.green)),
child: const Text('添加')),
TextButton(
onPressed: () {
_entry?.remove();
},
style: ButtonStyle(
foregroundColor: ButtonStyleButton.allOrNull(Colors.white),
backgroundColor: ButtonStyleButton.allOrNull(Colors.red)),
child: const Text('移除')),
],
),
),
);
}
}
OverlayEntry.png
Loading組件的實(shí)現(xiàn)和分析
首先介紹一下MaterialApp和WidgetsApp的builder方法,我們可以通過(guò)這個(gè)方法創(chuàng)建屬于自己的Overlay包裹住每個(gè)頁(yè)面。
代碼中的注釋介紹
A builder for inserting widgets above the [Navigator] 用于在 [Navigator] 上方插入小部件的構(gòu)建器
定義 一個(gè)OverlayEntry
//在Flutter3.0之后SchedulerBinding.instance就不是一個(gè)可空類型了,為了兼容3.0之前使用此方法
//https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0
T? _ambiguate<T>(T? value) => value;
class CustomOverlayEntry extends OverlayEntry{
@override
CustomOverlayEntry({
required WidgetBuilder builder,
}) : super(builder: builder);
@override
void markNeedsBuild() {
//為了保證不在build階段刷新OverlayEntry,具體的可閱讀一下這篇文章
// https://book.flutterchina.club/chapter14/flutter_app_startup.html
if (_ambiguate(SchedulerBinding.instance)!.schedulerPhase ==
SchedulerPhase.persistentCallbacks) {
_ambiguate(SchedulerBinding.instance)!.addPostFrameCallback((_) {
super.markNeedsBuild();
});
} else {
super.markNeedsBuild();
}
}
}
創(chuàng)建一個(gè)Overlay
創(chuàng)建一個(gè)Overlay汞斧，通過(guò)MaterialApp的builder 方法,使能包裹住頁(yè)面夜郁。
class CustomLoading extends StatefulWidget {
final Widget? child;
const CustomLoading({Key? key, required this.child}) : super(key: key);
@override
State<CustomLoading> createState() => _CustomLoadingState();
}
class _CustomLoadingState extends State<CustomLoading> {
late CustomOverlayEntry _entry;
@override
void initState() {
super.initState();
_entry = CustomOverlayEntry(
builder: (_) => LoadingManager.instance.widget ?? Container());
LoadingManager.instance.entry = _entry;
}
@override
Widget build(BuildContext context) {
return Material(
child: Overlay(
initialEntries: [
CustomOverlayEntry(
builder: (BuildContext context) {
if (widget.child != null) {
return widget.child!;
} else {
return Container();
}
},
),
_entry,
],
),
);
}
}
創(chuàng)建一個(gè)單例用來(lái)管理這個(gè)Overlay
class LoadingManager {
static final LoadingManager instance = LoadingManager._internal();
factory LoadingManager() {
return instance;
}
LoadingManager._internal();
CustomOverlayEntry? entry;
Widget? widget;
static TransitionBuilder builder({
TransitionBuilder? builder,
}) {
return (BuildContext context, Widget? child) {
if (builder != null) {
return builder(context, CustomLoading(child: child));
} else {
return CustomLoading(child: child);
}
};
}
static void show() {
instance.widget = Center(
child: Container(
color: Colors.amberAccent,
width: 60,
height: 60,
padding: EdgeInsets.all(10),
child: const CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.green),
),
),
);
instance.entry?.markNeedsBuild();
}
static void dismiss() {
instance.widget = null;
instance.entry?.markNeedsBuild();
}
}
使用
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
builder: LoadingManager.builder(),
home: const Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('自定義Loading'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () {
LoadingManager.show();
},
style: ButtonStyle(
foregroundColor: ButtonStyleButton.allOrNull(Colors.white),
backgroundColor: ButtonStyleButton.allOrNull(Colors.green)),
child: const Text('show')),
TextButton(
onPressed: () {
LoadingManager.dismiss();
},
style: ButtonStyle(
foregroundColor: ButtonStyleButton.allOrNull(Colors.white),
backgroundColor: ButtonStyleButton.allOrNull(Colors.red)),
child: const Text('dismiss')),
],
),
),
);
}
}
自定義Loading.png
