求助：如何实现目标UI效果？Flutter代码调试问题

根据你提供的代码和需求，以下是调整后的实现方案，解决布局重叠、圆角设置错误的问题：

核心修改点 #

• 顶部导航容器添加左右圆角，替代仅用Padding的方式
• 使用Positioned定位左右侧边容器，避免与导航栏重叠
• 适配侧边容器的位置，使其从导航栏底部开始延伸

完整代码 #

Container(
  height: double.maxFinite,
  width: double.maxFinite,
  color: const Color(0xff070540),
  child: Stack(
    children: [
      // 顶部导航栏
      Padding(
        padding: const EdgeInsets.only(left: 15, right: 15, top: 15),
        child: Container(
          height: 50, // 适当调高导航栏高度，提升视觉效果
          decoration: const BoxDecoration(
            color: Color(0xff2147AF),
            borderRadius: BorderRadius.all(Radius.circular(20)), // 设置左右圆角
          ),
          child: const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Icon(Icons.arrow_back, color: Colors.white),
              ),
              Text(
                'Details of Athlete',
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Icon(Icons.thumb_up_sharp, color: Colors.white),
              ),
            ],
          ),
        ),
      ),
      // 左侧侧边容器
      Positioned(
        left: 0,
        top: 15 + 50, // 导航栏的top padding + 导航栏高度，避免重叠
        child: Container(
          height: MediaQuery.of(context).size.height - (15 + 50), // 从导航栏底部延伸到屏幕底部
          width: 80,
          decoration: const BoxDecoration(
            color: Color(0xff2147AF),
            borderRadius: BorderRadius.only(bottomRight: Radius.circular(20)),
          ),
        ),
      ),
      // 右侧侧边容器
      Positioned(
        right: 0,
        top: 15 + 50,
        child: Container(
          height: MediaQuery.of(context).size.height - (15 + 50),
          width: 80,
          decoration: const BoxDecoration(
            color: Color(0xff2147AF),
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20)),
          ),
        ),
      ),
    ],
  ),
);

额外优化说明 #

• 调高了导航栏高度（从30改为50），并添加了图标内边距，提升交互体验
• 给文字和图标添加了白色，在蓝色背景上更清晰
• 使用MediaQuery动态计算侧边容器高度，适配不同屏幕尺寸

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