英文:
How do I clip the edges of my tab bar container in flutter?
问题
我屏幕底部有一个容器，其中包含一个BottomNavigationBar。我希望该容器的颜色与我的背景颜色相同。即使添加了CLipRRect，它仍然没有得到修正。我还尝试使容器透明，但它显示了一个错误，我无法为容器分配颜色并为其提供一个boxDecoration。我希望多余的白色部分能融入我的背景。
如何去掉背景的阴影？
Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
child: Container(
height: 80,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.3),
offset: const Offset(0.0, 0.0),
blurRadius: 52.0,
),
],
),
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: 30,
),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 30,
),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 30,
),
title: Text(''),
),
],
),
),
),
);
希望这对你有帮助！
英文:
I have a container at the bottom of my screen that has a BottomNavigationBar. I want the container to get the colour of my background. Even after adding CLipRRect it wasn't getting corrected. I also tried to make the container transparent but it showed me an error where I couldn't assign a colour to my container and give it a boxDecoration.I want the excess white part to merge into my background.
//edited
How do I get rid of the shadow from the background?
Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
child: Container(
height: 80,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(52.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.3),
offset: const Offset(0.0, 0.0),
blurRadius: 52.0),
],
),
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: 30,
),
title: Text('')),
BottomNavigationBarItem(
icon: Icon(
Entypo.game_controller,
size: 30,
),
title: Text('[![enter image description here][1]][1]')),
BottomNavigationBarItem(
icon: Icon(
Entypo.wallet,
size: 30,
),
title: Text('')),
],
),
)),
);
答案1
得分: 4
这实际上与底部导航栏无关。您需要将"extendBody"设置为"true"以用于父Scaffold小部件。这将使Scaffold的主体内容一直延伸到屏幕底部！
Scaffold(
extendBody: true,
bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);
英文:
This is actually not a problem with the bottom navigation bar. You need to set "extendBody" to "true" for the parent Scaffold widget. This will extend the scaffold body content all the way down to the bottom of the screen!
Scaffold(
extendBody: true,
bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论