要实现底部导航栏的不同项目切换不同的 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。