如何在单独的文件中使用bottomNavigationBar？

Question

我有以下运行正常的代码：

import 'package:flutter/material.dart';

import 'screen_curiosities.dart';
import 'screen_movies.dart';
import 'screen_releases.dart';

import '../utils/side_menu.dart';
import '../utils/bottom_menu.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  int selectedIndex = 0;

  List screens = [
    ScreenMovies(),
    ScreenReleases(),
    ScreenCuriosities()
  ];

  void onClicked(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Movies'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: screens.elementAt(selectedIndex),
      ),
      drawer: SideMenu(),
      bottomNavigationBar: BottomNavigationBar(
        items:[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Movies',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.new_releases),
            label: 'Releases',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.question_answer),
            label: 'Curiosities',
          )
        ],
        currentIndex: selectedIndex,
        onTap: onClicked,
        selectedItemColor: Colors.red[800],
        backgroundColor: Colors.black,
        unselectedItemColor: Colors.white,
      )
    );
  }

}

现在我试图将 Widget BottomNavigationBar分离到另一个文件，并在 Scaffold 的属性“bottomNavigationBar”上调用他。它会是这样的：

bottomNavigationBar: BottomMenu()

我用 Widget Drawer做到了这一点并且它起作用了，但是当我用 BottomNavigationBar 尝试同样的事情时它没有成功。

当我尝试在新小部件中使用变量selectedIndex时，它始终是未定义的。

我尝试了很多方法，但无法解决这个问题。有没有办法在单独的文件中使用小部件底部导航栏？

编辑

下面，遵循我需要从菜单到页面建立此链接的 2 个文件，以便使它们协同工作：

文件 home.dart

import 'package:flutter/material.dart';

import 'screen_curiosities.dart';
import 'screen_movies.dart';
import 'screen_releases.dart';

import '../utils/side_menu.dart';
import '../utils/bottom_menu.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  int selectedIndex = 0;

  List screens = [
    ScreenMovies(),
    ScreenReleases(),
    ScreenCuriosities()
  ];

  void onClicked(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Movies'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: screens.elementAt(selectedIndex),
      ),
      drawer: SideMenu(),
      bottomNavigationBar: BottomMenu() // Using the Widget here
  }

}

文件bottom_menu.dart

import 'package:flutter/material.dart';

class BottomMenu extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    return BottomNavigationBar(
      items:[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Movies',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.new_releases),
          label: 'Releases',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.question_answer),
          label: 'Curiosities',
        )
      ],
      currentIndex: selectedIndex, // the variable is undefined
      onTap: onClicked, // the function is undefined
      selectedItemColor: Colors.red[800],
      backgroundColor: Colors.black,
      unselectedItemColor: Colors.white,
    );
  }
}

Answer 1

您可以复制粘贴运行下面的两个完整代码
您可以将selectedIndex和传递onClicked到BottomMenu
代码片段

bottomNavigationBar: BottomMenu(
          selectedIndex: selectedIndex,
          onClicked: onClicked,
        ));
        
...     
class BottomMenu extends StatelessWidget {
  final selectedIndex;
  ValueChanged<int> onClicked;
  BottomMenu({this.selectedIndex, this.onClicked});

工作演示

完整代码main.dart

import 'package:flutter/material.dart';

import 'bottom.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int selectedIndex = 0;

  List screens = [ScreenMovies(), ScreenReleases(), ScreenCuriosities()];

  void onClicked(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Movies'),
          backgroundColor: Colors.black,
        ),
        body: Center(
          child: screens.elementAt(selectedIndex),
        ),
        //drawer: SideMenu(),
        bottomNavigationBar: BottomMenu(
          selectedIndex: selectedIndex,
          onClicked: onClicked,
        ));
  }
}

class ScreenMovies extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("ScreenMovies"),
    );
  }
}

class ScreenReleases extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("ScreenReleases"),
    );
  }
}

class ScreenCuriosities extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("ScreenCuriosities"),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

完整代码bottom.dart

import 'package:flutter/material.dart';

class BottomMenu extends StatelessWidget {
  final selectedIndex;
  ValueChanged<int> onClicked;
  BottomMenu({this.selectedIndex, this.onClicked});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Movies',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.new_releases),
          label: 'Releases',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.question_answer),
          label: 'Curiosities',
        )
      ],
      currentIndex: selectedIndex,
      onTap: onClicked,
      selectedItemColor: Colors.red[800],
      backgroundColor: Colors.black,
      unselectedItemColor: Colors.white,
    );
  }
}