Flutter中如何实现组件重叠堆叠？Row布局组件未重叠问题求助

这个问题我之前做项目的时候也碰到过！默认的Row组件是按水平方向依次排列子元素的，所以硬币图标会保持默认间距，没法实现重叠效果。给你几个实用的解决办法，你可以按需选择：

办法一：用Transform.translate偏移图标位置 #

给后面的硬币图标添加一个水平方向的负偏移，让它往左移动，和前面的图标重叠。你可以根据想要的重叠程度调整偏移数值：

Row(
  children: <Widget>[
    Icon(
      Icons.monetization_on,
      size: 36.0,
      color: const Color.fromRGBO(218, 165, 32, 1.0),
    ),
    Transform.translate(
      // 数值越大（负的越多），重叠程度越高
      offset: const Offset(-15, 0),
      child: Icon(
        Icons.monetization_on,
        size: 36.0,
        color: const Color.fromRGBO(218, 165, 32, 1.0),
      ),
    ),
  ],
)

办法二：用Stack组件实现堆叠（适合多图标场景） #

如果后面还要添加更多硬币图标，Stack是更直观的堆叠组件，你可以通过Positioned精准控制每个图标的位置：

Stack(
  alignment: Alignment.centerLeft, // 以左侧为基准对齐所有图标
  children: [
    Icon(
      Icons.monetization_on,
      size: 36.0,
      color: const Color.fromRGBO(218, 165, 32, 1.0),
    ),
    Positioned(
      left: 15, // 往右偏移15，和第一个图标重叠一部分
      child: Icon(
        Icons.monetization_on,
        size: 36.0,
        color: const Color.fromRGBO(218, 165, 32, 1.0),
      ),
    ),
    // 要是加第三个图标，直接继续加Positioned(left: 30, ...)即可
  ],
)

办法三：用Container+负margin调整位置 #

把每个图标包在Container里，给后面的Container设置负的左margin，让它往左挤，实现重叠：

Row(
  children: <Widget>[
    Icon(
      Icons.monetization_on,
      size: 36.0,
      color: const Color.fromRGBO(218, 165, 32, 1.0),
    ),
    Container(
      margin: const EdgeInsets.only(left: -15),
      child: Icon(
        Icons.monetization_on,
        size: 36.0,
        color: const Color.fromRGBO(218, 165, 32, 1.0),
      ),
    ),
  ],
)

你可以根据自己的需求调整偏移/ margin的数值，要是需要多个图标重叠，Stack的方式会更灵活哦～

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