我想創建一個動態的底部導航欄，以便對于每個螢屏我都可以在該螢屏上傳遞我需要的圖示/路線。我的bottom.dart 檔案如下所示：
import 'package:flutter/material.dart';
class BottomBar extends StatefulWidget {
final List routesToShow;
BottomBar({Key? key, required this.routesToShow}) : super(key: key);
@override
_BottomBar createState() => _BottomBar();
}
class _BottomBar extends State<BottomBar> {
final Map allBottomMenus = {
'home': {'icon': Icon(Icons.home), 'title': Text('Home'), 'route': '/homepage'},
'profile': {'icon': Icon(Icons.verified_user), 'title': Text('Profile'), 'route': '/profile'},
'info': {'icon': Icon(Icons.info_outline), 'title': Text('Info'), 'route': '/info'},
'previousScreen': {'icon': Icon(Icons.backspace), 'title': Text('Back'), 'route': ''},
};
List<BottomNavigationBarItem> bottomNavigationItems = [];
void _buildBottomNavigation() {
widget.routesToShow.forEach((route) {
if (allBottomMenus.containsKey(route)) {
bottomNavigationItems.add(BottomNavigationBarItem(
icon: allBottomMenus[route]['icon'],
label: allBottomMenus[route]['title'],
));
}
});
}
@override
void initState() {
super.initState();
_buildBottomNavigation();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: List.of(bottomNavigationItems),
onTap: (int index) {
print(index);
},
);
}
}
在主頁中，我稱這個小部件如下：
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final routesToShow = List.filled(3, ['homepage', 'info', 'profile']);
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
buildHeader(),
const SizedBox(height: 32.0),
],
),
),
),
bottomNavigationBar: BottomBar(routesToShow: routesToShow),
);
}
}
但我收到一條錯誤訊息：
失敗的斷言：第 307 行 pos 15：'items.length >= 2'：不正確。
似乎小部件從未執行過，因為沒有專案。任何幫助將不勝感激。
uj5u.com熱心網友回復：
您的代碼有兩個問題，首先是這一行：
final routesToShow = List.filled(3, ['homepage', 'info', 'profile']);
它制作了一個 2D 串列，因此您無法使用您的forEach方法從中檢索所需的資料；所以將其替換為：
final routesToShow = ['homepage', 'info', 'profile'];
第二個問題是您的地圖，BottomNavigationBar希望找到一個Stringfor 標簽而不是一個Text小部件，因此將其替換為：
final Map allBottomMenus = {
'home': {'icon': Icon(Icons.home), 'title': 'Home', 'route': '/homepage'},
'profile': {
'icon': Icon(Icons.verified_user),
'title': 'Profile',
'route': '/profile'
},
'info': {
'icon': Icon(Icons.info_outline),
'title': 'Info',
'route': '/info'
},
'previousScreen': {
'icon': Icon(Icons.backspace),
'title': 'Back',
'route': ''
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/388554.html
上一篇：帶導航器的底部導航欄？