问题描述
我想将 borderRadius 设置为 底部导航应用栏,如图所示.我试图将底部导航应用栏放置在 ClipRRect borderRadius 和 Container 装饰中,但没有成功.那么如何将 topLeft 和 topRight 边框半径应用于我的底部导航栏.请帮助让我知道我该怎么做?
I want to set the borderRadius to an Bottom Navigation App Bar as its shown in the image. I have tried to put Bottom Navigation App Bar to a ClipRRect borderRadius and in a Container decoration but it didn't worked. So how can I apply the topLeft, and topRight border radius to my bottom navigation bar. Kindly help to let me know how can I do it?
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Food Ordering',
theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),
home: MyStatefulWidget(),
routes: <String, WidgetBuilder>{
'/detail-page': (BuildContext context) => MyDetailPage(),
},
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static List<Widget> _widgetOptions = <Widget>[
HomePage(),
HomePage(),
HomePage(),
HomePage(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Image.asset('assets/icon-home.png'),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-mentors.png'),
title: Text('Mentors'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-messages.png'),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-settings.png'),
title: Text('Settings'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped),
);
}
}
推荐答案
编辑
Scaffold 现在有一个名为 extendBody
的属性,可用于扩展底部栏下方的主体.从文档中,
Scaffold now has a property called extendBody
which can be used to extend the body below a bottomBar. From the documentation,
如果为 true,并且指定了bottomNavigationBar 或persistentFooterButtons,则body 会延伸到Scaffold 的底部,而不是仅延伸到bottomNavigationBar 或persistentFooterButtons 的顶部.
这意味着你需要做的就是
This means that all you need to do is
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Some Text'),
),
body: bodyContent,
extendBody: true,
bottomNavigationBar: bottomNavigationBar,
);
}
Widget get bodyContent {
return Container(color: Colors.red);
}
Widget get bottomNavigationBar {
return ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
child: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '1'),
BottomNavigationBarItem(icon: Icon(Icons.usb), label: '2'),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_ind), label: '3'),
BottomNavigationBarItem(
icon: Icon(Icons.multiline_chart), label: '4'),
],
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
showUnselectedLabels: true,
),
);
}
}
过时
把它放在一个堆栈中.不要直接将底部导航栏添加到脚手架.
Put it inside a stack. Don't add the Bottom Navigation Bar to the scaffold directly.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Some Text'),
),
body: Stack(
children: <Widget>[
bodyContent,
Positioned(
left: 0,
right: 0,
bottom: 0,
child: bottomNavigationBar,
),
],
),
);
}
Widget get bodyContent {
return Container(color: Colors.red);
}
Widget get bottomNavigationBar {
return ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_ind), title: Text('3')),
BottomNavigationBarItem(
icon: Icon(Icons.multiline_chart), title: Text('4')),
],
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
showUnselectedLabels: true,
),
);
}
}
这篇关于如何在颤动应用程序中将边框半径设置为底部应用程序栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!