Flutter：同一Scaffold内Widget切换及MyLibrary跳转MyHome实现

1. 同一Scaffold内的Widget切换导航 #

借助已有的_selectedIndex变量，给Scaffold添加底部导航栏，配合状态更新方法就能完成页面切换：

• 新增_onItemTapped方法，用来更新选中索引的状态
• 在Scaffold中加入bottomNavigationBar，绑定选中状态和点击事件

2. MyLibrary跳转至MyHome #

通过回调函数让子组件MyLibrary通知父组件切换页面：

• 给MyLibrary添加一个VoidCallback类型的回调参数
• 在MyLibrary的按钮点击事件中调用该回调
• 父组件收到回调后，将_selectedIndex设为0（对应MyHome在列表中的索引）

修改后的完整代码 #

const List<Widget> widgetOptions = <Widget>[
  MyHome(),
  FavScreen(),
  SearchScreen(),
  MyLibrary(),
];

class Home_ScreenState extends State<Home_Screen> {
  int _selectedIndex = 0;

  static final GlobalKey<ScaffoldState> _drawkey = GlobalKey<ScaffoldState>();
  ScrollController listScrollController = ScrollController();

  // 底部导航点击事件，更新选中索引
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  // 切换到MyHome的方法，供MyLibrary调用
  void _jumpToHome() {
    setState(() {
      _selectedIndex = 0;
    });
  }

  @override
  Widget build(BuildContext context) => SafeArea(
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          key: _drawkey,
          extendBody: true,

          // ------------BODY---------------
          body: SingleChildScrollView(
            controller: listScrollController,
            child: Container(
              // 这里需要给MyLibrary传递回调，所以替换原有的直接实例化
              child: _selectedIndex == 3 
                  ? MyLibrary(onJumpToHome: _jumpToHome) 
                  : widgetOptions.elementAt(_selectedIndex),
            ),
          ),

          // 添加底部导航栏
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '首页',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.favorite),
                label: '收藏',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: '搜索',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.library_books),
                label: '我的库',
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.blue,
            onTap: _onItemTapped,
          ),
        ),
      );
}

// 修改MyLibrary组件，添加回调参数
class MyLibrary extends StatelessWidget {
  final VoidCallback onJumpToHome;

  const MyLibrary({super.key, required this.onJumpToHome});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: onJumpToHome, // 点击按钮触发回调
        child: const Text('返回首页'),
      ),
    );
  }
}

关键说明 #

• 底部导航栏通过currentIndex绑定_selectedIndex，点击时触发_onItemTapped更新状态，从而切换body中的Widget
• MyLibrary通过接收onJumpToHome回调，点击按钮时通知父组件调用_jumpToHome，将_selectedIndex设为0，实现页面切换

内容的提问来源于stack exchange，提问作者muhammad siraj