如何使ClipPath的背景透明？

Question

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,
      ),
    ),
  ),
);

这里是剪贴板类（Clipper Class）。最初的回答：

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下面。

- Abhinav

---

@10101010 我在谈论自然图像和所有背后的其他图像。 - Abhinav

我不太明白你的意思。在你的底部栏上方，我看到一张带有“Nature”字样的单张图片。你是想让它置于（Z轴方向）底部栏后面吗？ - 10101010

我认为代码的那一部分是不必要的，因为我们的目标是使白色裁剪区域透明化，而与代码的那一部分无关。 - Abhinav

你的修改很有道理。你可能想利用Stack。 - 10101010

谢谢 @10101010 我会尝试的 :) - Abhinav

Answer 1

< p >@10101010的建议起了作用！< /p > < p >我使用了Stack，效果很好。< /p > < p >这是最终的脚手架代码:< /p >

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(),
),
);

- Abhinav