如何在 Flutter 的所有屏幕上不附加底部导航？

Question

我正在尝试实现屏幕之间的导航。我有第一个屏幕，用户必须在其中插入邀请码。此时用户还没有被授权，我不想 him/her 使用底部导航栏。这是我的导航实现：

home_view.dart

import 'package:fauna/app/styles/colors.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';

import 'home_view_model.dart';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: Get.nestedKey(1),
        initialRoute: '/invite-code',
        onGenerateRoute: controller.onGenerateRoute,
      ),
      bottomNavigationBar: Obx(() => BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.baby,
                  color: vaccineValid,
                  size: 15,
                ),
                title: Text('Pet details'),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.airbnb,
                  color: vaccineValid,
                  size: 15,
                ),
                title: Text('Vet profile'),
              ),
            ],
            currentIndex: controller.currentIndex.value,
            selectedItemColor: Colors.green,
            onTap: controller.changePage,
          )),
    );
  }
}

home_binding.dart

import 'package:fauna/app/modules/home/home_view_model.dart';
import 'package:get/get.dart';

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

home_controller.dart

import 'package:fauna/app/modules/invite_code/invite_code_binding.dart';
import 'package:fauna/app/modules/invite_code/invite_code_view.dart';
import 'package:fauna/app/modules/pet_details/pet_details_binding.dart';
import 'package:fauna/app/modules/pet_details/pet_details_view.dart';
import 'package:fauna/app/modules/vet_profile/vet_profile_binding.dart';
import 'package:fauna/app/modules/vet_profile/vet_profile_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeController extends GetxController {
  late BuildContext context;

  static HomeController get to => Get.find();
  var currentIndex = 0.obs;
  final pages = <String>['/pet-details', '/vet-profile'];
  var count = 0.obs;

  void changePage(int index) {
    currentIndex.value = index;
    Get.toNamed(pages[index], id: 1);
  }

  Route? onGenerateRoute(RouteSettings settings) {
    if (settings.name == '/invite-code') {
      return GetPageRoute(
        settings: settings,
        page: () => InviteCodeView(),
        binding: InviteCodeBinding(),
      );
    }

    if (settings.name == '/pet-details') {
      return GetPageRoute(
        settings: settings,
        page: () => PetDetailsView(),
        binding: PetDetailsBinding(),
      );
    }

    if (settings.name == '/vet-profile') {
      return GetPageRoute(
        settings: settings,
        page: () => VetProfileView(),
        binding: VetProfileBinding(),
      );
    }
    return null;
  }
}

Answer 1

如果不想在onTap 底部导航项导航到任何屏幕后消失，则一定不要使用GetPageRoute vb。首先，创建 'HostView' 和 PetDetailsView，VetProfileView 传递给脚手架主体。使用 IndexedStack 动态更改显示索引。因此，您在对用户进行身份验证后导航到 HostView。我在下面为您添加了示例代码。

class HostView extends StatefulWidget {
  const HostView({Key? key}) : super(key: key);

  @override
  _HostViewState createState() => _HostViewState();
}

class _HostViewState extends State<HostView> {
  int _selectedIndex = 0;
  final _pages =  <Widget>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: _selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: 'Pet Details',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

如何在 Flutter 的所有屏幕上不附加底部导航？

How can I have a bottom navigation appended not on all the screens in Flutter?

flutter

flutter-bottomnavigation