Flutter中Container内Text与TextFormField重叠问题求助

我没法给Container里的TextFormField和Text设置内边距，出现了如图的重叠情况。

以下是出现问题的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue, // Second layer background color
          ),
          Positioned(
            top: 0,
            left: 10,
            right: 10,
            bottom: 0,
            child: Container(
              child: ProfileForm(),
              margin: EdgeInsets.only(top: 48),
              height: 500,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
          ),
          Positioned(
            top: 16,
            left: 0,
            right: 0,
            child: Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 40.0,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                        child: Align(
                          alignment: Alignment.bottomRight,
                          child: CircleAvatar(
                            backgroundColor: Colors.white,
                            radius: 12.0,
                            child: Icon(
                              Icons.camera_alt,
                              size: 15.0,
                              color: Color(0xFF404040),
                            ),
                          ),
                        ),
                        radius: 38.0,
                        backgroundImage: AssetImage(
                          'assets/images/user-image-default.png',
                        ),
                      ),
                    ),
                    SizedBox(height: 8),
                    Text(
                      'John Doe',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                      ),
                    ),
                    Text(
                      'john.doe@example.com',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

解决办法 #

问题核心是白色表单容器的顶部间距不够，同时固定高度导致布局挤压，和上方用户信息文本重叠了。按下面几步调整即可：

• 增大顶部外边距：把白色Container的margin: EdgeInsets.only(top: 48)改成margin: EdgeInsets.only(top: 120)，这个数值是根据头像（半径40）+ 间距 + 两行文本的总高度估算的，能给上方用户信息留出足够空间。
• 移除固定高度：删掉白色Container的height: 500属性，让容器自适应内容高度，避免强制高度挤压内部元素。
• 添加内部内边距：给白色Container加上padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20)，让内部的TextFormField和容器边缘保持间距，不会贴边。

调整后的代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Profile'),
    ),
    body: Stack(
      children: [
        Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
        ),
        Positioned(
          top: 0,
          left: 10,
          right: 10,
          bottom: 0,
          child: Container(
            child: ProfileForm(),
            // 增大顶部外边距，避开上方用户信息
            margin: EdgeInsets.only(top: 120),
            // 移除固定高度，自适应内容
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16.0),
            ),
          ),
        ),
        Positioned(
          top: 16,
          left: 0,
          right: 0,
          child: Align(
            alignment: Alignment.topCenter,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                children: [
                  CircleAvatar(
                    radius: 40.0,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 12.0,
                          child: Icon(
                            Icons.camera_alt,
                            size: 15.0,
                            color: Color(0xFF404040),
                          ),
                        ),
                      ),
                      radius: 38.0,
                      backgroundImage: AssetImage(
                        'assets/images/user-image-default.png',
                      ),
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'John Doe',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    'john.doe@example.com',
                    style: TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

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