Flutter中Row组件mainAxisAlignment.spaceBetween属性失效问题

问题出在承载时间和图标的内层Row上——它的宽度被自身内容限制了，因为父级Column设置了CrossAxisAlignment.start，导致这个Row只会包裹住文本和图标的宽度，MainAxisAlignment.spaceBetween自然无法发挥两端对齐的作用。

解决方案 #

给内层Row添加width: double.infinity，让它占满外层Container的宽度，这样spaceBetween就能生效，把时间和图标分别推到两端：

修改后的核心代码片段：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  width: double.infinity, // 新增该行，让Row占满容器宽度
  children: [
    Text(DateFormat.jm().format(messageModel.createdOn!).toString(), 
         style: GoogleFonts.oswald(color: Colors.white, fontSize: 12.0)),
    const Icon(CustomIcons.check, color: Colors.white, size: 12.0)
  ],
)

完整修改后的代码 #

Row(
  mainAxisAlignment: messageModel.sender == FirebaseAuth.instance.currentUser!.uid.trim() 
      ? MainAxisAlignment.start 
      : MainAxisAlignment.end,
  children: [
    Container(
      margin: const EdgeInsets.only(bottom: 15.0),
      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
      decoration: BoxDecoration(
          color: const Colors.greenAccent,
          borderRadius: BorderRadius.circular(15.0)
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(messageModel.message.toString(), 
               style: GoogleFonts.oswald(color: Colors.white)),
          const SizedBox(height: 2.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            width: double.infinity, // 关键修改
            children: [
              Text(DateFormat.jm().format(messageModel.createdOn!).toString(), 
                   style: GoogleFonts.oswald(color: Colors.white, fontSize: 12.0)),
              const Icon(CustomIcons.check, color: Colors.white, size: 12.0)
            ],
          )
        ],
      ),
    )
  ],
);

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