Flutter自定义Drawer Header元素对齐问题求助

修改后的代码 #

@override
Widget build(BuildContext context) {
  final double customHeaderHeight = 150.0;

  return SizedBox(
    height: customHeaderHeight,
    child: Container(
      color: Color(0xff2799fa),
      child: Stack(
        children: [
          // 头像与用户名居中区域
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.account_circle,
                  color: Colors.white,
                  size: 60,
                ),
                SizedBox(width: 5.0),
                Text(
                  fullName,
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          // 右上角关闭按钮
          Positioned(
            top: 8,
            right: 8,
            child: IconButton(
              icon: const Icon(
                Icons.clear,
                color: Colors.white,
                size: 25,
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        ],
      ),
    ),
  );
}

关键改动说明 #

• 改用Stack布局：替代原有的Column结构，实现组件层叠定位，可独立控制每个元素的位置
• 居中处理：用Center包裹头像与用户名的Row，确保它们在Header区域的垂直、水平双居中
• 固定关闭按钮位置：通过Positioned组件将关闭按钮锚定在右上角，top和right参数可按需调整边距
• 简化嵌套结构：移除多余的Flexible、嵌套Center及DrawerHeader默认内边距影响（若需保留DrawerHeader，可添加padding: EdgeInsets.zero属性）

效果对比 #

• 当前效果：关闭按钮位于顶部右侧，头像与用户名在其下方，整体垂直位置偏上，未居中
• 期望效果：关闭按钮固定在右上角，头像与用户名处于Header区域中心，布局紧凑符合预期

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