脚手架主体内部的本地导航

Question

我正在尝试在 Flutter 的脚手架体内进行本地导航。特别是，我想在按下“+”按钮时推动脚手架的新主体。重要提示：我想保持应用程序和底部栏相同！请参阅图片以供参考。我该怎么办？

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: const Home(),
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.yellow,
      ),
    ),
  ));
}


class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;
  final List<Widget> _screens = <Widget>[
    HomeScreen(),
    StatsScreen()
  ];

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
        selectedIndex: _selectedIndex,
        destinations: const <Widget>[
          NavigationDestination(
              icon: Icon(Icons.home),
              label: 'Home'
          ),
          NavigationDestination(
            icon: Icon(Icons.trending_up),
            label: 'Statistics',
          ),
        ],
        onDestinationSelected: _onItemTap,
      ),
      body: _screens.elementAt(_selectedIndex),
    );
  }
}


class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => SettingsScreen()));
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(child: Container(color: Colors.yellow)),
          Container(
              padding: EdgeInsets.all(8),
              alignment: Alignment.bottomRight,
              child: FloatingActionButton(
                  onPressed: () {}, //need to push a new body here
                  child: Icon(Icons.add)))
        ],
      ),
    );
  }
}

我已经看到了this类似的问题，但答案和编辑对我来说根本不清楚，因为没有列出所有文件。通过阅读这个问题，我唯一知道的是，我需要自己的导航器来完成这个任务，因为默认导航器的作用就像整个屏幕的堆栈，所以如果我使用它，它会将一个新的脚手架放在当前的脚手架之上。

Answer 1

在这种情况下，您可以创建一个小部件列表

  final List<Widget> _pages = [
  const Page1(), // add your pages
  const Page2()];

在正文部分，您可以更改此列表索引以将另一个小部件传递到您的正文

Scaffold(
  body:
      _pages[Index],
  bottomNavigationBar: bottomNavigationBar(),
);

通过此您可以切换主体，并且底部导航将保持不变。