如何 position FLUTTER 中容器右上角的图标/按钮？

Question

所以这是我当前的主屏幕，我正在尝试 position 每个容器右上角的关闭按钮，这将最终删除这些聊天室，我在弄清楚如何做到这一点时遇到了一些麻烦。 图片下方是我的代码。

child: Container(
    decoration: BoxDecoration(
        color: Color(0xff240046),
      borderRadius: BorderRadius.circular(15)
    ),
    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
    margin: EdgeInsets.symmetric(vertical: 8),
    child: Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(30),
          child: profilePicUrl.isNotEmpty ? Image.network(
            profilePicUrl,
            height: 40,
            width: 40,
          ) : null,
        ),
        SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              name,
              style: TextStyle(
                  color: Color(0xff7b2cbf),
                  fontSize: 16),
            ),
            SizedBox(height: 3),
            Text(widget.lastMessage,
            style: TextStyle(
              color: Color(0xffd4d4d4),
            ),)
          ],
        ),
        Column(
          children: [
            Align(
              alignment: Alignment.topRight,
              child: Icon(
                  Icons.close,

              ),
            )
          ],
        ),

      ],
    ),
  ),

那么..我该怎么做？ 提前致谢。

Answer 1

首先，您使用的方法不可读，任何方法都在右上角，将 mainAxisAlignment 设置为 MainAxisAlignment.start，然后将 crossAxisAlignment 设置为 CrossAxisAlignment.end。 它看起来像这样：-

  Column(
      mainAxisAlignement : MainAxisAlignment.start,
      crossAxisAlignement : CrossAxisAlignment.end,
      children: [
        Align(
          alignment: Alignment.topRight,
          child: Icon(
              Icons.close,

          ),
        )
      ],
    ),

现在有一种实现此目的的最佳方法，即 ListTile。 它具有左侧的前导属性、标题和副标题，然后对于右侧的小部件，它具有尾随属性。

它看起来像这样：-

ListTile(
        leading:  ClipRRect(
      borderRadius: BorderRadius.circular(30),
      child: profilePicUrl.isNotEmpty ? Image.network(
        profilePicUrl,
        height: 40,
        width: 40,
      ) : null,
    ),
    title:   Text(
          'name',
          style: TextStyle(
              color: Color(0xff7b2cbf),
              fontSize: 16),
        ),
    subtitle:Text('(widget.lastMessage)',
    style: TextStyle(
          color: Color(0xffd4d4d4),
        ), ),
     trailing: Icon(
              Icons.close,

          ),
        ),

Answer 2

请尝试使用 Stack

Container(
        decoration: BoxDecoration(
            color: Color(0xff240046),
            borderRadius: BorderRadius.circular(15)
        ),
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
        margin: EdgeInsets.symmetric(vertical: 8),
        child: Stack(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  name,
                  style: TextStyle(
                      color: Color(0xff7b2cbf),
                      fontSize: 16),
                ),
                SizedBox(height: 3),
                Text(widget.lastMessage,
                  style: TextStyle(
                    color: Color(0xffd4d4d4),
                  ),)
              ],
            ),
            Align(
              alignment: Alignment.topRight,
              child: Icon(
                Icons.close,

              ),
            ),
          ],
        ),
      )

输出：