Flutter中如何实现与父组件高度关联的相对间距？

要把固定的100px间距改成相对父组件高度的动态值，同时解决键盘弹出时的溢出问题，试试下面几种方案：

方案一：用LayoutBuilder动态获取父容器高度 #

LayoutBuilder能拿到父组件的约束尺寸，你可以基于这个高度设置比例间距，再配合SingleChildScrollView让布局在键盘弹出时可滚动，彻底避免溢出。

修改后的核心代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView( // 外层加滚动组件，解决键盘弹出溢出
      child: Center(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 30),
          child: LayoutBuilder( // 通过LayoutBuilder获取父容器的约束参数
            builder: (context, constraints) {
              // 取父容器高度的10%作为间距，比例可根据UI需求调整
              double dynamicSpacing = constraints.maxHeight * 0.1;
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 标题文本区域
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text("Hello There",
                          style: GoogleFonts.lato(
                              color: AppColors.primaryColor, fontSize: 34)),
                      const Text(
                        "Please sign in to continue.",
                        style: TextStyle(
                          fontFamily: "RobotoSlab-Light",
                          fontSize: 18,
                          color: AppColors.textColor,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: dynamicSpacing), // 替换原来的固定高度Container
                  // 输入框、按钮等剩余组件...
                ],
              );
            },
          ),
        ),
      ),
    ),
  );
}

方案二：基于屏幕高度设置比例（结合MediaQuery） #

如果父容器高度和屏幕高度基本一致，也可以直接用MediaQuery获取屏幕可用高度，同样搭配SingleChildScrollView：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Center(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 标题文本区域...
              // 取屏幕高度的10%作为间距，比例可调整
              SizedBox(height: MediaQuery.of(context).size.height * 0.1),
              // 输入框、按钮等剩余组件...
            ],
          ),
        ),
      ),
    ),
  );
}

关键注意点 #

• 必须加SingleChildScrollView包裹整个内容，键盘弹出时布局可滚动，不会出现溢出错误。
• 比例值（比如0.1）可自由调整，0.1对应父容器/屏幕高度的10%，0.15对应15%，以此类推。
• 若不想让整个布局滚动，也可以依赖Scaffold默认的resizeToAvoidBottomInset: true属性，但结合SingleChildScrollView的适配性更强，尤其适合内容较多的页面。

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