Flutter中如何在Stack组件内实现两个Widget上下垂直排列

在Stack组件内对文本组件做定位时出现布局异常：预期实现组件上下依次排列的布局，但其中一个组件设置初始底部位置后，整体组件出现向上偏移。目标效果（红线标注）与实际运行效果对比如下：

原有问题代码如下：

Widget build(BuildContext context) {
    return Stack(
      children: [
        Card(
            elevation: 6,
            margin: const EdgeInsets.all(8),
            child: Padding(
              padding: const EdgeInsets.only(
                  bottom: 60, right: 5, left: 5, top: 5), //bordes interiores
              child: Stack(children: [
                Container(
                  width: double.infinity,
                  height: 200,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(image as String), //varImg.url
                          fit: BoxFit.cover)),
                  //child:
                ),
              ]),
            )),
        Container(
          //alignment: Alignment.centerLeft,
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              Row(
                children: [
                  IconTheme(
                      data: IconThemeData(
                          color: gender == 'Male' ? Colors.blue : Colors.pink),
                      child: Icon(gender == 'Male'
                          ? Icons.male_rounded
                          : Icons.female_rounded)),
                  Positioned(
                    bottom: 10,
                    child: Text(
                      title,
                      style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.grey),
                    ),
                  ),
                ],
              ),
              
            ],
          ),
        ),
      ],
    );
  }
}

布局偏移的核心原因是Positioned组件使用错误：

• Positioned必须作为Stack的直接子组件才能正常生效
• 现有代码将Positioned嵌套在Row组件内部，既无法实现预期定位效果，还会打乱Row、Column的正常布局流，导致整体位置错位

移除Row内部非法嵌套的Positioned，直接将底部图标+文本的组合作为外层Stack的直接子组件，用Positioned相对Stack边界做定位，图标和文本的横向排列用Row常规布局实现即可，修复后代码如下：

Widget build(BuildContext context) {
  return Stack(
    children: [
      Card(
          elevation: 6,
          margin: const EdgeInsets.all(8),
          child: Padding(
            padding: const EdgeInsets.only(
                bottom: 60, right: 5, left: 5, top: 5), // 内边距预留底部文本区域空间
            child: Container(
              width: double.infinity,
              height: 200,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage(image as String),
                      fit: BoxFit.cover)),
            ),
          )),
      // 底部图标文本区域：作为Stack直接子组件用Positioned定位
      Positioned(
        left: 18,
        bottom: 18,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconTheme(
                data: IconThemeData(
                    color: gender == 'Male' ? Colors.blue : Colors.pink),
                child: Icon(gender == 'Male'
                    ? Icons.male_rounded
                    : Icons.female_rounded)),
            const SizedBox(width: 8), // 图标与文本的间距
            Text(
              title,
              style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.grey),
            ),
          ],
        ),
      ),
    ],
  );
}

• 仅当需要相对Stack的上下左右边界做堆叠定位时才使用Positioned，且必须保证Positioned的直接父级是Stack
• 普通横向、纵向线性排列的组件，优先使用Row、Column实现，不要滥用Positioned做位置调整
• 原有Card设置的bottom:60内边距已经为底部内容预留了足够空间，定位后不会出现内容溢出、偏移问题

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