我有一個主頁，其中包含一個AppBarabottomnavbar和一個正文，我將一個小部件（頁面）串列傳遞給我希望導航欄在單擊其圖示時導航到的串列。即使在串列中未包含的頁面中，我也希望能夠顯示我的底部導航欄。
例如，當我單擊串列磁貼時，它會將我帶到另一個詳細資訊頁面，我的導航欄消失了在我的頁面中，就像 instagram 風格一樣。
這是我的主頁
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
var pages = [
MyQrqc(),
NoDataUI(),
];
int index = 0;
var _appPageController = PageController();
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize: Size.fromHeight(70.0), child: CustomAppBar()),
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: PageView(
children: pages,
onPageChanged: (index) {
setState(() {
index = index;
});
},
controller: _appPageController,
),
),
bottomNavigationBar: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(17.0),
topRight: Radius.circular(17.0),
),
child: BottomAppBar(
clipBehavior: Clip.antiAlias, //bottom navigation bar on scaffold
color: Colors.transparent,
shape: CircularNotchedRectangle(), //shape of notch
notchMargin:
5, //notche margin between floating button and bottom appbar
child: Mainmenu(currentIndex: index, appPageController: _appPageController,),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: kPrimaryLightColor,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyQrqc()),
);
},
child: const Icon(Icons.add),
),
),
);
}
}
這是我的主選單頁面：
import 'package:deepnrise/Screens/qrqc/mes_qrqc_view.dart';
import 'package:deepnrise/constants/colors.dart';
import 'package:deepnrise/services/auth_services.dart';
import 'package:deepnrise/utils/size_config.dart';
import 'package:flutter/material.dart';
import 'package:deepnrise/services/settings/settings_service.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Mainmenu extends StatefulWidget {
int currentIndex = 0;
var appPageController = PageController();
Mainmenu({Key? key, required this.currentIndex,required this.appPageController}) : super(key: key);
@override
CustomNavBar createState() => CustomNavBar();
}
class CustomNavBar extends State<Mainmenu> {
@override
Widget build(BuildContext context) {
setBottomBarIndex(index) {
setState(() {
widget.currentIndex = index;
});
widget.appPageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
}
SizeConfig.init(context);
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [kPrimaryColor, kPrimaryLightColor],
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0.1, 0.8],
tileMode: TileMode.clamp,
),
),
child: Wrap(
//children inside bottom appbar
alignment: WrapAlignment.spaceAround,
children: <Widget>[
const SizedBox(
width: 30,
),
IconButton(
icon: Image.asset("assets/icons/menuIcon2.png"),
onPressed: () {
setBottomBarIndex(0);
},
),
const SizedBox(
width: 20,
),
IconButton(
icon: Image.asset("assets/icons/menuIcon1.png"),
onPressed: () {
setBottomBarIndex(1);
},
),
const SizedBox(
width: 50,
),
IconButton(
icon: const Icon(
Icons.person,
color: Colors.white,
),
onPressed: () {
setBottomBarIndex(2);
},
),
const SizedBox(
width: 20,
),
IconButton(
icon: Image.asset("assets/icons/menuIcon3.png"),
onPressed: () {
setBottomBarIndex(3);
},
),
const SizedBox(
width: 20,
),
],
),
);
}
}
uj5u.com熱心網友回復：
在這里，首先您需要為 BottomNavigationBar 創建一個檔案，
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
//For changing the screen
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
//This is a screens list which you want to navigate through BottomNavigationBar
final List<Widget> _children = [
const HomeScreen(),
const ProfileScreen()
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
iconSize: 32.0,
showSelectedLabels: true,
showUnselectedLabels: true,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white54,
currentIndex: _selectedIndex,
backgroundColor: Colors.black,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.list),
),
BottomNavigationBarItem(
label: "Profile",
icon: Icon(Icons.person),
),
],
onTap: _onItemTapped,
),
);
}
}
然后，您可以創建另一個螢屏，如 HomeScreen、ProfileScreen 等。
因此，通過使用此代碼HomePage在整個應用程式中保持靜態，而無需在任何螢屏中呼叫每個組件。
uj5u.com熱心網友回復：
要在所有螢屏上顯示底部導航欄，一種方法是使用PageView底部導航欄。另一種方法是使用persistent_bottom_nav_bar
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431296.html