Question

您好，我是新手，所以请忍受我提出过多的nooby问题。因此，我目前正在开发一个应用程序，第一个屏幕将是“登录/注册”屏幕，然后在定向登录或注册后，显示实际的主应用程序屏幕，我也将该屏幕设置为无状态，然后在我的HomePage.dart上为我的HomePage.dart设置正文，这是一个有状态小部件，其中包含导航栏，但是由于某种原因，我在遇到错误

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

说孩子被初始化了。而且我很困惑，因为我是从中等大小的BUT跟随教程而来的，只是一个自定义的主屏幕（出现在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),),
            ),
          ],
        ),
      );
  }
}

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

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异常。

希望这会有所帮助。

在底部导航栏中导航时切换屏幕错误

1 个答案: