如何用Flutter的Expanded与flex组件修复布局重叠问题

你的问题出在使用Expanded(flex:1)包裹顶部内容并配合Center，导致顶部内容在分配的空间里居中，而底部Expanded(flex:2)的内容从父级Column的顶部开始布局，最终两个区域的内容重叠。

修复方案 #

去掉顶部的Expanded组件，让顶部内容仅占用自身所需高度，底部内容用Expanded占据剩余屏幕空间，这样"General"文本就会自然位于"Edit Profile"按钮下方。

修改后的核心代码结构如下：

body: SafeArea(
  child: Padding(
    padding: const EdgeInsets.all(defaultSpacing),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: defaultSpacing),
        // 顶部内容：仅保留Center让内容水平居中，去掉Expanded
        Center(
          child: Column(
            children: [
              ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(defaultRadius)),
                child: Image.asset(
                  userdata.picture,
                  width: 100,
                ),
              ),
              const SizedBox(height: defaultSpacing),
              Text("Jacob Timberline",
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                      fontWeight: FontWeight.w700, color: fontHeading)),
              Text("jacobtimberline@gmail.com",
                  style: Theme.of(context)
                      .textTheme
                      .bodyText2
                      ?.copyWith(color: fontSubHeading)),
              const SizedBox(height: defaultSpacing),
              Chip(
                backgroundColor: primaryLight,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                      Radius.circular(defaultRadius * 3)),
                  side: BorderSide(color: primaryLight),
                ),
                label: Text(
                  "Edit Profile",
                  style: Theme.of(context)
                      .textTheme
                      .bodyText2
                      ?.copyWith(color: Colors.black54),
                ),
              ),
            ],
          ),
        ),
        // 底部内容：用Expanded占据剩余空间，确保在顶部内容下方
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "General",
                style: Theme.of(context).textTheme.subtitle1?.copyWith(
                    fontWeight: FontWeight.w700, color: fontHeading),
              ),
              // 后续内容...
            ],
          ),
        ),
      ],
    ),
  ),
)

原理说明 #

• 顶部移除Expanded后，内容仅占用自身渲染高度，不会强制占据屏幕的1/3空间（原flex:1的分配比例）。
• 底部的Expanded会自动填充顶部内容下方的剩余屏幕空间，确保内容从顶部区域结束的位置开始布局，彻底避免重叠。

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