Flutter弹出窗口管理插件phoenix_popup的使用
Flutter弹出窗口管理插件phoenix_popup的使用
特性
phoenix 将做为企业级基础组件:Popup,提供项目支持。
开始使用
phoenix 将做为企业级基础组件:Popup,提供项目支持。
使用说明
phoenix 将做为企业级基础组件:Popup,提供项目支持。
const like = 'sample';
额外信息
phoenix 将做为企业级基础组件:Popup,提供项目支持。
示例代码
import 'package:flutter/material.dart';
import 'package:phoenix_popup/phoenix_popup.dart';
import 'popwindow_example.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a blue toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: PopWindowExamplePage('Pop up'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
GlobalKey globalKey = GlobalKey();
GlobalKey globalKey2 = GlobalKey();
return Scaffold(
appBar: AppBar(
key: globalKey,
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(
color: Colors.red,
child: Center(
// key: globalKey,
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
TextButton(
onPressed: () {
OverlayWindow.showOverlayWindow(context, globalKey,
content: ListView.separated(
itemCount: 25,
separatorBuilder:
(BuildContext context, int index) => const Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: Colors.blue,
title: Text('item $index'),
);
},
));
},
child: const Text('test overlay window')),
TextButton(
key: globalKey2,
onPressed: () {
PopupWindow.showPopWindow(
context,
'popup window',
globalKey2,
widget: SizedBox.fromSize(
size: const Size(60, 44),
child: const Column(
children: [
Text(
'item01',
style: TextStyle(color: Colors.white),
),
Text(
'item02',
style: TextStyle(color: Colors.white),
)
],
)),
);
},
child: const Text('test popup window'))
],
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
在上述示例代码中，我们展示了如何使用 phoenix_popup 插件来创建一个弹出窗口。具体步骤如下：
-
导入库：
import 'package:phoenix_popup/phoenix_popup.dart'; -
创建弹出窗口按钮：
TextButton( key: globalKey2, onPressed: () { PopupWindow.showPopWindow( context, 'popup window', globalKey2, widget: SizedBox.fromSize( size: const Size(60, 44), child: const Column( children: [ Text( 'item01', style: TextStyle(color: Colors.white), ), Text( 'item02', style: TextStyle(color: Colors.white), ) ], )), ); }, child: const Text('test popup window') )
更多关于Flutter弹出窗口管理插件phoenix_popup的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter弹出窗口管理插件phoenix_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用phoenix_popup插件来管理弹出窗口的一个简单示例。phoenix_popup是一个流行的Flutter插件，用于管理模态弹出窗口，它提供了灵活的方式来显示和隐藏弹出窗口。
首先，确保你的Flutter项目中已经添加了phoenix_popup依赖。在你的pubspec.yaml文件中添加以下依赖：
dependencies:
flutter:
sdk: flutter
phoenix_popup: ^latest_version # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来，创建一个Flutter应用，并配置PhoenixPopup服务。以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:phoenix_popup/phoenix_popup.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PhoenixPopupScope(
child: MaterialApp(
home: HomeScreen(),
),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _popupController = PopupController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Phoenix Popup Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
showPopup(context);
},
child: Text('Show Popup'),
),
],
),
),
);
}
void showPopup(BuildContext context) {
PhoenixPopup.show(
context: context,
popupId: 'my_popup',
builder: (context, controller) {
return Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
padding: EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This is a popup window!'),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
controller.dismiss();
},
child: Text('Close'),
),
],
),
),
);
},
);
}
}
代码说明：
-
PhoenixPopupScope: 这是phoenix_popup插件的根widget，它提供了一个作用域，使得在这个作用域内的任何地方都可以显示或隐藏弹出窗口。 -
PopupController: 用于控制弹出窗口的显示和隐藏。虽然在这个示例中我们没有直接使用它，但在更复杂的情况下，你可以用它来编程式地控制弹出窗口。 -
PhoenixPopup.show: 用于显示弹出窗口。你需要提供context、popupId（用于唯一标识弹出窗口，以便以后隐藏它）和builder函数来构建弹出窗口的内容。 -
controller.dismiss(): 在弹出窗口内的按钮点击事件中调用，以关闭弹出窗口。
这个示例展示了如何使用phoenix_popup来显示一个简单的弹出窗口，并在点击按钮时关闭它。你可以根据需要进一步自定义弹出窗口的内容和样式。
