实现模态对话框的flutter windows程序示例

这是一个实现类似于标准Windows模态对话框的flutter windows示例程序。点击主窗口按钮打开，对话框，对话框中有三个可编辑框，点击对话框确认按钮，返回三个编辑框的数据给主窗口显示。 点击对话框以外的区域或者按下ESC键，对话框不返回，实现了类似QT程序的标准模态对话框功能。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _data1 = '';
  String _data2 = '';
  String _data3 = '';

  void _showDialog() async {
    final result = await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        String data1 = '';
        String data2 = '';
        String data3 = '';
        return WillPopScope(
          onWillPop: () async => false, // 阻止按下Esc键关闭对话框
          child: AlertDialog(
            title: Text('Edit Data'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                TextField(
                  onChanged: (value) {
                    data1 = value;
                  },
                  decoration: InputDecoration(hintText: 'Enter data 1'),
                ),
                TextField(
                  onChanged: (value) {
                    data2 = value;
                  },
                  decoration: InputDecoration(hintText: 'Enter data 2'),
                ),
                TextField(
                  onChanged: (value) {
                    data3 = value;
                  },
                  decoration: InputDecoration(hintText: 'Enter data 3'),
                ),
              ],
            ),
            actions: <Widget>[
              TextButton(
                child: Text('Cancel'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              TextButton(
                child: Text('Confirm'),
                onPressed: () {
                  Navigator.of(context).pop('$data1,$data2,$data3');
                },
              ),
            ],
          ),
        );
      },
      barrierDismissible: false, // 禁止点击外部区域关闭对话框
    );

    if (result != null) {
      List<String> dataList = result.split(',');
      setState(() {
        _data1 = dataList[0];
        _data2 = dataList[1];
        _data3 = dataList[2];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Windows Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Data 1: $_data1'),
            Text('Data 2: $_data2'),
            Text('Data 3: $_data3'),
            ElevatedButton(
              onPressed: _showDialog,
              child: Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
这段代码是一个使用 Flutter 框架构建的应用程序。它主要包含以下几个部分：
导入必要的包：import ‘package:flutter/material.dart’;，引入了 Flutter 的基础组件库。

main函数：
作为应用程序的入口点，调用runApp函数启动应用，并传入MyApp实例
。
MyApp类：
继承自StatelessWidget，用于定义应用的整体结构和主题。

MyHomePage类：
继承自StatefulWidget，包含应用的主要页面逻辑和状态管理。

_MyHomePageState类：
与MyHomePage相关联的状态类，负责处理页面的交互和状态更新。

二、功能描述
应用启动：
在main函数中，调用runApp(MyApp())启动应用，显示MyApp定义的界面。

MyApp类：
build方法返回一个MaterialApp实例，设置了应用的标题为 ‘Flutter Demo’，主题颜色为蓝色（通过primarySwatch: Colors.blue），并指定了应用的首页为MyHomePage。

MyHomePage类和_MyHomePageState类：
MyHomePage是一个有状态的小部件，它的状态由_MyHomePageState管理。

状态变量：
_data1、_data2、_data3用于存储用户输入的数据。

_showDialog方法：
该方法用于显示一个对话框，让用户输入三个数据。
使用showDialog函数创建一个对话框，该对话框包含三个TextField用于输入 数据，以及 “Cancel” 和 “Confirm” 按钮。
onWillPop设置为false，阻止按下 Esc 键关闭对话框。barrierDismissible设 置为false，禁止点击外部区域关闭对话框。
当用户点击 “Confirm” 按钮时，将三个输入的数据拼接成一个字符串，并通过Navigator.of(context).pop返回给调用者。

build方法：
返回一个Scaffold，包含应用栏（AppBar）、页面主体内容（body）和一个按钮（ElevatedButton）。
主体内容是一个居中的列（Column），显示三个文本（分别显示_data1、_data2、_data3的值）和一个按钮。
当按钮被点击时，调用_showDialog方法显示对话框。
如果对话框返回了非空值，将其分割成三个数据，并通过setState更新状态变量，从而更新页面显示。

三、总结
这段代码实现了一个简单的 Flutter 应用，用户可以通过点击按钮打开一个对话框，输入三个数据，然后点击 “Confirm” 按钮将数据更新到页面上显示。通过状态管理和对话框的交互，实现了数据的输入和展示功能。