![](/img/trans.png)
[英]How to change BottomNavigationBarItem icon when selected, Flutter
[英]How to remove padding of BottomNavigationBarItem's "icon" property in Flutter?
我的 BottomNavigationBar 和屏幕底部之间总是有一个未知的空白区域。 左侧的图像是所需的布局,但我只能生成右侧的图像。
这是我的代码:
import 'package:flutter/material.dart';
class Wrapper extends StatefulWidget {
const Wrapper({Key? key}) : super(key: key);
@override
State<Wrapper> createState() => _WrapperState();
}
class _WrapperState extends State<Wrapper> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = const Color(0xffa3a3a3);
final _selectedBgColor = const Color(0xff1a8468);
final _unselectedBgColor = const Color(0xfff2f2f2);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: History',
style: optionStyle,
),
Text(
'Index 2: Lucky',
style: optionStyle,
),
Text(
'Index 3: Analysis',
style: optionStyle,
),
Text(
'Index 4: Settings',
style: optionStyle,
),
];
void _onItemTapped(int index) {
print('asdasdasd');
setState(() {
_selectedIndex = index;
});
}
Color _getBgColor(int index) =>
_selectedIndex == index ? _selectedBgColor : _unselectedBgColor;
Color _getItemColor(int index) =>
_selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kToolbarHeight,
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(text,
style: TextStyle(fontSize: 12, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
elevation: 0,
centerTitle: false,
title: const Text('Title'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(Icons.home, 'Home', 0),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.history, 'History', 1),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.api_outlined, 'Lucky', 2),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.analytics, 'Analysis', 3),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.settings, 'Settings', 4),
label: '',
),
],
currentIndex: _selectedIndex,
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
type: BottomNavigationBarType.fixed,
backgroundColor: const Color(0xfff2f2f2),
),
);
}
}
p / s:我已经替换了一些IconData,结果不会完全相同。
我可以知道如何删除底部的底部空白吗? 任何帮助表示赞赏。
尝试这个!
1 - 在_getItemColor下面添加这个
Color _getIconColor(int index) => _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
2 - 替换_buildIcon小部件
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: MediaQuery.of(context).size.width/5,
color: _getBgColor(index),
padding: EdgeInsets.only(bottom: 20,top: 10),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData,color: _getIconColor(index)),
Text(text, style: TextStyle(fontSize: 12, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
);
3 - 将脚手架包裹到SafeArea
return SafeArea(
top: false,
bottom: false,
maintainBottomViewPadding: true,
minimum: EdgeInsets.only(bottom: 2.0),
child: Scaffold(code));
4 - 替换底部导航栏
bottomNavigationBar: Container(
child: Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
children: [
_buildIcon(Icons.home, 'Home', 0),
_buildIcon(Icons.history, 'History', 1),
_buildIcon(Icons.api_outlined, 'Lucky', 2),
_buildIcon(Icons.analytics, 'Analysis', 3),
_buildIcon(Icons.settings, 'Settings', 4),
],
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.