android - 如何使 ClipPath 的背景透明？

Question

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

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