Flutter中CustomScrollView内SliverToBoxAdapter中的Container宽度设置无效问题

我来帮你搞定这个Flutter布局问题！

问题根源 #

你遇到的情况是因为CustomScrollView配合外层的Expanded会填充父容器的全部宽度，而SliverToBoxAdapter的布局逻辑是让它的子组件尽可能占据可用的水平空间，这就导致你给Container设置的width被覆盖了。而当Container在CustomScrollView外部时，父布局没有强制它撑满宽度，所以你的宽度设置能正常生效。

两种可行的解决方案 #

方案一：用Align包裹Container

给Container套一层Align，指定对齐方式（比如Alignment.centerLeft，配合你原本的左padding），这样Container就会严格按照你设置的宽度渲染，不会被强制撑满：

SliverToBoxAdapter(
  child: Padding(
    padding: const EdgeInsets.only(top: 40.0, left: 45),
    child: Align(
      alignment: Alignment.centerLeft,
      child: Container(
        padding: EdgeInsets.only(top: 30),
        width: MediaQuery.of(context).size.width / 1.75,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red, width: 0.7),
          color: Color(0xfffbfbfa),
        ),
        child: Stack(
          children: [
            Positioned(
              right: 0,
              top: 0,
              child: Align(
                alignment: Alignment.topRight,
                child: MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Padding(
                    padding: const EdgeInsets.only( right: 18.0),
                    child: Text( "Edit",
                      textAlign: TextAlign.left,
                      style: GoogleFonts.inter(
                        color: AppColors.primaryColor,
                        fontSize: 13,
                        letterSpacing: 0 ,
                        fontWeight: FontWeight.w400,
                        height: 1.5769230769230769),
                    ),
                  ),
                ),
              ),
            ),
            Text("Text"),
          ],
        ),
      ),
    ),
  ),
)

方案二：用ConstrainedBox限制最大宽度

如果你不想调整对齐方式，可以用ConstrainedBox给Container设置最大宽度，这样它就不会超出你想要的尺寸：

SliverToBoxAdapter(
  child: Padding(
    padding: const EdgeInsets.only(top: 40.0, left: 45),
    child: ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width / 1.75,
      ),
      child: Container(
        padding: EdgeInsets.only(top: 30),
        width: MediaQuery.of(context).size.width / 1.75,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red, width: 0.7),
          color: Color(0xfffbfbfa),
        ),
        child: Stack(
          children: [
            Positioned(
              right: 0,
              top: 0,
              child: Align(
                alignment: Alignment.topRight,
                child: MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Padding(
                    padding: const EdgeInsets.only( right: 18.0),
                    child: Text( "Edit",
                      textAlign: TextAlign.left,
                      style: GoogleFonts.inter(
                        color: AppColors.primaryColor,
                        fontSize: 13,
                        letterSpacing: 0 ,
                        fontWeight: FontWeight.w400,
                        height: 1.5769230769230769),
                    ),
                  ),
                ),
              ),
            ),
            Text("Text"),
          ],
        ),
      ),
    ),
  ),
)

额外小建议 #

你外层的Row + Expanded其实有点多余哦——如果没有横向布局的需求，直接把CustomScrollView作为Scaffold的body就可以了，这样能减少不必要的布局层级，让代码更简洁。

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