八、弹窗Alert

对话框是一种重要的UI元素，用于显示重要信息、确认用户决策或收集用户输入。通常一个对话框会包含标题、内容，以及一些操作按钮，为此，Material库中提供了一些现成的对话框组件来用于快速的构建出一个完整的对话框。

AlertDialog

用于显示需要用户确认的紧急信息或决策。通常包含标题、内容以及一组操作按钮

const AlertDialog({
  Key? key,
  this.title, //对话框标题组件
  this.titlePadding, // 标题填充
  this.titleTextStyle, //标题文本样式
  this.content, // 对话框内容组件
  this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), //内容的填充
  this.contentTextStyle,// 内容文本样式
  this.actions, // 对话框操作按钮组
  this.backgroundColor, // 对话框背景色
  this.elevation,// 对话框的阴影
  this.semanticLabel, //对话框语义化标签(用于读屏软件)
  this.shape, // 对话框外形
})

SimpleDialog

用于向用户提供多个选项。它可以包含标题和多个SimpleDialogOption

showModalBottomSheet

用于从屏幕底部弹出一个模态底部面板，常用于显示菜单、选择器或其他次级界面

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        ElevatedButton(
          child: Text('对话框1 AlertDialog'),
          onPressed: () {
            showDialog<void>(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('对话框AlertDialog'),
                  content: SingleChildScrollView(
                    child: ListBody(
                      children: <Text>[
                        Text('This is an alert dialog.'),
                        Text('Would you like to approve of this message?'),
                      ],
                    ),
                  ),
                  actions: <Widget>[
                    TextButton(
                      child: Text('关闭对话框'),
                      onPressed: () {
                        Navigator.of(context).pop(); // 关闭对话框
                      },
                    ),
                  ],
                );
              },
            );
          },
        ),

        ElevatedButton(
          child: Text('对话框SimpleDialog'),
          onPressed: () {
            showDialog<void>(
              context: context,
              builder: (BuildContext context) {
                return SimpleDialog(
                  title: Text('对话框SimpleDialog'),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () { /* 处理点击事件 */ },
                      child: const Text('Option 1'),
                    ),
                    SimpleDialogOption(
                      onPressed: () { /* 处理点击事件 */ },
                      child: const Text('Option 2'),
                    ),
                  ],
                );
              },
            );
          },
        ),
        
        ElevatedButton(
          child: Text('showModalBottomSheet'),
          onPressed: () {
            showModalBottomSheet<void>(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200,
                  color: Colors.amber,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text('Modal BottomSheet'),
                        ElevatedButton(
                          child: Text('Close BottomSheet'),
                          onPressed: () => Navigator.pop(context),
                        )
                      ],
                    ),
                  ),
                );
              },
            );
          },
        ),

        ElevatedButton(
          child: Text('对话框Dialog'),
          onPressed: () {

            Future<void> showListDialog() async {
              int? index = await showDialog<int>(
                context: context,
                builder: (BuildContext context) {
                  var child = Column(
                    children: <Widget>[
                      ListTile(title: Text("请选择")),
                      Expanded(
                          child: ListView.builder(
                        itemCount: 30,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text("$index"),
                            onTap: () => Navigator.of(context).pop(index),
                          );
                        },
                      )),
                    ],
                  );
                  //使用AlertDialog会报错
                  //return AlertDialog(content: child);
                  return Dialog(child: child);
                },
              );
              if (index != null) {
                print("点击了：$index");
              }
            }

          },
        ),
      ])),
    );
  }
}