如何在FlutterFlow（Flutter）中基于父Widget高度设置子Widget高度百分比？

核心思路 #

FlutterFlow默认的「屏幕百分比」高度是基于设备屏幕尺寸的，要让子Widget参照父容器高度，需要通过约束传递或父容器尺寸绑定来实现，以下是3种可落地的方案：

方案1：容器嵌套+自定义表达式绑定父容器高度 #

1. 先配置父Widget的高度：在属性面板选择「Screen Percentage」，设置为70%（即屏幕高度的70%）。
2. 给子Widget外层套一个Container，在「Height」选项中选择「Custom」，输入表达式：

   // 示例：子Widget高度为父容器的100%
   widget.parent.height * 1.0
   

   （FlutterFlow中可直接通过组件树引用父容器的尺寸变量，无需手动写全路径）

方案2：用LayoutBuilder传递父容器约束 #

1. 添加LayoutBuilder组件作为父容器的外层，它会自动获取父级的布局约束。
2. 给父容器设置高度：在自定义表达式中输入constraints.maxHeight * 0.7（此时constraints.maxHeight为屏幕高度，计算后得到屏幕的70%）。
3. 子Widget的高度直接用constraints.maxHeight * 1.0，这里的constraints是LayoutBuilder传递的父容器尺寸约束，子Widget会占满父容器的全部高度。

方案3：Expanded/Flexible配合Column布局 #

1. 父容器使用Column，设置Main Axis Size为「Max」，并给Column设置高度为屏幕的70%（同样用「Screen Percentage」）。
2. 子Widget添加Expanded组件，将Flex值设为1（如果有多个子Widget，可按Flex比例分配父容器高度），此时子Widget会自动占满父Column的可用空间，即父容器的100%高度。

注意事项 #

• 避免直接给子Widget选择「Screen Percentage」，该选项始终基于设备屏幕尺寸计算，与父容器无关。
• 如果需要更灵活的动态尺寸，可在FlutterFlow的「Custom Code」组件中，通过context.size?.height获取父容器的实际高度后再计算子Widget尺寸。

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