底部导航栏圆角

Question

我正在尝试在底部导航栏上添加一些圆角。为此，我必须使其容器的背景透明，但我不知道如何。

这就是我在Scaffold中所做的：

bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ),
        child:BottomNavigationBar(
          //elevation: 0.0,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.white10,

和结果：

默认情况下，背景仍为白色。我试图将ClipRRect包裹在透明背景的容器中，但是没有用。

有什么想法吗？

Answer 1

在脚手架内部，将extendBody属性设置为true。这使主体可以延伸到脚手架的底部，而不是仅延伸到bottomNavigationBar的顶部。 这应该可以解决您的问题。

示例：

Widget build(BuildContext context) {
    return Scaffold(
      body: bodyOfApp(),
      extendBody: true,
      backgroundColor: Colors.transparent,
      bottomNavigationBar: BottomNavBar(),
    );
   }
  

Answer 2

需要一点像

的阴影

bottomNavigationBar: Container( decoration: BoxDecoration( borderRadius: BorderRadius.only( topRight: Radius.circular(30), topLeft: Radius.circular(30)), boxShadow: [ BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10), ], ), child: ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ), child: BottomNavigationBar( items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.favorite), title: Text('Favourite')), BottomNavigationBarItem( icon: Icon(Icons.favorite), title: Text('Favourite')) ], ), 没有阴影：

有阴影：

Answer 3

将canvasColor中的Theme更改为透明。

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

Answer 4

@CoderMonk建议的method应该起作用。如果没有，那么我认为您可能在SafeArea()的正文中使用了类似Scaffold()的小部件，如果这样，您应该将其完全删除或执行类似的操作

Scaffold(
  body: SafeArea(
    bottom: false,
    child: ...
  ),
);