Flutter弹出窗口插件react_popup的使用

浮动反应覆盖层

react_popup 是一个高度可定制的 Flutter 包，可以帮助你轻松实现针对应用中各个小部件的浮动反应弹出窗口。最好的部分在于，它设计为自动处理同一类型元素的多个实例，并在用户点击另一个具有反应的小部件时优雅地关闭当前活动的反应弹出窗口。当然，你可以更改此行为，如果你不希望这样。

注意: Key 是必需参数，可以传递 UniqueKey() 以使其正常工作。

示例

入门

有三个你需要了解的小部件：

ReactionsParent

ReactionsParent ReactionsParent({Key? key, required Widget child})

这个小部件将包含一个或多个 ReactionsWrapper 小部件。如果多个 ReactionsWrapper 小部件直接位于此 ReactionsParent 小部件的 widget 树中，则 一次只有一个反应弹出窗口会处于活动状态。包允许优雅地关闭其他活动的反应。这在列表或其他视图中非常有用，这些视图中有多个相同类型的小部件，如聊天窗口或帖子流。

注意: Key 是必需参数，可以传递 UniqueKey() 以使其正常工作。

ReactionsWrapper

ReactionsWrapper ReactionsWrapper({
  required Key? key,
  double? reactionWidth,
  Color overlayBackgroundColor = Colors.black12,
  bool showCloseButton = true,
  Widget? customCloseButton,
  Offset? offset,
  Alignment? alignment,
  required List<Reaction> reactions,
  required Widget child,
})

这个小部件是实现反应弹出窗口的核心。用这个小部件包装你的小部件，你会看到反应界面神奇地出现。它使用 SDK 提供的 Overlay API 显示一个漂亮的可自定义的反应界面。不用担心滚动问题，它会自动附加到小部件上，所以几乎不会出错。

Reaction

Reaction Reaction({
  Key? key,
  required FutureOr<void> Function() onSelected,
  required Widget child,
})

如果你注意到上面的 ReactionsWrapper 小部件中有一个名为 reactions 的参数。这些 reactions 接受一个 List<Reaction> 小部件，可以在其中简单地定义它们。一旦被选中，反应弹出窗口将会关闭。虽然这种行为无法自定义，但你可以添加任何你喜欢的东西作为子组件，比如动画、视频、图像或图标。

示例

以下是一个完整的示例，展示了如何使用 react_popup 插件来实现反应弹出窗口。

import 'package:flutter/material.dart';
import 'package:react_popup/react_popup.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('反应演示'),
      ),
      body: ReactionsParent(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              ReactionsWrapper(
                key: UniqueKey(),
                reactionWidth: 170,
                offset: const Offset(-190, -80),
                alignment: Alignment.bottomRight,
                reactions: [
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(12),
                      child: Icon(Icons.thumb_up),
                    ),
                  ),
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(12),
                      child: Icon(Icons.thumb_down),
                    ),
                  ),
                ],
                child: Image.network(
                  'https://i0.wp.com/www.tusktravel.com/blog/wp-content/uploads/2020/04/Mumbai-Marine-Drive.jpg?fit=1024%2C685&ssl=1',
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              ),
              ReactionsWrapper(
                key: UniqueKey(),
                reactionWidth: 170,
                alignment: Alignment.topLeft,
                offset: const Offset(20, 20),
                reactions: [
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_up),
                    ),
                  ),
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_down),
                    ),
                  ),
                ],
                child: Image.network(
                  'https://tourscanner.com/blog/wp-content/uploads/2022/07/fun-and-unusual-things-to-do-in-Mumbai.jpg',
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              ),
              ReactionsWrapper(
                key: UniqueKey(),
                reactionWidth: 170,
                alignment: Alignment.topRight,
                offset: const Offset(-190, 20),
                overlayBackgroundColor: Colors.white60,
                reactions: [
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_up),
                    ),
                  ),
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_down),
                    ),
                  ),
                ],
                child: Image.network(
                  'https://www.savaari.com/blog/wp-content/uploads/2021/12/1024px-Mumbai_Aug_2018_43397784544-1024x761.jpg',
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              ),
              ReactionsWrapper(
                key: UniqueKey(),
                reactionWidth: 170,
                alignment: Alignment.bottomLeft,
                offset: const Offset(0, 20),
                reactions: [
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_up),
                    ),
                  ),
                  Reaction(
                    onSelected: () {},
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Icon(Icons.thumb_down),
                    ),
                  ),
                ],
                child: Image.network(
                  'https://tourscanner.com/blog/wp-content/uploads/2022/07/fun-and-unusual-things-to-do-in-Mumbai.jpg',
                  height: 200,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter弹出窗口插件react_popup的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter弹出窗口插件react_popup的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用react_popup（尽管需要注意的是，react_popup并不是一个标准的Flutter插件，可能你想提到的是类似功能的Flutter插件，比如fluttertoast用于显示简单消息，或者更复杂的对话框插件如flutter_dialog。由于react_popup不直接对应Flutter中的插件，我将提供一个使用Flutter中常见对话框的示例，这通常是通过showDialog方法来实现的。）

Flutter中弹出窗口的示例代码

在Flutter中，你可以使用showDialog方法来显示一个自定义的对话框。下面是一个简单的示例，展示如何创建一个包含标题、内容和操作按钮的对话框。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showCustomDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('提示'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('这是一个自定义的对话框。'),
                Text('你可以在这里放置更多的信息或者控件。'),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text('确定'),
              onPressed: () {
                // 执行确定操作
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showCustomDialog(context),
          child: Text('显示对话框'),
        ),
      ),
    );
  }
}

代码解释

Main函数：创建并运行一个MyApp应用。
MyApp类：定义应用的主题和首页。
MyHomePage类：一个包含按钮的页面，点击按钮时会显示对话框。
_MyHomePageState类：包含按钮点击事件的处理逻辑。
_showCustomDialog方法：构建并显示一个自定义的AlertDialog。

AlertDialog包含标题（title）、内容（content）和操作按钮（actions）。
内容部分使用SingleChildScrollView和ListBody来允许滚动，这在内容较多时非常有用。
FlatButton用于定义对话框中的操作按钮，点击按钮时会调用Navigator.of(context).pop()关闭对话框。

这个示例展示了如何使用Flutter的内置功能来创建和显示一个自定义的对话框。如果你需要更复杂或特定功能的弹出窗口，可以考虑使用Flutter社区提供的第三方插件，如flutter_dialog或simple_dialogs等。