flutter - 如何在单独的文件中使用 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()

我用小部件 Drawer 做到了，它工作了，但是当我用 bottomNavigationBar 尝试同样的事情时，它没有成功。

当我尝试在新 Widget 中使用变量 selectedIndex 时，它始终未定义。

我尝试了很多东西，但我无法解决这个问题。有没有办法在单独的文件中使用 Widget bottomNavigationBar？

编辑

在下面，按照我需要将此链接从菜单链接到页面以使它们协同工作的 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,
    );
  }
}