作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在flutter应用程序中使用了BottomNavigationBar。我对外观有其他要求,这是我得到的结果。除了顶部和底部填充(图中的箭头)之外,其他一切都很好。
这是我的代码:
BottomNavigationBar(
selectedFontSize: 0,
type: BottomNavigationBarType.fixed,
currentIndex: currIndex,
items: tabs.map((e) {
return BottomNavigationBarItem(
title: SizedBox.shrink(),
icon: _buildIcon(e),
);
}).toList(),
)
Widget _buildIcon(Data data) {
return Container(
width: double.infinity,
height:kBottomNavigationBarHeight ,
child: Material(
color: _getBackgroundColor(data.index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.email_outlined),
Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
],
),
onTap: () {
onTabSelected(data.index);
},
),
),
);
}
我如何删除那些顶部和底部填充?任何想法,我将不胜感激。
最佳答案
我使用您的零件代码制作了示例代码。
但是我无法通过共享您的代码重现您的问题。
您能否共享Scaffold的bottomNavigationBar的一部分或其他与代码相关的东西。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
type: BottomNavigationBarType.fixed,
currentIndex: 0,
items: [
new BottomNavigationBarItem(
icon: _buildIcon(),
title: SizedBox.shrink(),
),
new BottomNavigationBarItem(
icon: _buildIcon(),
title: SizedBox.shrink(),
),
new BottomNavigationBarItem(
icon: _buildIcon(),
title: SizedBox.shrink(),
)
]));
}
Widget _buildIcon() {
return Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Material(
color: Colors.grey,
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.email_outlined),
Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
],
),
onTap: () {},
),
),
);
}
}
关于flutter - Flutter-如何从BottomNavigationBar删除填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64699632/
我是一名优秀的程序员,十分优秀!