如何在Column内将Row右对齐且不扩展Row宽度

要实现蓝色容器在Column内右对齐且不扩展Row宽度的效果，你可以用Align组件包裹蓝色的Container，而非给Container本身设置alignment属性。这样既能让蓝色容器右对齐，又能保证内部Row只占据自身内容的宽度。

修改后的代码如下：

@override
Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerRight,
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 45),
        child: Card(
          color: messageColor,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
          elevation: 1.0,
          margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(
                  left: 10.0,
                  right: 10.0,
                  top: 10.0,
                ),
                child: Text(message),
              ),
              // 用Align包裹蓝色Container实现右对齐
              Align(
                alignment: Alignment.centerRight,
                child: Container(
                  color: Colors.blue,
                  margin: const EdgeInsets.only(right: 10.0, left: 10.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        date,
                        style: const TextStyle(
                          fontSize: 13,
                          color: Colors.white60,
                        ),
                      ),
                      const SizedBox(width: 5),
                      const Icon(
                        Icons.done_all,
                        size: 20,
                        color: Colors.white60,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
}

改动说明 #

• 新增Align组件包裹蓝色Container，通过alignment: Alignment.centerRight让蓝色容器在Column横向空间内右对齐。
• 保留Row的mainAxisSize: MainAxisSize.min，确保Row仅占用自身内容所需宽度，不会被拉伸。
• 移除原Container上的alignment属性，避免容器被强制拉伸至最大宽度。

内容的提问来源于stack exchange，提问作者Askani