Flutter中Container内SizedBox无法占满屏幕宽度的问题

问题出在Stack中的Positioned组件——你只设置了bottom: 0，但未指定左右边界，导致Positioned的宽度由子组件（即你的SizedBox）的固有尺寸决定，即便SizedBox设置了width: mediaSize.width，也会因Positioned的约束限制无法真正占满屏幕宽度。

修复方案 #

给包裹_buildBottom的Positioned添加left: 0和right: 0属性，让它拉伸至父级（Stack）的左右边界：

Positioned(
  bottom: 0,
  left: 0,
  right: 0,
  child: _buildBottom(correctBigSpacing),
),

或者直接给Positioned设置width: mediaSize.width，效果一致：

Positioned(
  bottom: 0,
  width: mediaSize.width,
  child: _buildBottom(correctBigSpacing),
),

修改后的完整代码片段 #

return SafeArea(
  bottom: false,
  right: false,
  left: false,
  child: Container(
    decoration: BoxDecoration(
      color: currentThemeMode == ThemeMode.light
          ? myColor
          : Theme.of(context).colorScheme.primary,
      image: DecorationImage(
        image: const AssetImage("assets/images/background2.png"),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.mode(
          Theme.of(context)
              .colorScheme
              .tertiary
              .withOpacity(currentThemeMode == ThemeMode.light ? 0.5 : 0.5),
          BlendMode.dstATop,
        ),
      ),
    ),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          Positioned(
            top: 80,
            child: _buildTop(),
          ),
          // 修改后的Positioned
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: _buildBottom(correctBigSpacing),
          ),
        ],
      ),
    ),
  ),
);

补充说明 #

Stack中的Positioned组件，若仅设置垂直方向位置（如top/bottom），水平方向会默认包裹子组件；只有同时设置left和right（或指定width），才能让它占据父级的全部水平空间，子组件的宽度设置才能生效。

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