Flutter学习笔记弹窗

Flutter 弹窗

弹窗外层骨架

showDialog

位置：居中
动画：透明度渐变
特性：点击外部可关闭

showCupertinoDialog

位置：居中
动画：透明度渐变
特性：点击外部不可关闭

showCupertinoModalPopup

位置：居中
动画：底部位移
特性：点击外部可关闭

showModalBottomSheet

位置：底部
动画：底部位移
特性：点击外部可关闭

弹窗内容UI

AlertDialog 特性：

Android风格 Material Design
可改底色

CupertinoAlertDialog 特性：

iOS风格
不可改底色

SimpleDialog 特性：

自定义Widget
圆角 shape可改
可改底色

示例代码

在 Flutter 中，弹窗（Dialog）是一个用于显示临时内容并允许用户做出选择的 UI 元素。Flutter 提供了多种方式来显示弹窗，最常见的方式是使用 showDialog 方法。以下是一些常见的弹窗示例：

1. 简单的 AlertDialog

AlertDialog 是 Flutter 中最常用的弹窗之一，通常用于显示消息或确认操作。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 弹窗示例"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示 AlertDialog 弹窗
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('提示'),
                    content: Text('这是一个简单的弹窗。'),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop(); // 关闭弹窗
                        },
                        child: Text('确定'),
                      ),
                    ],
                  );
                },
              );
            },
            child: Text("显示弹窗"),
          ),
        ),
      ),
    );
  }
}

2. 带输入框的 Dialog

你可以在弹窗中添加文本输入框，例如，让用户输入一个名称或密码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 弹窗输入示例"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示带输入框的弹窗
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  TextEditingController controller = TextEditingController();
                  return AlertDialog(
                    title: Text('请输入你的名字'),
                    content: TextField(
                      controller: controller,
                      decoration: InputDecoration(hintText: '名字'),
                    ),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () {
                          // 获取输入框内容
                          String userName = controller.text;
                          Navigator.of(context).pop(); // 关闭弹窗
                          print('用户输入的名字: $userName');
                        },
                        child: Text('提交'),
                      ),
                    ],
                  );
                },
              );
            },
            child: Text("显示输入弹窗"),
          ),
        ),
      ),
    );
  }
}

3. 自定义样式的弹窗

你可以自定义弹窗的样式，包括背景颜色、形状、大小等。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("自定义弹窗"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 自定义弹窗
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15),
                    ),
                    elevation: 10,
                    child: Container(
                      padding: EdgeInsets.all(20),
                      height: 200,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            '这是一个自定义样式的弹窗',
                            style: TextStyle(fontSize: 18),
                          ),
                          SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop(); // 关闭弹窗
                            },
                            child: Text('关闭'),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );
            },
            child: Text("显示自定义弹窗"),
          ),
        ),
      ),
    );
  }
}

4. Loading 弹窗

你可以使用 CircularProgressIndicator 显示加载弹窗，例如在等待网络请求时使用。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("加载弹窗示例"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示加载弹窗
              showDialog(
                context: context,
                barrierDismissible: false, // 阻止点击外部关闭弹窗
                builder: (BuildContext context) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                },
              );

              // 模拟加载操作
              Future.delayed(Duration(seconds: 3), () {
                Navigator.of(context).pop(); // 加载完成后关闭弹窗
                showToast("加载完成");
              });
            },
            child: Text("显示加载弹窗"),
          ),
        ),
      ),
    );
  }

  // 自定义 toast 方法
  void showToast(String message) {
    print(message); // 这里只是模拟 toast，实际项目中可以使用第三方库
  }
}

5. 自定义 BottomSheet 弹窗

你还可以使用 showModalBottomSheet 显示底部弹窗。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("BottomSheet 弹窗"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示 BottomSheet 弹窗
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    padding: EdgeInsets.all(16),
                    height: 200,
                    color: Colors.white,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text('这是一个 BottomSheet 弹窗'),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.of(context).pop(); // 关闭弹窗
                          },
                          child: Text('关闭'),
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            child: Text("显示 BottomSheet 弹窗"),
          ),
        ),
      ),
    );
  }
}

总结

使用 showDialog 来显示弹窗，AlertDialog 是一种常见的弹窗样式。
你可以自定义弹窗的样式、内容以及行为。
Flutter 也支持 BottomSheet 和 Loading 弹窗等不同类型的弹窗。

这些是 Flutter 中弹窗的常见用法，你可以根据实际需要选择适合的方式。