Flutter中如何将组件垂直居中且图标置于首个容器底部

问题描述 #

当前用Column布局尝试把图标放在文本容器的底部中心，但未达到预期效果，且不想通过Stack硬编码宽高实现，寻求替代方案。

效果对比 #

• 期望效果：
  
• 当前效果：
  

现有代码 #

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(width: 4, color:AppTheme.appColors )),
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Text(
          text,
          style: TextStyle(
              color: Colors.black54, fontSize: 24,fontWeight: FontWeight.bold),
        ),
      ),
    ),

    Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        child: Icon(
          Icons.arrow_drop_down_sharp,
          size: 25,
          color: Colors.black,
        ),
      ),
    ),

  ],
);

解决方案：使用IntrinsicWidth约束宽度 #

用IntrinsicWidth包裹整个Column，让Column的宽度自动匹配上方文本容器的实际宽度，无需硬编码数值，就能让图标精准对齐到容器底部中心：

IntrinsicWidth(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(width: 4, color: AppTheme.appColors)),
        child: Padding(
          padding: EdgeInsets.all(8),
          child: Text(
            text,
            style: TextStyle(
                color: Colors.black54, fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
      // 直接用Center或Align都可，IntrinsicWidth已约束Column宽度与上方容器一致
      Center(
        child: Icon(
          Icons.arrow_drop_down_sharp,
          size: 25,
          color: Colors.black,
        ),
      ),
    ],
  ),
);

原理说明 #

IntrinsicWidth会自动测量子组件的固有宽度，让Column的宽度与上方文本容器保持一致，此时内部的Center或Align组件就能将图标定位到容器的正下方中心位置，完全不需要手动设置宽高。

内容的提问来源于stack exchange，提问作者Nandyala Raja Pragnesh Reddy