底部导航栏圆角答案

【问题标题】：Bottom navbar rounded corners底部导航栏圆角
【发布时间】：2019-08-03 17:14:22
【问题描述】：

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

这就是我在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 包装在一个具有透明背景的容器中，但它不起作用。

有什么想法吗？

【问题讨论】：

你找到解决办法了吗？我也有同样的问题。
很遗憾我没有

标签： flutter dart

【解决方案1】：

需要一点阴影

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'))                
      ],                                                                       
    ),                                                                         
  )                                                                            
)

没有阴影：

有阴影：

【讨论】：

我尝试了阴影：media.discordapp.net/attachments/421445316617961502/… 它好一点，但我们仍然使用白色背景。它适用于您的应用程序，因为您的应用程序的背景是白色的。对我来说不是这样：/
你的情况是什么？
我的意思是，正如你在图片中看到的，我的应用背景有点灰
解释清楚我无法理解你的情况
我的意思是，在你给我看的例子中，它有效，因为你的背景是白色的。我的是灰色的，所以我们仍然可以看到我的应用背景和 BottomNavigationBar 生成的白色背景之间的区别

【解决方案2】：

以上所有答案都以某种方式使用 ClipRRect，这在计算方面非常昂贵。因此，作为替代使用 Material Widget，方法如下：

bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(30), topLeft: Radius.circular(30)),
      ),
      child: Material(
        elevation: 0.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0)),
        child: BottomNavigationBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite')),
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite'))
          ],
        ),
      )),
)

【讨论】：

【解决方案3】：

在 Scaffold 内部，将 extendBody 属性设置为 true。这让 body 延伸到 Scaffold 的底部，而不是只延伸到 bottomNavigationBar 的顶部。这应该可以解决您的问题。

例子：

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

【讨论】：

这行得通，但你需要小心身体底部的东西并补偿扩展的画布

【解决方案4】：

将Theme 中的canvasColor 更改为透明。

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

与extendBody一起使用：true，