Flutter布局求助：如何合规隐藏容器超出屏幕的底部部分？

方案1：直接调整Positioned的bottom值 #

不需要额外的ClipRect和Align组件，直接给Positioned设置负的bottom值，让容器底部超出屏幕范围，这样底部的白色边框会被屏幕自动截断隐藏。这种方式还能方便后续通过修改bottom值实现滑入滑出的动画效果。

修改后的代码：

Stack(
  children: [
    Container(
      alignment: Alignment.bottomCenter,
      color: Colors.blue,
      height: 300,
    ),
    Positioned(
      bottom: -75, // 设置为容器高度的一半，让一半区域在屏幕外
      left: 0,
      right: 0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(color: Colors.white),
        ),
        height: 150,
        child: Center(
          child: Text(
            'Bottom Hidden Container',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    ),
  ],
)

方案2：自定义裁剪器（适合精细控制的动画场景） #

如果后续需要更精细的裁剪控制，比如逐步调整隐藏高度，可以自定义裁剪器配合ClipRect使用：

Stack(
  children: [
    Container(
      alignment: Alignment.bottomCenter,
      color: Colors.blue,
      height: 300,
    ),
    Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: ClipRect(
        clipper: _BottomHideClipper(hideHeight: 75),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(color: Colors.white),
          ),
          height: 150,
          child: Center(
            child: Text(
              'Bottom Hidden Container',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    ),
  ],
)

// 自定义裁剪器，隐藏指定高度的底部区域
class _BottomHideClipper extends CustomClipper<Rect> {
  final double hideHeight;

  _BottomHideClipper({required this.hideHeight});

  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, size.width, size.height - hideHeight);
  }

  @override
  bool shouldReclip(covariant _BottomHideClipper oldClipper) {
    return oldClipper.hideHeight != hideHeight;
  }
}

原代码问题说明 #

你之前使用的Align组件heightFactor:1不会对容器进行裁剪，ClipRect默认只裁剪超出父组件的区域，但你的Positioned是贴在屏幕底部，容器高度150完全在屏幕范围内，所以没有达到隐藏底部的效果。需要让容器部分超出屏幕，或者主动裁剪掉底部区域才能实现需求。

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