如何使 ClipPath 的背景透明？

Posted 2023-02-23

【中文标题】如何使 ClipPath 的背景透明？

【英文标题】：How to make background of ClipPath transparent?

【发布时间】：2019-11-20 23:54:18

【问题描述】：

The result of ClipPath

如上图所示，我使用 ClipPath 从底部 TabBar 剪切路径。

这是脚手架：

Scaffold(
  bottomNavigationBar: ClipPath(
    clipBehavior: Clip.hardEdge,
      clipper: NavBarClipper(), // class code shown below
        child: Material(
        elevation: 5,
        color: Color(0xff282c34),
        child: TabBar(
          onTap: (value) 
            if (value == 3) 
              setState(() 
                _scaffoldKey.currentState.openEndDrawer();
              );
            
          ,
        indicatorColor: Colors.white,
        indicatorWeight: 1.0,
        labelColor: Colors.white,
        unselectedLabelColor: Colors.grey,
        tabs: <Tab>[
          Tab(
            icon: Icon(
              Icons.home,
                size: 30,
              ),
          ),
          Tab(
            icon: Icon(
              Icons.add_a_photo,
                size: 30,
              ),
          ),
          Tab(
            icon: Icon(
              Icons.notifications,
                size: 30,
            ),
          ),
          Tab(
            icon: Icon(
              Icons.person,
                size: 30,
            ),
          ),
        ],
        controller: controller,
      ),
    ),
  ),
);

这是裁剪器类

class NavBarClipper extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    Path path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width - 20, 0);
    path.lineTo(20, 0);
    path.lineTo(0, size.height);
    return path;
  

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) 
    return true;
  

但正如您在图像中看到的那样，裁剪区​​域的颜色是白色的，看起来不太好。我想让它透明，这样它后面的图像也可以通过剪切空间看到。

编辑： 我认为问题不在于切口区域是白色的。实际上，TabBar 并不位于沿 z 轴的页面内容上方。页面内容和 TabBar 是分开的。我想让它等同于 html 中的position: absolute，这样当我滚动时，内容会位于 TabBar 下方。

【问题讨论】：

底部导航栏下方好像没有图片

@10101010 我说的是自然图像和它背后的所有其他图像。

我没听懂你。我在底部栏上方看到一张图片（带有“自然”字样）。你想让它在你的底栏后面（z 轴）吗？

我认为这部分代码是不必要的，因为我们的目标是使白色裁剪区域透明，并且与这部分代码无关。

您的编辑很有道理。您可能想使用Stack

【参考方案1】：

@10101010 的建议奏效了！

我使用了 Stack，效果很好。

这是最终的脚手架代码：

return Scaffold(
  body: Stack(
    children: <Widget>[
      Container(
        height: deviceHeight,
        width: deviceWidth,
      ),
      _currentPage(),
      Positioned(
       width: viewportWIdth,
       height: 40,
       bottom: 0,
       child: ClipPath(
         clipper: NavBarClipper(),
         child: Material(
         elevation: 5,
         color: Color(0xff282c34),
         child: TabBar(
           onTap: (newIndex) 
             if (newIndex == 4) 
               setState(() 
                 _scaffoldKey.currentState.openEndDrawer();
               );
              else 
               setState(() 
                 _currentIndex = newIndex;
               );
             
           ,
           indicatorColor: Colors.white,
           indicatorWeight: 1.0,
           labelColor: Colors.white,
           unselectedLabelColor: Colors.grey,
           tabs: <Tab>[
             Tab(
               icon: Icon(
                 Icons.home,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.add_a_photo,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.notifications,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.person,
                 size: 30,
               ),
             ),
             Tab(
               icon: Icon(
                 Icons.menu,
                 size: 30,
               ),
             ),
           ],
           controller: controller,
         ),
       ),
     ),
   ],
  ),
  key: _scaffoldKey,
  endDrawer: Drawer(
  child: Container(),
),
);