如何将边框放置到BottomNavigationBarItem元素中？
如何将边框放置到BottomNavigationBarItem元素中？
提问于 2020-06-09 06:24:47
我正试着做这样的事。
但是我不知道怎么做，我找不到与每个选项卡的样式容器相关的任何选项。
bottomNavigationBar:
new BottomNavigationBar(items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Left"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Right"),
),
]),回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-14 03:48:03
创建一个CustomPaint包装器( BottomNavigationBar )
定义CustomPainterBottomBar从CustomPainter扩展到foregroundPainter of CustomPaint
样本：
bottomNavigationBar: CustomPaint(
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Left"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Left"),
)
]
),
foregroundPainter: CustomPainterBottomBar(),
)custom_painter_bottombar.dart
class CustomPainterBottomBar extends CustomPainter {
static const TAG = 'CustomPainterBottombar';
Paint paintLine = Paint()..color = Colors.green;
@override
void paint(Canvas canvas, Size size) {
canvas.drawLine(Offset(size.width/2, 0), Offset(size.width/2, size.height), paintLine);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}Stack Overflow用户
发布于 2020-06-09 06:36:35
你可以试试这个方法
bottomNavigationBar: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: IconButton(icon: Icon(Icons.home), onPressed: () {})),
VerticalDivider(
color: Colors.green,
),
Expanded(child: IconButton(icon: Icon(Icons.home), onPressed: () {}))
],
),
),输出
另一个例子与您的要求相同
bottomNavigationBar: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.home),
Text("Left")
],
)),
VerticalDivider(
color: Colors.green,
),
Expanded(child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.home),
Text("Right")
],
)),
],
),
),输出
请查找带有单击效果的示例代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
debugShowCheckedModeBanner: false,
home: HomeWidget(),
);
}
}
class HomeWidget extends StatefulWidget {
HomeWidget({Key key}) : super(key: key);
@override
_HomeWidgetState createState() => _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AskNilesh'),
centerTitle: false,
),
bottomNavigationBar: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
setState(() {
_selectedIndex = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: _selectedIndex == 0 ? Colors.red : Colors.grey,
),
Text(
"Left",
style: TextStyle(color: _selectedIndex == 0 ? Colors.red : Colors.grey),
)
],
),
)),
VerticalDivider(
color: Colors.green,
),
Expanded(
child: InkWell(
onTap: () {
setState(() {
_selectedIndex = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.search,
color: _selectedIndex == 1 ? Colors.red : Colors.grey,
),
Text(
"Right",
style: TextStyle(color: _selectedIndex == 1 ? Colors.red : Colors.grey),
)
],
),
)),
],
),
),
body: Container(
child: SafeArea(
child: Center(
child: Text('Current Page $_selectedIndex'),
)),
),
);
}
}输出
您可以在Dartpad 带边界的BottomNavigationBarItem上查看这里
Stack Overflow用户
发布于 2020-06-12 08:11:00
你好，您可以尝试这样做，也许可以帮助您解决问题，您仍然可以产生您希望从navigationBar中产生的涟漪效应：
import 'package:flutter/material.dart';
class FieldBottomNavigation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
height: 50,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_IconButton(
iconData: Icons.home, iconTitle: 'Left', isLeft: true),
_IconButton(iconData: Icons.search, iconTitle: 'Right')
]),
));
}
}
class _IconButton extends StatelessWidget {
const _IconButton({this.iconTitle, this.iconData, this.isLeft = false});
final String iconTitle;
final IconData iconData;
final bool isLeft;
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
border: isLeft
? Border(right: BorderSide(color: Colors.green, width: 1))
: null),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(iconData, color: Colors.black, size: 24),
Text(iconTitle)
]),
)),
));
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62276298
复制相关文章
相似问题
腾讯云开发者
