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

Question

嗨，我是新来的，所以请耐心等待我问了太多的问题。所以我目前正在开发一个应用程序，第一个屏幕将是登录/注册屏幕，然后在登录或注册后，显示实际的 主应用程序屏幕 我也将此屏幕设置为 无状态 并在我的HomePage.dart 上为我的HomePage.dart 设置一个主体，这是一个有状态 小部件，其中包含导航栏，但出于某种原因，我遇到了一个错误

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

说孩子们被初始化了。而且我很困惑，因为我完全按照中等的教程但是只有一个自定义主屏幕（出现在 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 的代码如下所示，子变量未初始化

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),),
            ),
          ],
        ),
      );
  }
}

注意：当我点击不同的选项卡时，我只想将底部导航栏更改为 NavHome 或 NavProfile。我似乎无法找到为什么 _children 变量未初始化的方法。

Answer 1

你快到了！

出了什么问题

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

你能做什么

将上面的sn-p代码转换为：

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

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

ma​​in.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 异常。

希望这会有所帮助。