Flutter学习：弹出Dialog的简单使用

terry 2年前 (2023-09-23) 阅读数 68 #移动小程序

分享一个共同的任务——弹出Dialog。对于Flutter来说，一切都是一个widget，所以打开Dialog也添加了一个widget。一个特殊的API是show Dialog。但与原生不同的是，Flutter 的 showDialog 本质上是一条通往push的新路线。更多信息请参见Dialog程序的源代码：

可以看到，最本质的就是调用Navigator.of()。push走上了一条新的道路。而这条新路线就是我们的Dialog。

示例

了解了展示Dialog的原理后，我们就开始编写示例。页面如下：

是嵌套收音机上的Dialog效应。首先，我使用系统提供的Alert类。警报类具有我们需要使用的三个属性，即标题、操作和内容。顾名思义，标题是顶部的标题，操作是底部的确定和取消按钮，内容是中间的内容部分是单选。

首先是一个抽象的自定义Alert Dialog，我调整了一些基本样式并保留了一些属性。

import 'package:flutter/material.dart';

import '../common_widget.dart';

class CustomAlertDialog extends StatelessWidget {
  CustomAlertDialog({Key key, @required this.title, @required this.contentWidget, this.showCancel = true, this.showConfirm = true, this.actionWidgets}) : super(key: key);

  final bool showCancel;
  final bool showConfirm;
  final String title;
  final Widget contentWidget;
  final List<Widget> actionWidgets;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
        title: Common.primaryBigTitle(content: title),
        elevation: 12.0,
        titlePadding: EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 12),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
        actions: _buildActionWidget(context),
        content: contentWidget);
  }

  _buildActionWidget(BuildContext context) {
    List<Widget> actionWidgets = this.actionWidgets;
    if (actionWidgets == null) {
      actionWidgets = [];
      if(showConfirm) {
        actionWidgets.add(FlatButton(onPressed: () => Navigator.of(context).pop(), child: Text("确定")));
      }
      if(showCancel) {
        actionWidgets.add(FlatButton(onPressed: () => Navigator.of(context).pop(), child: Text("取消")));
      }
    }
    return actionWidgets;
  }
}

复制代码

接下来，我自定义Dialog的收音机如下：


import 'package:flutter/material.dart';

import '../common_widget.dart';
import 'custom_alert_dialog.dart';

class RadioAlertDialog extends StatelessWidget {
  RadioAlertDialog({Key key, @required this.title, @required this.selectValue, this.showCancel = true, this.showConfirm = true, @required this.valueList}) : super(key: key);

  final bool showCancel;
  final bool showConfirm;
  final String title;
  final String selectValue;
  final List<String> valueList;

  @override
  Widget build(BuildContext context) {
    return CustomAlertDialog(
      title: title,
      contentWidget:Container(child: Column(mainAxisSize: MainAxisSize.min, children: _buildRadioList(context))),
      showCancel: showCancel,
      showConfirm: showConfirm,
    );
  }

  _buildRadioList(BuildContext context) {
    List<Widget> radioList = [];
    valueList.forEach((String value) => radioList.add(RadioListTile<String>(
        value: value,
        title: Common.primaryTitle(content: value),
        activeColor: Colors.blue,
        groupValue: '$selectValue',
        onChanged: (value) {
          Navigator.of(context).pop(value);
        })));
    return radioList;
  }
}

复制代码

自定义完这两个小部件后，下一步就很简单了，只需调用Show Dialog即可：


   showDialog<String>(
              context: context,
              builder: (context) {
                String selectValue = '${settingsStore.showPage}';
                List<String> valueList = ["首页", "生活"];
                return RadioAlertDialog(title: "选择展示页面",
                    selectValue: selectValue,
                    valueList: valueList);
              }).then((value) {
                print(value);
                settingsStore.saveShowPage(value);
          });

复制代码

放置您需要显示的收音机文本。只需跳过数组并输入所选文本即可。细心的朋友注意到，节目中Dialog甚至在那时就呼吁进行逻辑处理。前面说过，秀Dialog其实是在路由push。 Flutter支持路由后传递参数返回上一页。因此，当选择单选时，调用Navigator.of(context).pop(value)来选择它。文本将移回到上一个小部件。