如何在一个屏幕上添加bottomNavigationBar,但在其他屏幕上不添加?

时间:2020-08-04 18:08:46

标签: flutter flutter-layout

我的应用程序有3个屏幕:输入屏幕,登录名和主屏幕。我只希望导航栏位于主屏幕上。我应该在AImpl页面中返回哪个小部件,或者应该在HomeScreen()页面中返回什么?

这是main.dart的代码:

main.dart

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Doctor Consultation App', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, scaffoldBackgroundColor: Colors.white, visualDensity: VisualDensity.adaptivePlatformDensity), home: EnterScreen(), ); } }

home_screen.dart

class MainScreen extends StatefulWidget { @override _MainScreenState createState() => _MainScreenState(); } class _MainScreenState extends State<MainScreen> { @override Widget build(BuildContext context) { return Scaffold( ); } }

bottom_nav_bar.dart

我已经尝试在class BottomNavScreen extends StatefulWidget { @override _BottomNavScreenState createState() => _BottomNavScreenState(); } class _BottomNavScreenState extends State<BottomNavScreen> { final List _screens = [ MainScreen(), Scaffold(), Scaffold(), Scaffold(), ]; int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( body: _screens[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) => setState(() => _currentIndex = index), type: BottomNavigationBarType.fixed, backgroundColor: Colors.white, showSelectedLabels: false, showUnselectedLabels: false, selectedItemColor: Palette.primaryRed, unselectedItemColor: Colors.grey, elevation: 0.0, items: [ Icons.home, Icons.chat_bubble, Icons.calendar_today, Icons.person ] .asMap() .map((key, value) => MapEntry( key, BottomNavigationBarItem( title: Text(''), icon: Container( padding: const EdgeInsets.symmetric( vertical: 6.0, horizontal: 16.0), decoration: BoxDecoration( color: _currentIndex == key ? Palette.primaryRed : Colors.transparent, borderRadius: BorderRadius.circular(20.0)), child: Icon(value))))) .values .toList()), ); } } 上进行bottomNavigationBar: BottomNavScreen(),,但是从home_screen.dart小部件中得到了很多错误。

1 个答案:

答案 0 :(得分:1)

build中的ButtomNavScreen更改为此:

@override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
          currentIndex: _currentIndex,
...

然后将build中的MainScreen更改为以下内容:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavScreen(),
      body: SafeArea(
        child: Center(
          child: Container(
            width: 200,
            height: 100,
            color: Colors.redAccent,
            child: Center(child: Text("sample text")),
          ),
        )
      ),
    );
  }