Flutter Overlay 你用上了么
前言
Flutter中的Overlay是一个用于在屏幕上显示浮层的组件。它可以用来在应用程序中创建弹出窗口、提示框、菜单、对话框等等。
Overlay通常用于在用户与应用程序交互时显示临时性的UI元素，例如：用户点击按钮时显示下拉菜单、用户长按屏幕时显示上下文菜单、显示警告或错误消息等等。
Overlay通常包含一个Stack布局，每个浮层都是一个Positioned widget，可以添加到Stack中。这样，可以将多个浮层叠加在一起，并控制它们的层次关系。
Flutter中的Overlay可以让开发者轻松创建复杂的UI，同时还可以保持应用程序的性能和响应度。
本文中提供的代码示例演示了如何在Flutter中使用Overlay制作工作覆盖层。Overlay包括两个基本组件：OverlayState和OverlayEntry。OverlayState管理所有OverlayEntry，OverlayEntry定义覆盖层中的内容。在示例中，OverlayEntry包含一个带有文本和颜色的容器，可以在屏幕上显示。这些条目可以通过OverlayState的insert和remove方法添加和删除。
原文 https://ducafecat.com/blog/flutter-overlay-did-you-use-it
视频
https://www.bilibili.com/video/BV1qX4y1C7rb/
代码
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_overlay
参考
https://api.flutter.dev/flutter/widgets/Overlay-class.html
https://api.flutter.dev/flutter/widgets/OverlayEntry-class.html
OverlayEntry
Overlay 通过将独立的子窗口小部件插入到重叠的堆栈中，使它们在其他窗口小部件之上“浮动”可视元素。覆盖允许每个小部件使用 OverlayEntry 对象管理它们在覆盖中的参与。
构造函数
OverlayEntry({
required this.builder,
bool opaque = false,
bool maintainState = false,
})
builder：此属性用于此条目，并将在条目位置的覆盖中包含此构建器构建的小部件。
opaque：此属性用于获取bool值，该值决定此条目是否阻止整个覆盖。如果条目声明为不透明，则为了提高效率，除非它们具有maintainState设置，否则覆盖将跳过在该条目下面构建条目。 maintainState：如果您需要在 OverlayEntry中使用有状态的小部件，那么您需要将maintainState设置为true，以便小部件可以保持其状态并接收生命周期方法。如果您只是在OverlayEntry中显示一个静态小部件，则可以将maintainState设置为false，以便小部件可以释放内存和资源，不会对性能产生过多影响。
OverlayEntry方法
只有一个OverlayEntry的方法
remove：此方法用于从覆盖层中删除此条目
OverlayState
Overlay的当前状态用于将OverlayEntries插入覆盖层中。
OverlayState方法
debugIsVisible：此方法用于检查给定的OverlayEntry是否可见，并返回布尔值。 insert：此方法用于将给定的OverlayEntry插入覆盖层中。 insertAll：此方法用于获取OverlayEntries的List，并将所有条目插入覆盖层中。您还可以指定上述和下述属性以说明要插入条目的顺序。 rearrange：它可以重新排列当前在屏幕上叠加的所有小部件。具体来说， rearrange方法会将最后添加的OverlayEntry小部件移动到最上面，并将其他小部件移动到下面。这可以用于确保最新的OverlayEntry始终位于最上面，并且可以接收用户的触摸事件等。
步骤
第一步：成员变量
/// overlay 状态
OverlayState? overlayState;
/// overlay 层集合
List<OverlayEntry> entriesList = [];
@override
void initState() {
super.initState();
// 获取 overlay 状态
overlayState = Overlay.of(context);
}
@override
void dispose() {
// 销毁
overlayState?.dispose();
super.dispose();
}
第二步：随机层显示
// 随机位置显示层
void showRandomOverlay(BuildContext context) {
// 随机颜色
final bgColor = Color.fromARGB(
255,
1 + Random().nextInt(254),
1 + Random().nextInt(254),
1 + Random().nextInt(254),
);
// 屏幕宽度
final screenWidth = MediaQuery.of(context).size.width;
// 随机屏幕高度
final randomHeight =
MediaQuery.of(context).size.height * Random().nextDouble();
OverlayEntry? overlayEntry;
overlayEntry = OverlayEntry(builder: (context) {
return Positioned(
// 指定位置
left: 0,
top: randomHeight,
child: GestureDetector(
// 点击删除
onTap: () {
overlayEntry?.remove();
entriesList.remove(overlayEntry);
},
// 背景随机色
child: Container(
width: screenWidth,
height: 100,
color: bgColor,
child: Center(
// 提示文字
child: Text(
"这是一个 overlay ${Random().nextInt(100)} 层, 点击关闭",
style: const TextStyle(
color: Colors.white,
fontSize: 20,
decoration: TextDecoration.none,
),
),
),
),
),
);
});
overlayState?.insert(overlayEntry);
entriesList.add(overlayEntry);
}
第三步：控制按钮
// 控制按钮
Widget _buildBtns() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// 随机新增
ElevatedButton(
onPressed: () => showRandomOverlay(context),
child: const Text("随机新增"),
),
// 关闭所有
ElevatedButton(
onPressed: () {
for (final entry in entriesList) {
entry.remove();
}
entriesList = [];
},
child: const Text("关闭所有"),
),
// 随机排序
ElevatedButton(
onPressed: () {
// 从屏幕上移除
for (final entry in entriesList) {
entry.remove();
}
// 使用Random类创建随机数生成器
Random random = Random();
// 使用List的sublist()方法创建一个新列表
List<OverlayEntry> shuffledEntries = entriesList.sublist(0);
// 调用List的shuffle()方法，传入一个随机数生成器
shuffledEntries.shuffle(random);
// 插入界面
overlayState?.insertAll(shuffledEntries);
},
child: const Text("随机排序"),
),
],
);
}
最后：主视图显示
// 主视图
Widget _mainView() {
return Padding(
padding: const EdgeInsets.only(top: 100),
child: Align(
alignment: Alignment.topCenter,
child: _buildBtns(),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _mainView(),
);
}
完整代码
lib/overlay_view.dart
import 'dart:math';
import 'package:flutter/material.dart';
class OverlayUsePage extends StatefulWidget {
const OverlayUsePage({super.key});
@override
State<OverlayUsePage> createState() => _OverlayUsePageState();
}
class _OverlayUsePageState extends State<OverlayUsePage> {
/// overlay 状态
OverlayState? overlayState;
/// overlay 层集合
List<OverlayEntry> entriesList = [];
// 随机位置显示层
void showRandomOverlay(BuildContext context) {
// 随机颜色
final bgColor = Color.fromARGB(
255,
1 + Random().nextInt(254),
1 + Random().nextInt(254),
1 + Random().nextInt(254),
);
// 屏幕宽度
final screenWidth = MediaQuery.of(context).size.width;
// 随机屏幕高度
final randomHeight =
MediaQuery.of(context).size.height * Random().nextDouble();
OverlayEntry? overlayEntry;
overlayEntry = OverlayEntry(builder: (context) {
return Positioned(
// 指定位置
left: 0,
top: randomHeight,
child: GestureDetector(
// 点击删除
onTap: () {
overlayEntry?.remove();
entriesList.remove(overlayEntry);
},
// 背景随机色
child: Container(
width: screenWidth,
height: 100,
color: bgColor,
child: Center(
// 提示文字
child: Text(
"这是一个 overlay ${Random().nextInt(100)} 层, 点击关闭",
style: const TextStyle(
color: Colors.white,
fontSize: 20,
decoration: TextDecoration.none,
),
),
),
),
),
);
});
overlayState?.insert(overlayEntry);
entriesList.add(overlayEntry);
}
// 控制按钮
Widget _buildBtns() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// 随机新增
ElevatedButton(
onPressed: () => showRandomOverlay(context),
child: const Text("随机新增"),
),
// 关闭所有
ElevatedButton(
onPressed: () {
for (final entry in entriesList) {
entry.remove();
}
entriesList = [];
},
child: const Text("关闭所有"),
),
// 随机排序
ElevatedButton(
onPressed: () {
// 从屏幕上移除
for (final entry in entriesList) {
entry.remove();
}
// 使用Random类创建随机数生成器
Random random = Random();
// 使用List的sublist()方法创建一个新列表
List<OverlayEntry> shuffledEntries = entriesList.sublist(0);
// 调用List的shuffle()方法，传入一个随机数生成器
shuffledEntries.shuffle(random);
// 插入界面
overlayState?.insertAll(shuffledEntries);
},
child: const Text("随机排序"),
),
],
);
}
// 主视图
Widget _mainView() {
return Padding(
padding: const EdgeInsets.only(top: 100),
child: Align(
alignment: Alignment.topCenter,
child: _buildBtns(),
),
);
}
@override
void initState() {
super.initState();
// 获取 overlay 状态
overlayState = Overlay.of(context);
}
@override
void dispose() {
// 销毁
overlayState?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _mainView(),
);
}
}
小结
本文提供了一个很好的介绍Flutter Overlay的概念和使用方法。无论是初学者还是有经验的开发人员，都可以从本文中获得新的知识和见解。如果你想在你的Flutter项目中实现工作覆盖层，本文是一个很好的起点。
© 猫哥 ducafecat.com
end
本文由 mdnice 多平台发布
