将边框半径应用于 BottomNavigationBar
Applying Border Radius to the BottomNavigationBar
我需要对我的 BottomNavigationBar 宽度应用边框半径。找到一个可行的解决方案很棘手 - 稍后我需要对栏应用更多样式,并且还需要一个与之兼容的解决方案(主要是:浮动操作按钮和阴影)。关于如何操作有什么建议吗?
代码和屏幕:
看我有:
看我需要:
代码:(在我的选项卡屏幕的脚手架中):
bottomNavigationBar: BottomNavigationBar(
onTap: _selectPage,
showSelectedLabels: false,
showUnselectedLabels: false,
currentIndex: _selectedPageIndex,
type: BottomNavigationBarType.fixed,
items: [
//home
BottomNavigationBarItem(
icon: Icon(Icons.home, color: _customColorScheme['Icon 1']),
activeIcon: Icon(Icons.home, color: _customColorScheme['Icon 2']),
label: '',
),
//favorite
BottomNavigationBarItem(
icon: Icon(Icons.favorite, color: _customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.favorite, color: _customColorScheme['Icon 2']),
label: '',
),
//loockback
BottomNavigationBarItem(
icon: Icon(Icons.bar_chart, color: _customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.bar_chart, color: _customColorScheme['Icon 2']),
label: '',
),
//info & support
BottomNavigationBarItem(
icon: Icon(Icons.info, color: _customColorScheme['Icon 1']),
activeIcon: Icon(Icons.info, color: _customColorScheme['Icon 2']),
label: '',
),
],
),
您可以使用一个包 animated_bottom_navigation_bar: ^0.3.2
他们有不同数量的导航栏,并且有一个您需要的圆角。我希望这能满足你的需要。
你可以试试这个:
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'))
],
),
)
)
我需要对我的 BottomNavigationBar 宽度应用边框半径。找到一个可行的解决方案很棘手 - 稍后我需要对栏应用更多样式,并且还需要一个与之兼容的解决方案(主要是:浮动操作按钮和阴影)。关于如何操作有什么建议吗?
代码和屏幕:
看我有:
看我需要:
代码:(在我的选项卡屏幕的脚手架中):
bottomNavigationBar: BottomNavigationBar(
onTap: _selectPage,
showSelectedLabels: false,
showUnselectedLabels: false,
currentIndex: _selectedPageIndex,
type: BottomNavigationBarType.fixed,
items: [
//home
BottomNavigationBarItem(
icon: Icon(Icons.home, color: _customColorScheme['Icon 1']),
activeIcon: Icon(Icons.home, color: _customColorScheme['Icon 2']),
label: '',
),
//favorite
BottomNavigationBarItem(
icon: Icon(Icons.favorite, color: _customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.favorite, color: _customColorScheme['Icon 2']),
label: '',
),
//loockback
BottomNavigationBarItem(
icon: Icon(Icons.bar_chart, color: _customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.bar_chart, color: _customColorScheme['Icon 2']),
label: '',
),
//info & support
BottomNavigationBarItem(
icon: Icon(Icons.info, color: _customColorScheme['Icon 1']),
activeIcon: Icon(Icons.info, color: _customColorScheme['Icon 2']),
label: '',
),
],
),
您可以使用一个包 animated_bottom_navigation_bar: ^0.3.2
他们有不同数量的导航栏,并且有一个您需要的圆角。我希望这能满足你的需要。
你可以试试这个:
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'))
],
),
)
)