Flutter/Dart卡片图标布局：如何设置左右图标及调整右上角图标位置

问题核心原因 #

你代码里的spceBetween是拼写错误，正确写法为MainAxisAlignment.spaceBetween，这是导致布局未生效的直接原因。同时要实现左右图标+右上角高亮图标的组合布局，需要合理嵌套Row与Stack组件。

分步解决方案 #

1. 修复拼写错误 #

将MainAxisAlignment.spceBetween修正为MainAxisAlignment.spaceBetween，确保布局属性正常生效。

2. 实现卡片左右两侧图标 #

以Row作为卡片内容容器，设置mainAxisAlignment: MainAxisAlignment.spaceBetween，左右分别放置图标组件：

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Icon(Icons.menu), // 左侧图标
        Icon(Icons.share), // 右侧图标
      ],
    ),
  ),
)

3. 添加右上角高亮图标 #

通过Stack组件实现图层重叠，用Positioned精准定位右上角图标：

Card(
  child: Stack(
    children: [
      // 原有左右图标布局
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Icon(Icons.menu),
            Icon(Icons.share),
          ],
        ),
      ),
      // 右上角高亮图标
      Positioned(
        top: 8.0,
        right: 8.0,
        child: Icon(
          Icons.highlight,
          color: Colors.red,
          size: 20.0,
        ),
      ),
    ],
  ),
)

关键说明 #

• Stack支持子组件重叠显示，Positioned的top、right参数可按需调整，适配卡片内边距需求。
• 必须保证MainAxisAlignment的属性拼写正确，否则spaceBetween的左右分散布局逻辑不会触发。

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