Flutter中Stack布局下Text与Positioned组件重叠且头像未在第一行内的问题

嘿，我太懂你踩的这个Stack布局坑了！你现在是想把个人头像放在交通方式列表的第一行位置，但结果不仅头像没对齐到第一行，还和文字叠在一起了对吧？这问题我之前做项目的时候也碰到过，给你分享两个靠谱的解决思路：

思路一：用Stack+Positioned精准定位，同时给第一行预留空间 #

Stack的子组件默认是层叠在一起的，所以咱们得先给第一行的文字腾出头像的位置，再把头像精准“贴”到预留的位置上：

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 第一行左边留出头像的位置，避免文字和头像重叠
          Row(
            children: [
              SizedBox(width: 50), // 宽度比头像半径大一点，预留出间距
              Text("Walk"),
            ],
          ),
          SizedBox(height: 16),
          Text("Car"),
          SizedBox(height: 16),
          Text("Bus"),
          SizedBox(height: 16),
          Text("Train"),
        ],
      ),
    ),
    // 把头像定位到第一行的预留位置
    Positioned(
      left: 16, // 和Container的padding值对应，保证和容器左对齐
      top: 16, // 对齐第一行的顶部，刚好卡在第一行范围内
      child: CircleAvatar(
        radius: 20,
        // 替换成你的头像资源，比如AssetImage或者NetworkImage
        child: Icon(Icons.person),
      ),
    ),
  ],
)

思路二：直接用Row组合头像和第一行文字（更简单稳定） #

如果你的头像不需要悬浮在容器外面，只是要和第一行的“Walk”并排，那其实不用Stack更省心，直接把头像和Text放在同一个Row里就行，完全不会有重叠问题：

Container(
  color: Colors.grey[300],
  padding: EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          CircleAvatar(
            radius: 20,
            child: Icon(Icons.person),
          ),
          SizedBox(width: 12), // 给头像和文字加个小间距
          Text("Walk"),
        ],
      ),
      SizedBox(height: 16),
      Text("Car"),
      SizedBox(height: 16),
      Text("Bus"),
      SizedBox(height: 16),
      Text("Train"),
    ],
  ),
)

你可以根据自己的UI需求选其中一种，要是头像需要悬浮出容器（比如一半在容器外一半在里面）就用第一种，要是只是普通并排就选第二种，肯定能解决你现在的问题！

备注：内容来源于stack exchange，提问作者Prakash kumar M