如何向容器颤动添加关闭图标答案

【问题标题】：how to add a close icon to a container flutter如何向容器颤动添加关闭图标
【发布时间】：2022-06-15 20:06:50
【问题描述】：

如何向容器颤动添加关闭图标。感谢您在这方面的帮助。

showDialogFunc(context, img, cal, index, id, cid, status) {
  final Size = MediaQuery.of(context).size;
  return showDialog(
    context: context,
    builder: (context) {
      return Center(
        child: Material(
          type: MaterialType.transparency,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              // color: backgroundBlue,
              gradient: boxGradient,
            ),
            padding: const EdgeInsets.only(top: 5, bottom: 5),
            width: 350,
            height: 350,
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.network(
                    img,
                    height: 250,
                    width: 250,
                    fit: BoxFit.contain,
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    },
  );
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您应该看看Stack 小部件。它可以让您放置更多的小部件，一个在另一个之上。

例如：

Stack(
  children: [
    Align(
       alignment: Alignment.topRight,
       child: IconButton(
          child: Icon(Icons.close),
          onPressed: () => Navigator.of(context).pop()
       )
    ),
    Material(
       //your code
    ),
  ]

)

类似的东西应该可以工作

【讨论】：

【解决方案2】：

您可以使用AlertDialog 小部件并将关闭按钮作为title 的一部分使用Column。您可以使用Container 中的alignment 属性将关闭按钮放在右上角，并将titlePadding 设置为零。

这是一个非常简单的例子：

void _showDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        titlePadding: EdgeInsets.zero,
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              alignment: FractionalOffset.topRight,
              child: IconButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                icon: const Icon(Icons.clear),
              ),
            ),
            const Text('Title'),
          ],
        ),
        content: const Text('Message here'),
      ),
    );
  }

Flutter 文档中的更多信息：

AlertDialog

Alignment using FractionalOffset

【讨论】：

【解决方案3】：

请检查更新后的代码，如下所示。如果要在里面制作取消按钮，请更改 margin: const EdgeInsets.all(25)

showDialogFunc(context, img, cal, index, id, cid, status) {
    return showDialog(
      context: context,
      builder: (context) {
        return Center(
          child: Material(
            type: MaterialType.transparency,
            child: Stack(
              alignment: Alignment.topRight,
              children: [
                Container(
                  margin: const EdgeInsets.all(25),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    color: Colors.red,
                    // gradient: boxGradient,
                  ),
                  padding: const EdgeInsets.only(top: 5, bottom: 5),
                  width: 350,
                  height: 350,
                  child: Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.network(
                          img,
                          height: 250,
                          width: 250,
                          fit: BoxFit.contain,
                        ),
                      ],
                    ),
                  ),
                ),
                InkWell(
                  onTap: (){
                    //perform action here.
                  },
                    child: Icon(
                  Icons.cancel,
                  color: Colors.white,
                  size: 50,
                ))
              ],
            ),
          ),
        );
      },
    );
  }

【讨论】：

【解决方案4】：

code snippet :
            

            Stack(
                  children: [
                    //your code,
                    Positioned(
                      right: 10,
                      top: 10,
                      child: GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Align(
                          alignment: Alignment.topRight,
                          child: CircleAvatar(
                            key: const Key('closeIconKey'),
                            radius: 15,
                            backgroundColor: Colors.white,
                            child: Icon(
                              Icons.close,
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。