如何在Flutter容器中添加关闭图标

Question

如何在Flutter容器中添加关闭图标。感谢您的帮助。

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,
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    },
  );
}

- Nidew

Answer 1

您可以使用AlertDialog小部件，并使用Column将关闭按钮作为title的一部分。您可以使用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

使用FractionalOffset进行对齐

- Sparkringo

Answer 2

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,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

- Vikas Awate

---

由于您目前的回答不够清晰，请[编辑]以添加其他细节，以帮助其他人理解这如何回答所提出的问题。您可以在[帮助中心]（/help/how-to-answer）找到有关编写良好答案的更多信息。 - Community

Answer 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,
                ))
              ],
            ),
          ),
        );
      },
    );
  }

- ABV

Answer 4

你应该看一下Stack小部件。它可以让你将更多的小部件叠放在一起。

例如：

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

)

这样应该可以工作

- samUser1