顫振| 如何在任何疊加層之上顯示 AlertDialog？

Question

如何始終在屏幕上的任何內容上方顯示 AlertDialog？

代碼：

import 'package:flutter/material.dart';

class CountriesField extends StatefulWidget {
  @override
  _CountriesFieldState createState() => _CountriesFieldState();
}

class _CountriesFieldState extends State<CountriesField> {
  final FocusNode _focusNode = FocusNode();

  OverlayEntry _overlayEntry;

  final LayerLink _layerLink = LayerLink();

  @override
  void initState() {
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        this._overlayEntry = this._createOverlayEntry();
        Overlay.of(context).insert(this._overlayEntry);
      } else {
//        this._overlayEntry.remove();
      }
    });
  }

  OverlayEntry _createOverlayEntry() {
    RenderBox renderBox = context.findRenderObject();
    var size = renderBox.size;

    return OverlayEntry(
        builder: (context) => Positioned(
              width: size.width,
              child: CompositedTransformFollower(
                link: this._layerLink,
                showWhenUnlinked: false,
                offset: Offset(0.0, size.height + 5.0),
                child: Material(
                  elevation: 4.0,
                  child: ListView(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    children: <Widget>[
                      ListTile(
                        title: Text('Syria'),
                        onTap: () {
                          print('Syria Tapped');
                        },
                      ),
                      ListTile(
                        title: Text('Lebanon'),
                        onTap: () {
                          print('Lebanon Tapped');
                        },
                      )
                    ],
                  ),
                ),
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return CompositedTransformTarget(
      link: this._layerLink,
      child: Material(
        child: TextFormField(
          focusNode: this._focusNode,
          decoration: InputDecoration(labelText: 'Country'),
        ),
      ),
    );
  }
}


class FormPage extends StatefulWidget {
  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Material(elevation: 4.0, child: CountriesField()),
          RaisedButton(
            child: Text('Help dialog'),
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text("Help"),
                      content: Text("This should show on top of any overlay"),
                      actions: <Widget>[
                        FlatButton(
                          child: Text("Close"),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    );
                  });
            },
          )
        ],
      ),
    );
  }
}

Answer 1

沒有簡單的方法可以讓對話框出現在疊加層之上。 根據您的用例，您可以將兩者都轉換為Overlay ，也可以將兩者都轉換為Dialog 。

這是使用showDialog方法將兩者都轉換為對話框的示例：

顯示對話框時，您不必返回AlertDialog小部件，例如，這里我返回一個填充為白色的Container ，並在后面包含一個“菜單 A”對話框的ListView 。

使用showDialog ，您可以獲得自動功能，例如調showDialog背景並單擊外部任意位置以關閉。 如果您不想要這些或任何其他對話框內容，並且找不到輕松禁用它們的方法，您可以隨時反過來將兩者都轉換為Overlay 。

對於疊加層，以最新插入的為准，顯示在頂部。