flutter创建一个可以跟随某个widget运动的浮动层
要创建一个可以跟随某个widget运动的浮动层,可以使用Overlay和OverlayEntry。
首先,需要在根布局中添加一个Overlay Widget,它将会是所有OverlayEntry的容器。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: [
// Your main content
Overlay(
initialEntries: [],
),
],
),
),
);
}
}
接着,创建一个类来表示浮动层。
class FollowOverlay {
OverlayEntry _overlayEntry;
FollowOverlay(BuildContext context, WidgetBuilder builder) {
_overlayEntry = OverlayEntry(
builder: (BuildContext context) {
return Positioned(
top: 0,
left: 0,
child: builder(context),
);
},
);
Overlay.of(context).insert(_overlayEntry);
}
void remove() {
_overlayEntry.remove();
}
}
现在就可以使用FollowOverlay来创建一个浮动层了。例如,要创建一个跟随某个widget的浮动层,可以这样做:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Follow Overlay Demo'),
),
body: Center(
child: GestureDetector(
onTap: () {
showOverlay(context);
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Text('Tap me'),
),
),
),
);
}
void showOverlay(BuildContext context) {
FollowOverlay(
context,
(BuildContext context) {
return Container(
width: 100,
height: 50,
color: Colors.red,
child: Text('I am a floating overlay'),
);
},
);
}
}
这段代码会在点击Container后创建一个红色的浮动层,它会跟随Container移动。要实现更复杂的跟随效果,可以根据需要更改FollowOverlay中的builder函数。
原文地址: https://www.cveoy.top/t/topic/belx 著作权归作者所有。请勿转载和采集!