android - 如何在MyApp()中调用包含的另一个文件或main.dart文件中的include函数

Question

main.dart文件源代码👇但是我想在bottomNavigationBar();中调用bottom_navbar.dart函数

import 'package:flutter/material.dart';
import 'bottom_navbar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "BookKeep",
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF212121),
          title: Center(
            child: Text("BookKeep"),
          ),
          leading: GestureDetector(
            onTap: (){},
            child: Icon(
              Icons.menu,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: (){},
                child: Icon(
                  Icons.search
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

bottom_navbar.dart文件👇

import 'package:flutter/material.dart';

class bottomNavigationBar extends StatefulWidget {
  @override
  _bottomNavigationBarState createState() => _bottomNavigationBarState();
}

class _bottomNavigationBarState extends State<bottomNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home")
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.favorite,),
            title: new Text("Favourites")
          ),
        ],
      ),
    );
  }
}

在我尝试过这样的东西之后


然后它正在执行这样的错误error

Answer 1

这是main.dart:

import 'package:flutter/material.dart';
import 'bottom_navbar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "BookKeep",
      home: Scaffold(
        bottomNavigationBar: BottomNavBar(),
        appBar: AppBar(
          backgroundColor: Color(0xFF212121),
          title: Center(
            child: Text("BookKeep"),
          ),
          leading: GestureDetector(
            onTap: (){},
            child: Icon(
              Icons.menu,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: (){},
                child: Icon(
                  Icons.search
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是bottom_navbar.dart:

import 'package:flutter/material.dart';

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home")
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.favorite,),
            title: new Text("Favourites")
          ),
        ],
      ),
    );
  }
}

为避免混淆，我已将bottom_navbar.dart中的类名称从 bottomNavigationBar更改为 BottomNavBar快速提示，在bottom_navbar.dart中，要初始化一个类，您必须在第一个字符中用大写字母初始化您的类名称。

因此，它不是 bottomNavBar，而是 BottomNavBar
然后在main.dart文件中添加 BottomNavBar函数，添加: bottomNavigationBar: BottomNavBar(),
注意:NavBar看起来很棒伙计