如何解决Flutter滚动时圆角容器顶部被裁切的问题？

我开发了一个Flutter自定义组件，顶部展示图片，下方为滚动容器。用户向上滚动时，图片会缩小，同时滚动下方内容，但此时圆角容器的顶部会被裁切（向下滚动时显示正常）。

Widget代码 #

/// 顶部带图片、下方为滚动容器的组件
class ScrollingImageWidget extends StatefulWidget {
  final String imagePath;
  final List<Widget> children;
  final double imageCoverRate;
  const ScrollingImageWidget({
    super.key,
    required this.imagePath,
    required this.children,
    this.imageCoverRate = 0.9,
  });

  @override
  State<ScrollingImageWidget> createState() => _ScrollingImageWidgetState();
}

class _ScrollingImageWidgetState extends State<ScrollingImageWidget> {
  late final size = MediaQuery.of(context).size;

  late final normalImageHeight = size.height / 4 * widget.imageCoverRate;
  late double imageHeight = size.height / 4;
  final _scrollController = ScrollController();
  double? scrollDelta;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(60),
            topRight: Radius.circular(60),
          ),
        ),
        width: size.width,
        height: size.height,
        child: Stack(
          children: [
            // 顶部图片
            SizedBox(
              height: imageHeight,
              width: double.infinity,
              child: Image.asset(
                widget.imagePath,
                height: imageHeight,
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),

            // 滚动内容区域
            NotificationListener<ScrollNotification>(
              // 监听滚动事件
              onNotification: (notification) {
                if (notification is ScrollUpdateNotification) {
                  final rate =
                      _scrollController.position.pixels < 0 ? 4.0 : 1.0;
                  setState(() {
                    scrollDelta = notification.scrollDelta;
                    imageHeight = normalImageHeight -
                        _scrollController.position.pixels * rate;
                    // 限制图片高度避免负值
                    imageHeight = imageHeight.clamp(0.0, size.height * .9);
                  });
                }
                return true; // 允许通知继续传播
              },
              child: Positioned(
                top: imageHeight * widget.imageCoverRate,
                child: SizedBox(
                  width: size.width,
                  height: size.height * 0.9 - imageHeight,
                  child: ListView.builder(
                    controller: _scrollController,
                    physics: const BouncingScrollPhysics(),
                    itemCount: widget.children.length,
                    itemBuilder: (context, index) => widget.children[index],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

实例化代码 #

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ScrollingImageWidget(
      imagePath: "./lib/assets/images/speakbetter.main.jpg",
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.amber,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(64),
              topRight: Radius.circular(64),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // 调整偏移量控制阴影方向
              ),
            ],
          ),
          child: Padding(
            padding: const EdgeInsets.all(32),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Read the following",
                  style: Theme.of(context)
                      .textTheme
                      .headlineLarge
                      ?.copyWith(fontWeight: ui.FontWeight.w900),
                ),
                Container(
                   color: Colors.green,
                   width: double.infinity,
                   height: 350,
                   child: const Text("Container 2/3")),
                Container(
                   color: Colors.blue,
                   width: double.infinity,
                   height: 550,
                   child: const Text("Container 3/3")),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

问题核心是滚动内容的位置计算偏差、父容器未开启裁剪，导致圆角区域被异常裁切。以下是针对性修复：

1. 开启父容器裁剪 #

给带圆角的外层Container添加裁剪属性，确保内容不会超出圆角边界：

Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(60),
      topRight: Radius.circular(60),
    ),
  ),
  clipBehavior: Clip.hardEdge, // 添加该行开启裁剪
  width: size.width,
  height: size.height,
  child: Stack(...),
)

2. 修正滚动内容的位置与高度逻辑 #

原代码中滚动内容的位置和高度计算存在偏差，导致内容与图片重叠或被裁切。修改如下：

// 替换原NotificationListener内的逻辑
NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      final pixels = _scrollController.position.pixels;
      final rate = pixels < 0 ? 4.0 : 1.0;
      setState(() {
        // 限制图片高度最小值为normalImageHeight，避免过度缩小
        imageHeight = (normalImageHeight - pixels * rate).clamp(normalImageHeight, size.height * .9);
      });
    }
    return true;
  },
  child: Positioned(
    top: imageHeight, // 直接以图片高度作为内容顶部位置，避免叠加计算偏差
    child: SizedBox(
      width: size.width,
      height: size.height - imageHeight, // 内容高度设为屏幕高度减图片高度，确保填满剩余空间
      child: ListView.builder(
        padding: EdgeInsets.zero,
        controller: _scrollController,
        physics: const BouncingScrollPhysics(),
        itemCount: widget.children.length,
        itemBuilder: (context, index) => widget.children[index],
      ),
    ),
  ),
)

3. 优化尺寸初始化时机 #

将尺寸相关变量的初始化移到initState中，避免context未就绪导致的异常：

late Size size;
late double normalImageHeight;
late double imageHeight;

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      size = MediaQuery.of(context).size;
      normalImageHeight = size.height / 4 * widget.imageCoverRate;
      imageHeight = size.height / 4;
    });
  });
}

完整修复后的Widget代码 #

/// 顶部带图片、下方为滚动容器的组件
class ScrollingImageWidget extends StatefulWidget {
  final String imagePath;
  final List<Widget> children;
  final double imageCoverRate;
  const ScrollingImageWidget({
    super.key,
    required this.imagePath,
    required this.children,
    this.imageCoverRate = 0.9,
  });

  @override
  State<ScrollingImageWidget> createState() => _ScrollingImageWidgetState();
}

class _ScrollingImageWidgetState extends State<ScrollingImageWidget> {
  late Size size;
  late double normalImageHeight;
  late double imageHeight;
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        size = MediaQuery.of(context).size;
        normalImageHeight = size.height / 4 * widget.imageCoverRate;
        imageHeight = size.height / 4;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(60),
            topRight: Radius.circular(60),
          ),
        ),
        clipBehavior: Clip.hardEdge,
        width: size.width,
        height: size.height,
        child: Stack(
          children: [
            // 顶部图片
            SizedBox(
              height: imageHeight,
              width: double.infinity,
              child: Image.asset(
                widget.imagePath,
                fit: BoxFit.cover,
              ),
            ),

            // 滚动内容区域
            NotificationListener<ScrollNotification>(
              onNotification: (notification) {
                if (notification is ScrollUpdateNotification) {
                  final pixels = _scrollController.position.pixels;
                  final rate = pixels < 0 ? 4.0 : 1.0;
                  setState(() {
                    imageHeight = (normalImageHeight - pixels * rate).clamp(normalImageHeight, size.height * .9);
                  });
                }
                return true;
              },
              child: Positioned(
                top: imageHeight,
                child: SizedBox(
                  width: size.width,
                  height: size.height - imageHeight,
                  child: ListView.builder(
                    padding: EdgeInsets.zero,
                    controller: _scrollController,
                    physics: const BouncingScrollPhysics(),
                    itemCount: widget.children.length,
                    itemBuilder: (context, index) => widget.children[index],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

修改后，向上滚动时图片平滑缩小，滚动内容的顶部圆角不会被裁切，向下滚动时恢复正常显示。

内容的提问来源于stack exchange，提问作者Stéphane de Luca