flutter - Flutter BottomNavBar 不显示 BoxShadow
问题描述
我制作了一个自定义的 BottomNav Bar 并将其包裹在一个容器内,这样我就可以给它一些盒子阴影。但盒子阴影不适用。这是代码
class CBottomNavBar extends StatefulWidget {
@override
_CBottomNavBarState createState() => _CBottomNavBarState();
}
class _CBottomNavBarState extends State<CBottomNavBar> {
@override
Widget build(BuildContext context) {
return Consumer<SManageIndex>(
builder: (context, manageIndex, child) => Container(
height: 80,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: primaryColorDark,
boxShadow: [
BoxShadow(color: primaryColorDark, blurRadius: 4, spreadRadius: 2)
],
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20))),
child: BottomNavigationBar(
backgroundColor: primaryColorDark,
items: [
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.hospital,
),
title: Text('Appointments')),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.pills,
),
title: Text('Medicines'),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.bookMedical,
),
title: Text('Documents'),
),
],
currentIndex: manageIndex.index,
onTap: (value) => manageIndex.changePage(value),
),
),
);
}
}
问题是我想要边框半径和盒子阴影,所以我使用了一个容器。也欢迎任何其他直接的方式来做同样的事情。
感谢您的时间。
解决方案
你的答案是Offset
。在你的for元素中使用Offset 类,你会很好的decoration
boxShadow
//dx is horiztonal and dy is vertical
// play with it
boxShadow: [BoxShadow(offset: Offset(dx, dy));
推荐阅读
- javascript - 无法访问函数返回的值
- reactjs - 无法使用 es6 创建反应元素
- reason - 设计reasonml react组件时如何扩展HTML属性接口?
- javascript - 如何在纯原生 JavaScript 中隐藏 API 密钥?
- c - 运行 2 个子进程时遇到问题
- reactjs - FullCalendar (React) - 获取当前周/月的日期
- javascript - 保存多个项目时 AsyncStorage 无法正常工作
- vue.js - VueJS / Electron:如何让“child_process”工作?
- java - 如果在 JAVA 中后递减的优先级高于前递增,那么为什么以下代码输出为 22.0 而不是 20.0 ?
- android - Google Play 游戏 - 无法登录 - 加载播放器