Flutter中Card内Row组件topRight对齐失效，始终靠左

问题原因 #

你在右上角的Align组件里嵌套了一个Row，并且设置了mainAxisAlignment: MainAxisAlignment.spaceBetween，但这个Row只有一个子组件。这种情况下Row会默认占满父容器的整个宽度，导致内部的Container被“拉”到左侧，完全抵消了Align的右上角定位效果。

修复方案 #

直接移除多余的Row，让Container作为Align的直接子元素即可：

Align(
  alignment: Alignment.topRight,
  child: Container(
    padding: const EdgeInsets.all(5),
    margin: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.blueGrey.shade800,
      borderRadius: BorderRadius.circular(15),
    ),
    child: const Row(
      children: [
        Icon(
          Icons.bubble_chart,
          color: Colors.white,
          size: 18,
        ),
        SizedBox(width: 7),
        Text(
          "LLM: \$placeholder",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ],
    ),
  ),
),

如果后续需要在这个位置添加多个元素，必须保留Row的话，可以给Row添加mainAxisSize: MainAxisSize.min属性，让Row仅占用自身内容的宽度，这样就能正常跟随Align的定位：

Align(
  alignment: Alignment.topRight,
  child: Row(
    mainAxisSize: MainAxisSize.min, // 关键属性
    children: [
      Container(
        padding: const EdgeInsets.all(5),
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.blueGrey.shade800,
          borderRadius: BorderRadius.circular(15),
        ),
        child: const Row(
          children: [
            Icon(
              Icons.bubble_chart,
              color: Colors.white,
              size: 18,
            ),
            SizedBox(width: 7),
            Text(
              "LLM: \$placeholder",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        ),
      )
      // 可以在这里添加其他子元素
    ],
  ),
),

完整修复后的Card代码 #

@override
Widget build(BuildContext context) {
  return InkWell(
    onTap: () {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => RecipeDetailPage(
              recipeName: recipeName,
              estTimeMin: estTimeMin,
              availableIngredients: availableIngredients,
              missingIngredients: missingIngredients,
              instructions: instructions,
              thumbnailUrl: thumbnailUrl,
            ),
          ));
    },
    child: Container(
      margin: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
      width: MediaQuery.of(context).size.width,
      height: 180,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.6),
            offset: const Offset(
              0.0,
              10.0,
            ),
            blurRadius: 10.0,
            spreadRadius: -6.0,
          ),
        ],
        image: DecorationImage(
          colorFilter: ColorFilter.mode(
            Colors.white.withOpacity(0.35),
            BlendMode.multiply,
          ),
          image: NetworkImage(thumbnailUrl),
          fit: BoxFit.cover,
        ),
      ),
      child: Stack(
        children: [
          // 修复后的右上角组件
          Align(
            alignment: Alignment.topRight,
            child: Container(
              padding: const EdgeInsets.all(5),
              margin: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.blueGrey.shade800,
                borderRadius: BorderRadius.circular(15),
              ),
              child: const Row(
                children: [
                  Icon(
                    Icons.bubble_chart,
                    color: Colors.white,
                    size: 18,
                  ),
                  SizedBox(width: 7),
                  Text(
                    "LLM: \$placeholder",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Container(
              padding: const EdgeInsets.symmetric(
                horizontal: 10.0,
                vertical: 5.0,
              ),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.8),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Text(
                recipeName,
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: const EdgeInsets.all(5),
                  margin: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.schedule,
                        color: Colors.blue,
                        size: 18,
                      ),
                      const SizedBox(width: 7),
                      Text("$estTimeMin mins"),
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

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