Flutter中使用Align无法将GridView.count对齐到底部居中的问题

• Flutter布局的核心逻辑是约束下传、尺寸上传、父组件决定位置，Stack内的Align组件摆放子组件的前提是：先获取子组件的实际渲染尺寸，再按照设定的对齐规则计算位置。
• 你写的Text属于有明确固有尺寸的组件，会根据文本内容、字体样式自动计算固定宽高，不会主动撑满父组件的可用空间，因此Align可以拿到它的真实尺寸，正常按照centerLeft规则摆放位置。
• GridView.count属于滚动类组件，默认行为是在父组件给出的可用空间内，尽可能占满滚动方向（默认纵向）的全部空间。外层Align没有给它强约束，它就会直接撑满整个Stack的纵向高度，自身尺寸和Stack完全一致。这时候不管设置什么对齐属性，和父组件等大的子组件都不会产生位置偏移，再加上GridView默认从顶部开始排列内部子项，最终就会出现网格显示在页面上方、没有贴到底部的现象。

• Flutter 基础约束传递机制：重点区分固定尺寸组件、滚动类组件、弹性（Flex/Expanded）类组件响应父约束的不同逻辑。
• Stack组件的布局规则：子组件按代码顺序堆叠，先写的在底层、后写的在上层；普通子组件、Align/Positioned定位子组件的布局差异。
• 滚动视图（ListView/GridView/CustomScrollView等）的常用布局属性：比如shrinkWrap、physics、padding等属性对布局尺寸的影响。

根据你的业务场景二选一即可：

方案1：开启shrinkWrap让GridView包裹内容（适合网格内容少、不需要大面积滚动的场景） #

给GridView.count添加shrinkWrap: true属性，让它放弃撑满可用空间，改为根据内部子组件的总高度计算自身尺寸，Align就能正常把它摆到底部居中位置：

body: Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomCenter,
      child: GridView.count(
        // 关键配置：让GridView适配内容高度，不撑满剩余空间
        shrinkWrap: true,
        // 可选：禁止GridView自身滚动，避免和页面滚动冲突
        physics: const NeverScrollableScrollPhysics(),
        crossAxisCount: 4,
        children: const [
          MyButton(myIcon: Icon(Icons.add), myColor: Colors.red),
          MyButton(myIcon: Icon(Icons.remove), myColor: Colors.green),
          MyButton(myIcon: Icon(Icons.adb), myColor: Colors.blue),
          MyButton(myIcon: Icon(Icons.air), myColor: Colors.red),
        ],
      ),
    ),
    Align(
        alignment: Alignment.centerLeft,
        child: Text(_wynik.toString(),
            style: GoogleFonts.overpass(
                fontSize: 50,
                backgroundColor: Colors.amber,
                color: Colors.white))),
  ],
)

方案2：用Positioned直接固定位置（适合网格需要滚动、高度固定的场景） #

不用Align包裹，直接用Stack的Positioned组件把GridView钉在页面底部，同时给出明确的宽度/高度约束，性能比开shrinkWrap更好：

body: Stack(
  children: <Widget>[
    Positioned(
      // 钉在底部，左右撑满屏幕宽度
      bottom: 0,
      left: 0,
      right: 0,
      // 自定义网格区域高度，根据你的按钮尺寸调整即可
      height: 96,
      child: GridView.count(
        crossAxisCount: 4,
        children: const [
          MyButton(myIcon: Icon(Icons.add), myColor: Colors.red),
          MyButton(myIcon: Icon(Icons.remove), myColor: Colors.green),
          MyButton(myIcon: Icon(Icons.adb), myColor: Colors.blue),
          MyButton(myIcon: Icon(Icons.air), myColor: Colors.red),
        ],
      ),
    ),
    Align(
        alignment: Alignment.centerLeft,
        child: Text(_wynik.toString(),
            style: GoogleFonts.overpass(
                fontSize: 50,
                backgroundColor: Colors.amber,
                color: Colors.white))),
  ],
)

提示：如果网格内的项目很多、需要滚动能力，优先选方案2。shrinkWrap: true会一次性渲染网格内所有子组件，项目量大时会出现性能问题。

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