Flutter BottomNavBar不显示BoxShadow
Flutter BottomNavBar不显示BoxShadow
提问于 2020-08-02 14:28:06
我制作了一个自定义的BottomNav栏，并将它包装在一个容器中，这样我就可以给它一些方框阴影。但长方体阴影并不适用。以下是代码
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),
),
),
);
}
}
问题是我想要边界半径和长方体阴影，所以我使用了一个容器。也欢迎任何其他简单的方法来做同样的事情。
谢谢您抽时间见我。
回答 2
Stack Overflow用户
发布于 2020-08-02 14:35:28
您需要BoxShadow的Offset属性，
offset属性用于控制阴影的位置。默认情况下为zero，因此您需要添加Offset：
我以您的小部件树为例添加了一个演示：
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,
// add the offset property
offset: Offset(0, 5), // new line [move to the right[horizontally] by 0 ,move to the top[vertically] by 5]
),
],
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),
),
),
);
}
}Stack Overflow用户
发布于 2020-08-02 14:40:33
你的答案是Offset。在boxShadow元素的decoration中使用Offset class，就可以了
//dx is horiztonal and dy is vertical
// play with it
boxShadow: [BoxShadow(offset: Offset(dx, dy));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63213058
复制相关文章
相似问题
腾讯云开发者
