时间戳

首页 > 解决方案 > 如何显示导航栏并仅显示在 Flutter 中的特定页面上？

flutter - 如何显示导航栏并仅显示在 Flutter 中的特定页面上？

问题描述

我正在开发一个应用程序。该应用程序有一个启动屏幕，然后显示一个游览屏幕（如果这是用户第一次运行该应用程序）。最后，一旦用户退出游览屏幕，他们就会被定向到主应用程序页面。主页应显示导航栏（但不显示启动屏幕或游览屏幕）。

我有以下所有代码：

  1. 如何显示导航栏？

  2. 如何限制哪些页面可以显示它？

谢谢

主要.dart

import 'package:flutter/material.dart';
import 'package:fyw/pages/navigation_bar.dart';
import 'package:fyw/pages/tour.dart';
import 'package:fyw/pages/splash.dart';
import 'package:fyw/pages/login.dart';
import 'package:fyw/pages/home.dart';

var routes = <String, WidgetBuilder>{
  "/tourpage": (BuildContext context) => Tour(),
  "/loginpage": (BuildContext context) => LoginPage(),
  "/homepage": (BuildContext context) => HomePage(),
};

void main() => runApp(new MaterialApp(
    theme:
        ThemeData(primaryColor: Colors.red, accentColor: Colors.yellowAccent),
    debugShowCheckedModeBanner: false,
    home: Splash(),
    routes: routes
    ));

导航栏.dart

import 'package:flutter/material.dart';
import 'package:fyw/pages/home.dart';
import 'package:fyw/pages/login.dart';


class NavigationBarController extends StatefulWidget {
  @override
  _NavigationBarControllerState createState() =>
      _NavigationBarControllerState();
}

class _NavigationBarControllerState
    extends State<NavigationBarController> {
  final List<Widget> pages = [
    HomePage(),
    LoginPage(),
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  int _selectedIndex = 0;

  Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.add), title: Text('home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.list), title: Text('login Page')),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      body: PageStorage(
        child: pages[_selectedIndex],
        bucket: bucket,
      ),
    );
  }
}

标签： flutterdartnavigation

解决方案

  class Home extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        bottomNavigationBar: NavigationBarController(context),
       );
    }
  }

推荐阅读