如何将取消图标放置在右上角

Question

这是我的代码

 InkWell(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Align(
                          alignment: Alignment(1,-1),
                          child: CircleAvatar(
                            maxRadius: 20,
                            backgroundColor: Colors.transparent,
                            child: Image.asset('assets/cancel.png',height: 30,),
                          ),
                        ),
                      ),

我搞定了

我想要这样

- Jaini Shah

---

欢迎来到Stack Overflow。 - Rahul Kushwaha

你是否正在使用 AlertDialog？你可以分享一下 PopUp Container 的父部件吗？ - Riyan

你在使用 AlertDialog 吗？能否请你分享一下 PopUp Container 的父部件？ - Riyan

是的，警告对话框 - Jaini Shah

是的，警告对话框 - Jaini Shah

Answer 1

不确定你的父部件是什么？ 我看到你的截图似乎在使用show dialog。

假设你正在使用AlertDialog，你可以很容易地通过使用“stack” + “positioned”来实现布局，将取消图像放置在你想要的位置。 如下所示：

showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                            title: Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Text("Title"),
                                Positioned(
                                    top: -20,
                                    right: -20,
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.pop(context);
                                      },
                                      child: Align(
                                        alignment: Alignment(1, -1),
                                        child: CircleAvatar(
                                            maxRadius: 20,
                                            backgroundColor: Colors.transparent,
                                            child:
                                                Icon(Icons.cancel, size: 30)),
                                      ),
                                    ))
                              ],
                            ),
                            content: Container(
                              height: 200,
                              width: 500,
                              child: Text("Some data"),
                            ));
                      });

这里是一个例子

- Jason

Answer 2

如果你正在使用AlertDialog，那么你可以使用icon和iconPadding来将close图标放在右上角。

  Future<void> _showMyDialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          iconPadding: const EdgeInsets.all(0),
          icon: Align(
            alignment: Alignment.topRight,
            child: InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(Icons.close),
              // child: Image.asset(
              //   'assets/cancel.png',
              //   height: 30,
              // ),
            ),
          ),
          content: const SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('This is a demo alert dialog.'),
                Text('Would you like to approve of this message?'),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Approve'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

我已经移除了CircleAvatar，因为它用于用户的个人头像。这个小部件会添加额外的内边距，而我无法去掉这个内边距。 请检查一下这个解决方案是否有效。

- Riyan

Answer 3

你可以利用一个Stack小部件并修改你的代码，我用一个Stack小部件包装了你现有的代码，将取消图标覆盖在其他内容之上。然后，在InkWell内部添加了一个Container来控制对齐和填充。

Stack(
  children: [
    InkWell(
      onTap: () {
        Navigator.pop(context);
      },
      child: Container(
        alignment: Alignment.topRight,
        padding: EdgeInsets.all(10),
        child: CircleAvatar(
          maxRadius: 20,
          backgroundColor: Colors.transparent,
          child: Image.asset(
            'assets/cancel.png',
            height: 30,
          ),
        ),
      ),
    ),
    // write your rest code here
  ],
)

- ADITYA RAJARAM

---

我尝试过了，但没有起作用。 - Jaini Shah

我试过了，不起作用。 - Jaini Shah