Question

应用程序背后的功能：

右上角的足球是一个IconButton。
一旦单击了足球IconButton，它将在屏幕中间创建一个模式弹出窗口，而模式框的外部将变得模糊。
警报框显示标题为“成功！”。然后显示内容“您在足球界！”。

我提供了一个图像示例，说明代码成功后的外观。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple[200],
          actions: <Widget>[
            IconButton(
              icon: Icon(
                MdiIcons.soccer,
                color: Colors.grey[800],
              ),
              iconSize: 30,
              onPressed: () => {
                CupertinoAlertDialog(
                  title: Text('Success!'),
                  content: Text('You are in the football universe!'),
                ),
              },
            ),
          ],
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

问题：

没有显示错误。
正在弹出的模态功能并未受到影响。

我尝试过的不成功的事情：

我试图制作另一个无状态小部件，然后在appBar中包含该无状态小部件的名称。

Answer 1

看起来您需要调用showDialog并将CupertinoAlertDialog传递给构建器

onPressed: () => {
   showDialog(
      context: context,
      builder: (BuildContext context) => CupertinoAlertDialog(
         title: Text('Success!'),
         content: Text('You are in the football universe!')
      ),
   ),
},

Answer 2

您可以在下面复制粘贴运行完整代码
步骤1：您可以使用showDialog
步骤2：将MaterialApp移至上层void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));

代码段

Future<void> _handleClickMe() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: Text('Success!'),
          content: Text('You are in the football universe!'),
        );
      },
    );
  }

工作演示

完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  Future<void> _handleClickMe() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: Text('Success!'),
          content: Text('You are in the football universe!'),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[200],
        actions: <Widget>[
          IconButton(
            icon: Icon(
              MdiIcons.soccer,
              color: Colors.grey[800],
            ),
            iconSize: 30,
            onPressed: () => _handleClickMe(),
          ),
        ],
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

有没有一种方法可以在Flutter中使用CupertinoAlertDialog创建弹出模态？

2 个答案: