如何用 Flutter 实现 Popup？

Question

我有一个 Flutter 应用程序，其屏幕使用数组有条件地呈现。 无论如何，我需要有一个像这样的弹出屏幕：

如果已将我所有的“弹出屏幕”存储在一个数组中，并将主屏幕和弹出屏幕呈现在一个堆栈中。 我不知道这是否是最好的解决方案，我想我会遇到性能问题。

这是PopupContainer类，这个 Widget 在每个 Popup Screen 上呈现，子元素作为 content 传递：

class PopupContainer extends StatefulWidget {
  final Widget? child;

  const PopupContainer({
    Key? key,
    this.child,
  }) : super(key: key);

  @override
  State<PopupContainer> createState() => _PopupContainerState();
}

class _PopupContainerState extends State<PopupContainer> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;

    return Consumer<ScreenManager>(
      builder: (context, manager, child) => Stack(
        alignment: Alignment.bottomCenter,
        children: [
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
            child: Container(
              decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            ),
          ),
          Container(
            height: height * 0.8,
            width: double.infinity,
            padding: const EdgeInsets.all(32),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
              boxShadow: [
                BoxShadow(
                  blurRadius: 37,
                  spreadRadius: 0,
                  color: Color.fromRGBO(28, 48, 72, 0.24),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  alignment: Alignment.topRight,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.zero,
                      primary: Colors.transparent,
                      shadowColor: Colors.transparent,
                    ),
                    onPressed: () => manager.closePopup(),
                    child: SvgPicture.asset('assets/close.svg'),
                  ),
                ),
                widget.child ?? const SizedBox.shrink(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

消费者用于处理屏幕状态：

enum ScreensName {
  homeScreen,
  favoriteProductsScreen,
  archivedListsScreen,
  recipesScreen,
}

enum PopupsName {
  newProductPopup,
  archivedListPopup,
  editProductPopup,
  newRecipePopup,
}

const screens = <ScreensName, Widget>{
  ScreensName.homeScreen: HomeScreen(),
  ScreensName.favoriteProductsScreen: FavoriteProductsScreen(),
  ScreensName.archivedListsScreen: ArchivedListsScreen(),
  ScreensName.recipesScreen: RecipesScreen(),
};

const popups = <PopupsName, Widget>{
  PopupsName.newProductPopup: NewProductPopup(),
};

class ScreenManager extends ChangeNotifier {
  static ScreensName screenName = ScreensName.homeScreen;
  static PopupsName? popupName = PopupsName.newProductPopup;

  get currentScreen => screens[screenName];
  get currentPopup => (popups[popupName] ?? Container());

  /// Open the given popup.
  void openPopup(PopupsName newPopupName) {
    popupName = newPopupName;

    notifyListeners();
  }

  /// Closes the current popup.
  void closePopup() {
    popupName = null;

    notifyListeners();
  }

  /// Change the screen.
  void setScreen(ScreensName newScreenName) {
    screenName = newScreenName;

    notifyListeners();
  }
}

最后，主要的组件构建方法（我也有一些主题样式，但在这里没用）：

Widget build(BuildContext context) {
    DatabaseHelper.initDb();

    return Consumer<ScreenManager>(
      builder: (context, screenManager, child) => Material(
        child: MaterialApp(
          title: _title,
          theme: _customTheme(),
          home: Stack(
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              screenManager.currentScreen,
              screenManager.currentPopup,
            ],
          ),
        ),
      ),
    );
  }

PS：我是一名网络开发人员，所以我知道主要的编程原则，但 Dart 和移动开发对我来说是全新的。 另外，我可以和你分享我的代码，但是，这个项目被分成文件，在帖子中会占用太多空间。 问你是否需要它！

Answer 1

也许更简单的解决方案是在需要触发弹出窗口的地方使用 showDialog 函数。 查看文档https://api.flutter.dev/flutter/material/showDialog.html

showDialog(context: context, builder: (context) => AlertDialog(title: Text('Title'), content: Text('Here content'),));