Flutter中如何让Text组件占用父Container容器一半的高度？

这个需求完全可以实现，你可以通过调整Column布局+高度分配组件快速实现效果，同时需要注意你当前代码中Text的字号设置过大，会超出Container边界，需要同步调整：

实现方案 #

• 方案1：用Expanded分配Column主轴高度
  给Column设置占满父Container高度，通过flex属性让Text区域和空白区域各占50%高度：

containers.add(Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.blue,
  ),
  margin: const EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width/2-20,
  height: MediaQuery.of(context).size.width/2-20,
  child: Column(
    // 让Column占满父容器高度
    mainAxisSize: MainAxisSize.max,
    children: [
      // flex为1，占用一半高度
      Expanded(
        flex: 1,
        child: Center(
          child: Text(
            value2,
            style: TextStyle(
              inherit: false,
              color: Colors.white,
              // 调整字号为Container高度的40%，避免溢出
              fontSize: (MediaQuery.of(context).size.width/2-20) * 0.4,
              fontWeight: FontWeight.bold,
            )
          ),
        )
      ),
      // flex为1，占用剩下一半高度作为空白
      Expanded(flex:1, child: SizedBox())
    ]
  )
));

• 方案2：用FractionallySizedBox直接固定比例
  不需要额外占位组件，直接指定Text父容器的高度为父级的50%：

containers.add(Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.blue,
  ),
  margin: const EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width/2-20,
  height: MediaQuery.of(context).size.width/2-20,
  child: Align(
    alignment: Alignment.topCenter,
    child: FractionallySizedBox(
      // 高度占父容器的50%
      heightFactor: 0.5,
      child: Center(
        child: Text(
          value2,
          style: TextStyle(
            inherit: false,
            color: Colors.white,
            fontSize: (MediaQuery.of(context).size.width/2-20) * 0.4,
            fontWeight: FontWeight.bold,
          )
        ),
      ),
    ),
  )
));

注意事项 #

你原有代码中Text的fontSize设置为MediaQuery.of(context).size.width/2，大于Container本身的高度，会直接导致文字溢出容器，调整后适配Container高度的字号可以避免这个问题。

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