要实现底部导航栏的不同项目切换不同的 Scaffold,您可以使用 IndexedStack 和 BottomNavigationBar 的组合。IndexedStack 可以根据当前所选的底部导航栏项目来切换不同的 Scaffold。以下是一个示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Bar'),
),
body: IndexedStack(
index: _selectedIndex,
children: <Widget>[
Scaffold(
body: Center(
child: Text('Home Page'),
),
),
Scaffold(
body: Center(
child: Text('Business Page'),
),
),
Scaffold(
body: Center(
child: Text('School Page'),
),
],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
}
在这个示例中,我们使用 IndexedStack 来包裹不同的 Scaffold,根据底部导航栏当前所选的项目来切换不同的 Scaffold。当用户点击底部导航栏的项目时,会触发 onTap 回调函数,然后根据所选的项目更新 _selectedIndex,最终切换到对应的 Scaffold。