Flutter中如何裁剪顶部栏区域的图片？

问题图示 #

对应代码 #

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.white,
      child: Stack(
        // clipBehavior: Clip.antiAlias,
        children: [
          const SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Opacity(
              opacity: 0.4,
              child: Image(
                image: AssetImage('assets/images/backZak.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Column(
            children: [
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.topRight,
                  child: Transform.scale(
                    scale: 2.5,
                    child: SizedBox(
                      width: 50,
                      height: 50,
                      child: SvgPicture.asset(
                        assetName[1],
                      ),
                    ),
                  ),
                ),
              ),
              // 剩余代码省略
            ],
          ),
        ],
      ),
    ),
  );
}

解决方案 #

以下三种方式都能解决顶部栏区域图片的裁剪问题：

1. 调整SafeArea的包裹范围

把SafeArea移到背景图片的外层，让背景图片被限制在安全区域内，不会延伸到顶部状态栏：

@override
Widget build(BuildContext context) {
  return Container(
    height: double.infinity,
    width: double.infinity,
    color: Colors.white,
    child: Stack(
      children: [
        SafeArea(
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Opacity(
              opacity: 0.4,
              child: Image(
                image: AssetImage('assets/images/backZak.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Column(
          children: [
            Expanded(
              flex: 1,
              child: Align(
                alignment: Alignment.topRight,
                child: Transform.scale(
                  scale: 2.5,
                  child: SizedBox(
                    width: 50,
                    height: 50,
                    child: SvgPicture.asset(
                      assetName[1],
                    ),
                  ),
                ),
              ),
            ),
            // 剩余代码省略
          ],
        ),
      ],
    ),
  );
}

2. 启用Stack的裁剪属性

取消代码中clipBehavior: Clip.antiAlias的注释，Stack会自动裁剪超出自身范围的子组件，顶部溢出的图片部分会被剪掉：

Stack(
  clipBehavior: Clip.antiAlias, // 取消该行注释
  children: [
    // 背景图片和其他组件
  ],
)

3. 用ClipRect手动裁剪

通过MediaQuery获取状态栏高度，结合ClipRect和Transform.translate精准裁剪顶部区域：

@override
Widget build(BuildContext context) {
  final statusBarHeight = MediaQuery.of(context).padding.top;
  return SafeArea(
    child: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.white,
      child: Stack(
        children: [
          ClipRect(
            child: Transform.translate(
              offset: Offset(0, -statusBarHeight),
              child: SizedBox(
                width: double.infinity,
                height: double.infinity + statusBarHeight,
                child: Opacity(
                  opacity: 0.4,
                  child: Image(
                    image: AssetImage('assets/images/backZak.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ),
          Column(
            children: [
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.topRight,
                  child: Transform.scale(
                    scale: 2.5,
                    child: SizedBox(
                      width: 50,
                      height: 50,
                      child: SvgPicture.asset(
                        assetName[1],
                      ),
                    ),
                  ),
                ),
              ),
              // 剩余代码省略
            ],
          ),
        ],
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者ALMUSBAH FOR GAMER