如何更改对话框位置以显示对话框？

Question

当前对话框显示在屏幕中央。 我想在添加图标之后显示对话框。

代码：

Widget build(BuildContext context) {
    return Scaffold(
        body: ListTile(
          leading: IconButton(
            icon: const Icon(Icons.add),
            onPressed: () async {
              await showDialogOnButtonPress();
            },
          ),
          title: const Text("Title 1"),
        ) 
        );
    }

showDialogOnButtonPress() 功能：

showDialogOnButtonPress() {
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return const Dialog(
                child: ListTile(
                  dense: true,
                  title: Text(
                    "Alert!",
                  ),
                ),
              );});}

谢谢。

Answer 1

尝试以下代码集

alignment: Alignment.topLeft,

:

showDialogOnButtonPress(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return const Dialog(
            alignment: Alignment.topLeft,
            child: ListTile(
              dense: true,
              title: Text(
                "Alert!",
              ),
            ),
          );
        });
  }

小部件：

ListTile(
  leading: IconButton(
    icon: const Icon(Icons.add),
    onPressed: () async {
      await showDialogOnButtonPress(context);
    },
  ),
  title: const Text("Title 1"),
),

结果->

Answer 2

您可以像这样对齐和定位对话框。

showDialog(
  context: context,
  barrierDismissible: true,
  builder: (BuildContext context) {
    return Dialog(
      alignment: Alignment.topLeft,
      insetPadding: EdgeInsets.only(left: 5, top: 20),
      child: Container(
        width: 100,
        child: ListTile(
          title: Text("Alert!"),
        ),
      ),
    );
  },
);

Answer 3

我建议您使用此小部件旁边的可见性小部件，并在成功添加后将可见状态更改为 true。

Answer 4

也许您可以使用

Overlay

代替

Dialog

。

late OverlayEntry _popupDialog;

void _showPopupDialog(int titleIndex) {
  _popupDialog = _buildPopupDialog(titleIndex);
  Overlay.of(context)?.insert(_popupDialog);
}

void _dismissPopupDialog() {
  _popupDialog.remove();
}

OverlayEntry _buildPopupDialog(int index) {

  RenderBox renderBox = ...; // find the title, as the anchor view of popupDialog
  final size = renderBox.size;
  final offset = renderBox.localToGlobal(Offset.zero);

  return OverlayEntry(
    builder: (context) => Positioned(
      left: offset.dx,
      top: offset.dy + size.height,
        child: Material( // make it seems like a dialog
          elevation: 8,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
          child: Container(
            width: ...,
            height: ...,
            child: ...,
           ),
      ),
    )
  );
}

如果您的对话框将显示可选列表，则

DropdownButton

和

DropdownMenuItem

会更好。

Answer 5

您可以像这样对齐和定位对话框小部件。

showDialog(
       context: context,
       builder: (context) {
           return Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                  width: 100,
                      child: ListTile(
                       title: Text("Alert!"),
                      ),
                   ),
                );
             });

  

Answer 6

1. 记住对话框小部件是居中对齐的，它并不意味着可以自定义。

2. 即使您想要自定义位置，也可以使用堆栈和定位小部件来实现自定义结果。

// Replace Dialog widget with below code for custom result.
Stack(
   children: [
      Positioned(
         top: MediaQuery.of(context).size.height * 0.50,
         child: => your ListTile widget goes here.
      ),
    ],
)

3. 回答问题的剩余部分，即如何根据列表中元素数量的变化为对话框提供动态变化的位置 -> 这里有很好的解释：https://blog.logrocket.com/ Complete-guide-implementing-overlays-flutter/#:~:text=GitHub%20repository.-,示例%203%3A%20The%20Overlay%20widget%20follows%20while%20scrolling,-类似%20to%20the