Flutter中如何在Stack Widget内正确使用Positioned Widget？

核心问题分析 #

1. "SETTINGS"首字母S缺失：Positioned组件设置了right:3，再加上超大的letterSpacing:20，导致文本向左偏移后，首字母超出父容器范围被截断。
2. 布局错位：
   • Stack内的白色容器宽度固定为300，但子元素没有适配这个宽度，导致内容溢出或对齐错误
   • Divider的thickness设为100（这是分割线的厚度，不是高度），导致分割线异常粗大
   • 顶部栏用固定宽度的SizedBox做间距，在不同屏幕尺寸下会适配失效

修复步骤 #

• 移除Positioned的right:3约束，改用alignment控制文本位置，确保标题完整显示
• 给Positioned的子元素设置宽度约束，匹配下方白色容器的300宽度，避免内容溢出
• 修正Divider的参数：将thickness改为合理值（比如1），用height控制上下间距
• 顶部栏的间距改用Expanded替代固定宽度的SizedBox，实现自适应布局

修复后的完整代码 #

import 'package:flutter/material.dart';

class SettingScreen extends StatefulWidget {
  const SettingScreen({super.key});

  @override
  State<SettingScreen> createState() => _SettingScreenState();
}

class _SettingScreenState extends State<SettingScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 顶部渐变栏
            Container(
              width: double.infinity,
              height: 100,
              decoration: BoxDecoration(
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 90,
                    offset: Offset(4, 9),
                  )
                ],
                gradient: const LinearGradient(
                  colors: [
                    Color.fromARGB(255, 170, 148, 210),
                    Color.fromARGB(255, 65, 160, 195),
                    Color.fromARGB(255, 134, 174, 207),
                    Color.fromARGB(255, 155, 187, 212),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.topRight,
                  stops: [0.2, 0.7, 0.9, 1.0], // stops不能超过1.0，原1.4无效
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Row(
                  children: [
                    const Text(
                      "REL\n  ATE",
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 10,
                        letterSpacing: 20,
                      ),
                    ),
                    const Expanded(child: SizedBox()), // 自适应间距
                    Icon(
                      Icons.skip_next_rounded,
                      color: Colors.white,
                      size: 50,
                    ),
                  ],
                ),
              ),
            ),
            // 下方设置面板
            Stack(
              alignment: Alignment.topCenter, // 居中对齐子元素
              children: [
                Container(
                  width: 300,
                  height: 522,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: const [
                      BoxShadow(
                        color: Colors.black12, // 阴影颜色调浅，避免过深
                        offset: Offset(1, 2),
                        blurRadius: 50,
                      )
                    ],
                  ),
                ),
                Positioned(
                  top: 10,
                  child: SizedBox(
                    width: 300, // 匹配下方容器宽度
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start, // 左对齐文本
                        children: [
                          const Text(
                            "SETTINGS",
                            style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                              letterSpacing: 20,
                            ),
                          ),
                          const SizedBox(height: 10),
                          const Text(
                            "ACCOUNT",
                            style: TextStyle(color: Colors.grey),
                          ),
                          Divider(
                            color: Colors.grey[300],
                            thickness: 1, // 合理的分割线厚度
                            height: 30, // 上下间距
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

额外优化点说明 #

• 修正了LinearGradient的stops参数（原1.0以上的值无效，会被忽略）
• 顶部栏用Expanded替代固定宽度SizedBox，适配不同屏幕
• 调整阴影颜色为Colors.black12，避免原黑色阴影过于厚重
• 设置Column的crossAxisAlignment: CrossAxisAlignment.start，让"ACCOUNT"文本左对齐，符合常见布局逻辑

内容的提问来源于stack exchange，提问作者Eain Hmun Khin