Flutter中各种对话框的使用

Flutter提供了多种对话框组件供开发者使用，以下代码中演示了常见对话框的实现，供大家参考，欢迎大家复制粘贴和吐槽。

代码语言：javascript复制

import 'package:flutter/material.dart';
// pubspec.yaml 中配置 fluttertoast: ^8.0.7
import 'package:fluttertoast/fluttertoast.dart'; 

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

// 抽离成一个单独的组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // 导航条
        appBar: AppBar(title: Text('Flutter各种对话框')),
        // 主体
        body: DialogPage(),
      ),
      theme: ThemeData(primarySwatch: Colors.yellow)
    );
  }
}

class DialogPage extends StatefulWidget {

  DialogPage({Key key}) : super(key: key);
  _DialogPageState createState() => _DialogPageState();

}

class _DialogPageState extends State<DialogPage> {

  // 提示对话框
  _showToastDialog() {
    Fluttertoast.showToast(
      msg: "提示信息",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
    );
  }

  // 确认对话框
  _showAlertDialog() async {
    var result = await showDialog(
      // 表示点击灰色背景的时候是否消失弹出框
      barrierDismissible: false, 
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("提示信息"),
          content: Text("您确定要删除吗?"),
          actions: <Widget>[
            TextButton(
              child: Text("取消"),
              onPressed: () {
                print("取消");
                Navigator.pop(context, 'Cancle');
              },
            ),
            TextButton(
              child: Text("确定"),
              onPressed: () {
                print("确定");
                Navigator.pop(context, "Ok");
              }
            )
          ]
        );
      }
    );
    print(result);
  }

  // 选择对话框
  _showSelectDialog() async {
    var result = await showDialog(
      // 表示点击灰色背景的时候是否消失弹出框
      barrierDismissible: false, 
      context: context,
      builder: (context) {
        return SimpleDialog(

          title: Text("选择内容"),
          children: <Widget>[

            SimpleDialogOption(
              child: Text("Option A"),
              onPressed: () {
                print("Option A");
                Navigator.pop(context, "A");
              },
            ),

            Divider(),

            SimpleDialogOption(
              child: Text("Option B"),
              onPressed: () {
                print("Option B");
                Navigator.pop(context, "B");
              },
            ),

            Divider(),
            
            SimpleDialogOption(
              child: Text("Option C"),
              onPressed: () {
                print("Option C");
                Navigator.pop(context, "C");
              },
            ),

            Divider()

          ]
        );
      }
    );
    print(result);
  }

  // 底部弹出选择框
  _showActionSheetDialog() async {
    var result = await showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          height: 220,
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("分享 A"),
                onTap: () {
                  Navigator.pop(context, "分享 A");
                }
              ),

              Divider(),

              ListTile(
                title: Text("分享 B"),
                onTap: () {
                  Navigator.pop(context, "分享 B");
                }
              ),

              Divider(),

              ListTile(
                title: Text("分享 C"),
                onTap: () {
                  Navigator.pop(context, "分享 C");
                }
              )
            ]
          )
        );
      }
    );
    print(result);
  }


  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[

          ElevatedButton(
            child: Text('提示对话框'),
            onPressed: _showToastDialog,
          ),

          SizedBox(height: 20),

          ElevatedButton(
            child: Text('确认对话框'),
            onPressed: _showAlertDialog,
          ),
            
          SizedBox(height: 20),

          ElevatedButton(
            child: Text('选择对话框'),
            onPressed: _showSelectDialog,
          ),

          SizedBox(height: 20),

          ElevatedButton(
            child: Text('底部弹出选择框'),
            onPressed: _showActionSheetDialog,
          )

        ]
      )
    );
  }
}

页面渲染效果如下，对话框的效果大家可自行点击查看。

渲染 flutter 开发者

0 人点赞