如何在 Flutter 中创建弹出窗口小部件

Question

我正在 Flutter 中构建一个照片编辑器。在我的应用程序的底部，有一个工具栏。当用户单击字体大小工具图标按钮时，我希望出现一个滑块。当用户调整完字体大小后，它应该消失。我觉得这应该很简单，但找不到具体的解决方案。 Flutter 只提供弹出菜单，我不想使用菜单。我想使用滑块。

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //Change Font
        IconButton(
          icon: const Icon(BoxIcons.bx_font),
          onPressed: () {},
        ),
        //Change Font Size
        IconButton(
          icon: const Icon(BoxIcons.bx_font_size),
          onPressed: () {
            print("Tapped");
          },
        ),
        //Justify
        IconButton(
          icon: const Icon(Icons.format_align_left),
          onPressed: () {},
        ),
        //Change Color
        IconButton(
          icon: const Icon(BoxIcons.bx_font_color),
          onPressed: () {},
        ),
        //Add Stroke
        IconButton(
          icon: const Icon(LineAwesome.heading_solid),
          onPressed: () {},
        ),
        //Add Shadow
        IconButton(
          icon: const Icon(Bootstrap.shadows),
          onPressed: () {},
        ),
      ]
    );
  }
}

我需要为每个工具选项提供一个自定义弹出窗口小部件。我真的不知道该怎么做

Answer 1

一种方法是使用堆栈构建您自己的弹出功能管理，其中仅当布尔表达式为 true 时才显示弹出窗口小部件。所以像这样：

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';

class PopUpScreen extends StatefulWidget {
  PopUpScreen({super.key});
  var showPopUp = false;
  @override
  State<PopUpScreen> createState() => _PopUpScreenState();
}

class _PopUpScreenState extends State<PopUpScreen> {
  @override

  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        
        Row(
          children: [
            IconButton(
              icon: const Icon(Icons.format_size),
              onPressed: () {
                print("Tapped");
                setState(() {
                  widget.showPopUp = true;
                });
              },
            ),
            IconButton(
              icon: const Icon(Icons.format_size),
              onPressed: () {
                print("Tapped");
                setState(() {
                  widget.showPopUp = true;
                });
              },
            ),
            IconButton(
              icon: const Icon(Icons.format_size),
              onPressed: () {
                print("Tapped");
                setState(() {
                  widget.showPopUp = true;
                });
              },
            ),
          ],
        ),
        if(widget.showPopUp)
        //Your popup widget
        Container(width: 200, height: 200, decoration: const BoxDecoration(color: Colors.green), child: const Text("popup"),),

      ],
    );
  }
}

此实现的一个问题是 showPopUp 的访问/所有权，如果您还没有这样做，我建议您将 bloc 模式与 Streambuilder 一起使用，以便可以删除此 setState 并且可以将 showPopUp 移动到 bloc 状态