首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在flutter中的选项卡栏后面添加阴影?

如何在flutter中的选项卡栏后面添加阴影?
EN

Stack Overflow用户
提问于 2020-01-05 06:45:41
回答 1查看 1.2K关注 0票数 0

我想在这个包装在容器中的标签栏后面添加一个微妙的阴影。我试图添加它,但它没有明显地显示出来。

我必须以这种方式编辑它,因为我必须裁剪条的边缘以使其变圆。

代码语言:javascript
运行
AI代码解释
复制
Widget _bottomNavigationBar(int selectedIndex) => ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(52.0), topRight: Radius.circular(52.0)),
    child: Container(
        height: 90,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(82.0),
              topRight: Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              offset: Offset(-5, 5),
              blurRadius: 10,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 28,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );

我希望我的标签栏看起来像这样

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-05 09:25:09

在这里,CLipRRect小部件将你的小部件切成带半径的矩形。您的长方体阴影正在被截断,因为剪裁r矩形

删除剪辑小部件,然后尝试

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59597629

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档