在底部导航栏错误中导航时更改屏幕

Question

嗨，我是 Flutter 的新手，所以请多多包涵我问了太多没用的问题。所以我目前正在开发一个应用程序，第一个屏幕将是 Login/register 屏幕，然后在登录或注册后，显示实际的 主应用程序屏幕 我也设置了这个屏幕显示为 stateless 并在我的 HomePage.dart 上为我的 HomePage.dart 设置一个正文，这是一个 stateful 小部件，其中包含导航栏 但出于某种原因，我在

中遇到错误

final List<Widget> _children [
    NavHome()
  ];

表示 children 已初始化。我很困惑，因为我完全按照媒体的教程进行操作，但只有一个自定义主屏幕（出现在 main.dart 之后）

实际主应用程序屏幕的代码如下：

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

import 'home.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HomePage(),
    );
  }
}

下面是 Home.dart 的代码，表示 children 变量未初始化

import 'package:flutter/material.dart';
import 'package:vmembershipofficial/screens/nav_home.dart';


class HomePage extends StatefulWidget {
    static final String id = 'homepage';
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentTab = 2;
  final List<Widget> _children [
    NavHome()
  ];


  void onTabTapped(int index) {
    setState(() {
      _currentTab = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        body: _children[_currentTab],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentTab, //makes a new variable called current Tab
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.search, size: 30.0),
              title: Text('Search', style: TextStyle(fontSize: 12.0),),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              title: Text('Favorites', style: TextStyle(fontSize: 12.0),),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home', style: TextStyle(fontSize: 12.0),),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.message),
              title: Text('Messages', style: TextStyle(fontSize: 12.0),),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              title: Text('Account', style: TextStyle(fontSize: 12.0),),
            ),
          ],
        ),
      );
  }
}

NOTE: I just want the bottom navigation bar to change to the NavHome, or NavProfile when I tapped on different tabs. I just cant seem to find a way why the _children variable isnt initialized.

Answer 1

你就快完成了！

哪里出了问题

final List<Widget> _children [ // Missing = sign
   NavHome()
];

你能做什么

将上面的代码片段转换为：

final List<Widget> _children = [ // Add = sign here
   NavHome(),
   NavProfile(),
   // Add more screens here   
];

我为您创建了一个简单的应用程序，它模拟了您需要在 NavHome 和 NavProfile 之间切换的用例。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  static final String id = 'homepage';
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentTab = 0;
  final List<Widget> _children = [
    RedPage(),
    BluePage(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentTab = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentTab],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentTab,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text(
              'Red',
              style: TextStyle(fontSize: 12.0),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
              'Blue',
              style: TextStyle(fontSize: 12.0),
            ),
          ),
        ],
      ),
    );
  }
}

class RedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

class BluePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.blue,
      ),
    );
  }
}

我还注意到您的底部导航栏中有 5 个小部件，请随意添加占位符，这样您就不会在点击没有对应选项卡的选项卡时出现 RangeError 异常 screen/s .

希望对您有所帮助。

在底部导航栏错误中导航时更改屏幕

Changing screens when navigating in bottomnavigation bar error

android

flutter

flutter-dependencies

flutter-layout