Flutter开发之SimpleDialog对话框组件-1（40）

最新推荐文章于 2025-06-09 09:00:00 发布

原创最新推荐文章于 2025-06-09 09:00:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#SimpleDialog #SimpleDialog属性的设置 #SimpleDialog对话框组件 #Flutter SimpleDialog对话框组件的使用 #手动关闭SimpleDialog

Flutter开发教程专栏收录该内容

59 篇文章

订阅专栏

本文介绍如何使用Flutter中的SimpleDialog组件创建基本对话框。通过示例代码展示了如何自定义对话框样式并添加交互选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单对话框组件在移动开发的交互中比较常用到，用于提示信息、警告、选择等功能。今天就学习一下简单的对话框组件SimpleDialog。

效果如图：
在这里插入图片描述

代码非常简单：

import 'package:flutter/material.dart';

class SimpleDialogTest extends StatefulWidget {
  @override
  createState()=>SimpleDialogTestState();
}

class SimpleDialogTestState extends State<SimpleDialogTest> {

  void _showMySimpleDialog(){
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          backgroundColor:Colors.deepOrange,
          title: const Text('对话框标题',textAlign:TextAlign.center,style: TextStyle(color: Colors.white),),
          children: [
            SimpleDialogOption(
              onPressed: () {
                print('第一行信息');
                // 使用showDialog后，手动关闭当前dialog，其实原因很简单，因为dialog其实是另一个页面，准确地来说是另一个路由，
                // 因此dialog的关闭也是通过navigator来pop的，所以它的地位跟你当前主页面一样。
                Navigator.pop(context);
              },
              child: const Text('第一行信息'),
            ),
            SimpleDialogOption(
              onPressed: () {
                print('第二行信息');
                Navigator.pop(context);
              },
              child: const Text('第二行信息'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'SimpleDialog组件示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SimpleDialog组件示例'),
        ),
        body: new Center(
          child:  new RaisedButton(
              onPressed: _showMySimpleDialog,
              child: new Text("Dialog出来"),
              color: Colors.blue,
              highlightColor: Colors.lightBlueAccent,
              disabledColor: Colors.lightBlueAccent),

        ),
      ),
    );
  }
}

OK 简单的会使用就举行了。以后慢慢研究更复杂的用法！