时间戳

首页 > 解决方案 > 在底部导航栏错误中导航时更改屏幕

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

问题描述

嗨，我是新来的，所以请耐心等待我问了太多的问题。所以我目前正在开发一个应用程序，第一个屏幕将是登录/注册屏幕，然后在登录或注册之后，显示实际的主应用程序屏幕我也将此屏幕设置为无状态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 变量未初始化的方法。

标签： androidflutterflutter-layoutflutter-dependencies

解决方案

您快到了！

什么地方出了错

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

你可以做什么

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

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

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

主要.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当您在没有对应屏幕的情况下点击选项卡时不会出现异常。

希望这可以帮助。

推荐阅读