Flutter弹出窗口插件popup的使用

特性

一个弹窗组件，使用PopupRoute弹出。

开始使用

导入 package:popup/popup.dart

使用Builder包裹点击的Widget，调用showPopup方法即可。

属性

属性名	类型	默认值	简介
context	BuildContext	必填	为了方便获取点击的widget的尺寸和位置
child	Widget	必填	弹出的widget
margin	EdgeInsets	EdgeInsets.zero	弹窗边距
position	PopPosition	PopPosition.top	弹出的位置
arrowSize	double	10	箭头的尺寸
arrowAspectRatio	double	0.5	箭头高宽比
arrowColor	Color	Colors.black	箭头颜色
showArrow	bool	true	是否显示箭头
space	double	0	点击的widget与弹窗箭头之间的间距
barrierColor	Color	null	弹窗背景颜色

使用示例

import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Popup Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Popup Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 50,
            top: 100,
            child: _buildChild(PopPosition.top),
          ),
          Positioned(
            left: 150,
            bottom: 100,
            child: _buildChild(PopPosition.bottom),
          ),
          Positioned(
            left: 100,
            top: 300,
            child: _buildChild(PopPosition.left),
          ),
          Positioned(
            right: 100,
            top: 300,
            child: _buildChild(PopPosition.right),
          ),
        ],
      ),
    );
  }

  Builder _buildChild(PopPosition position) {
    var name = position.name.split(".").first;
    return Builder(builder: (context) {
      return GestureDetector(
        onLongPress: () {
          showPopup(
              position: position,
              context: context,
              margin: const EdgeInsets.symmetric(horizontal: 5),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.black,
                ),
                padding: const EdgeInsets.all(4),
                child: Text(
                  List.generate(Random().nextInt(10) + 3, (index) => name).toString(),
                  style: const TextStyle(color: Colors.white),
                ),
              ));
        },
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.red)),
          width: 100,
          height: 100,
          child: Center(
            child: Text(name),
          ),
        ),
      );
    });
  }
}

代码解释

导入依赖:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:popup/popup.dart';

主应用:

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

MyApp类:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Popup Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Popup Demo'),
    );
  }
}

MyHomePage类:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

_MyHomePageState类:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 50,
            top: 100,
            child: _buildChild(PopPosition.top),
          ),
          Positioned(
            left: 150,
            bottom: 100,
            child: _buildChild(PopPosition.bottom),
          ),
          Positioned(
            left: 100,
            top: 300,
            child: _buildChild(PopPosition.left),
          ),
          Positioned(
            right: 100,
            top: 300,
            child: _buildChild(PopPosition.right),
          ),
        ],
      ),
    );
  }

  Builder _buildChild(PopPosition position) {
    var name = position.name.split(".").first;
    return Builder(builder: (context) {
      return GestureDetector(
        onLongPress: () {
          showPopup(
              position: position,
              context: context,
              margin: const EdgeInsets.symmetric(horizontal: 5),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.black,
                ),
                padding: const EdgeInsets.all(4),
                child: Text(
                  List.generate(Random().nextInt(10) + 3, (index) => name).toString(),
                  style: const TextStyle(color: Colors.white),
                ),
              ));
        },
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.red)),
          width: 100,
          height: 100,
          child: Center(
            child: Text(name),
          ),
        ),
      );
    });
  }
}

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

caililin 1楼

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

在Flutter中，popup_menu 是一种常用的弹出窗口插件，可以用于显示一个菜单列表。尽管 Flutter 本身并没有一个官方名为 popup_menu 的插件（通常我们直接使用 Flutter 提供的 showMenu 方法来实现弹出菜单），但如果你指的是一个第三方插件或者是一个自定义的弹出窗口，我可以提供一个基于 Flutter 内置 showMenu 方法的示例代码。

以下是一个使用 Flutter 内置 showMenu 方法创建弹出菜单的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Popup Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Popup Menu Example'),
        ),
        body: Center(
          child: PopupMenuButton<String>(
            icon: Icon(Icons.more_vert),
            onSelected: (String value) {
              // 处理菜单项点击事件
              print('You selected: $value');
            },
            itemBuilder: (BuildContext context) {
              return ['Item 1', 'Item 2', 'Item 3'].map<PopupMenuItem<String>>((String choice) {
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice),
                );
              }).toList();
            },
          ),
        ),
      ),
    );
  }
}

代码解释：

导入必要的包：

import 'package:flutter/material.dart';

创建主应用：
```
void main() {
  runApp(MyApp());
}
```

定义主应用组件：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Popup Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Popup Menu Example'),
        ),
        body: Center(
          child: PopupMenuButton<String>(
            icon: Icon(Icons.more_vert),
            onSelected: (String value) {
              // 处理菜单项点击事件
              print('You selected: $value');
            },
            itemBuilder: (BuildContext context) {
              return ['Item 1', 'Item 2', 'Item 3'].map<PopupMenuItem<String>>((String choice) {
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice),
                );
              }).toList();
            },
          ),
        ),
      ),
    );
  }
}

PopupMenuButton 是一个按钮，当用户点击它时，会显示一个弹出菜单。
icon 属性定义了按钮的图标。
onSelected 是一个回调函数，当用户选择一个菜单项时会调用它。
itemBuilder 是一个构建菜单项的回调函数，它返回一个 PopupMenuItem 列表。

这个示例展示了如何使用 Flutter 内置的 PopupMenuButton 来创建一个简单的弹出菜单。如果你需要更复杂的弹出窗口功能，可能需要探索第三方插件或者自定义实现。