Flutter - FloatingActionButton 中的 SimpleDialog答案

【问题标题】：Flutter - SimpleDialog in FloatingActionButtonFlutter - FloatingActionButton 中的 SimpleDialog
【发布时间】：2017-11-23 04:07:54
【问题描述】：

我试图在点击FloatingActionButton 后创建一个SimpleDialog，但是当按下该按钮时没有任何反应。

我做错了什么？

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    floatingActionButton: new FloatingActionButton(
      tooltip: 'Add',
      child: new Icon(Icons.add),
      backgroundColor: new Color(0xFFF44336),
      onPressed: (){
        new SimpleDialog(
          title: new Text('Test'),
          children: <Widget>[
            new RadioListTile(
              title: new Text('Testing'), value: null, groupValue: null, onChanged: (value) {},
            )
          ],
        );
      }     
    ),    
  );
}

【问题讨论】：

标签： dart flutter

【解决方案1】：

您需要将其包装在显示操作对话框中。

showDialog(context: context, builder: (BuildContext context) {
   return new AlertDialog(
      title: new Text("My Super title"),
      content: new Text("Hello World"),
   );
}

【讨论】：

这个答案是正确的。您也很可能最终想要获得对话的结果，在这种情况下，您可以await showDialog 的结果并将您想要返回的值放入对话操作中对Navigator.pop() 的调用中。
经过多次尝试后，我终于找到了问题所在：如果您的应用声明了localizationDelegates 的列表，但您忘记包含GlobalMaterialLocalizations.delegate 和/或GlobalWidgetsLocalizations.delegate，则对话框不会完全显示
这已经过时了

【解决方案2】：

我注意到接受的答案是使用 child 代替 showDialog，这实际上已被弃用，所以我建议避免使用它。你应该改用builder，我提供了一个例子：

onPressed: () {
    showDialog(
        context: context,
        builder: (_) => AlertDialog(
            title: Text('Dialog Title'),
            content: Text('This is my content'),
        )
    );
}

【讨论】：

谢谢吉尔！顺便说一句，你把我的姓拼错了 O'Sullivan 不是 Sullivan :)

【解决方案3】：

在显示来自floatingActionButton 的对话框时应该注意一个特定的场景

如果你这样写代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (ctxt) => new AlertDialog(
                    title: Text("Text Dialog"),
                  )
              );
            }),
      )
    );
  }
}

它不会显示警报对话框，但会抛出异常“未找到 MaterialLocalizations”。

当MaterialApp 不是调用对话框的根时会发生这种情况。在这种情况下，根小部件是应用程序。但是，如果我们将代码更改为

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppImpl()
    );
  }
}

class MyAppImpl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (ctxt) => new AlertDialog(
                  title: Text("Text Dialog"),
                )
            );
          }),
    );
  }
}

MaterialApp 成为根，一切正常。在这种情况下，flutter 会自动创建 Material Localiation，否则需要手动创建。

我在官方文档中没有找到任何相同的文档。

希望对你有帮助

【讨论】：

【解决方案4】：

要做到这一点，请遵循下面给出的代码

首先在您的pubspec.yaml 文件中添加rflutter_alert 依赖项

dependencies:
   rflutter_alert: ^1.0.3

导入到你想使用的地方

import 'package:rflutter_alert/rflutter_alert.dart';

并创建一个函数来打开

 confirmationPopup(BuildContext dialogContext) {
    var alertStyle = AlertStyle(
      animationType: AnimationType.grow,
      overlayColor: Colors.black87,
      isCloseButton: true,
      isOverlayTapDismiss: true,
      titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
      descStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
      animationDuration: Duration(milliseconds: 400),
    );

    Alert(
        context: dialogContext,
        style: alertStyle,
        title: "Detete?",
        desc: "Are you sure you want to delete this Gatekeeper?",
        buttons: [
          DialogButton(
            child: Text(
              "Cancel",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
            color: appThemeColor,
          ),
          DialogButton(
            child: Text(
              "Delete",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
            color: appThemeColor,
          )
        ]).show();
  }

在你想打开的地方调用它

 onTap: () {
    confirmationPopup(context);
 },

【讨论】：