Заголовок BottomNavigationBar не отображается во флаттере
Почему заголовок нижней панели навигации не отображается? Предположим, чтобы показать под значком
class FlutterProject extends StatefulWidget {
final String title = "Flutter Bottom Tab demo";
@override
GoalsListState createState() {
return GoalsListState();
}
}
class GoalsListState extends State<FlutterProject>
with SingleTickerProviderStateMixin {
int _cIndex = 0;
void _incrementTab(index) {
setState(() {
_cIndex = index;
});
}
final List<Widget> _children = [
new One(),
new Two(),
new Three(),
new Four(),
new More()
];
@override
Widget build(BuildContext context) {
return new Scaffold(
body: _children[_cIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _cIndex,
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon:
Icon(Icons.graphic_eq, color: Color.fromARGB(255, 0, 0, 0)),
title: new Text('One')),
BottomNavigationBarItem(
icon: Icon(Icons.report_problem,
color: Color.fromARGB(255, 0, 0, 0)),
title: new Text('Two')),
BottomNavigationBarItem(
icon: Icon(Icons.work, color: Color.fromARGB(255, 0, 0, 0)),
title: new Text('Three')),
BottomNavigationBarItem(
icon: Icon(Icons.domain, color: Color.fromARGB(255, 0, 0, 0)),
title: new Text('Four')),
BottomNavigationBarItem(
icon: Icon(Icons.menu, color: Color.fromARGB(255, 0, 0, 0)),
title: new Text('Five')),
],
onTap: (index) {
_incrementTab(index);
},
));
}
}
Что я здесь пропустил?
5 ответов
Название действительно отображается, но находится в white
цвет, если вы посмотрите внимательно. Просто добавьте color
к тексту, чтобы отобразить его правильно.
title: new Text('One', style: TextStyle(color: Colors.black))
Если предоставляется более 3 элементов BottomNavigationBar, тип, если он не указан, изменяется на BottomNavigationBarType.shifting согласно https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. Этот бит информации должен быть выделен в документе класса. Легко не заметить, где это (я это не заметил).
Тип добавления: BottomNavigationBarType. Исправлено на BottomNavigationBar
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[],
)
Длина элементов должна быть не менее двух, а значок и заголовок каждого элемента не должны быть пустыми.
Если тип равен нулю, тогда BottomNavigationBarType.fixed
используется, когда есть два или три элемента, BottomNavigationBarType.shifting
иначе.
Если вы хотите, чтобы заголовок отображался каждый раз, добавьте тип: BottomNavigationBarType.fixed,
сделай это
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _page,
items: tabsList,
)
И если вы хотите, чтобы заголовок был только на вкладке "Выбранное", добавьте в showSelectedLabels: true,
а также showUnselectedLabels: false,
нравится,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
showSelectedLabels: true,
showUnselectedLabels: false,
currentIndex: _page,
items: tabsList,
)
Вы должны использовать этот код:
bottomNavigationBar: BottomNavigationBar(
//use both properties
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
//-----------
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.icon1),
label:'item 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.icon2),
label: 'item 2',
),
],
)
Вот простой способ показать ярлык элемента панели навигации
BottomNavigationBarItem(
icon: Column(
children: [
new Icon(widget.currentTab == 2 ? Icons.dashboard_outlined : Icons.dashboard_outlined),
Text("Homes")
],
),
label: 'Home',
),