需要初学者帮助 - BottomNavBar

Posted 2023-04-18

【中文标题】需要初学者帮助 - BottomNavBar

【英文标题】：Beginner Help Required - BottomNavBar

【发布时间】：2021-04-11 20:22:46

【问题描述】：

我只是在学习，无法理解某些东西。

我正在构建一个简单的应用程序，但该应用程序需要显示的第一件事是某种启动画面。 在点击 SplashScreen 上的唯一按钮时，理想情况下它会加载应用程序的其余部分，但我也希望我的应用程序在内部围绕底部导航栏工作。

我自己完成了底部导航栏，它可以在我的页面之间循环，但我的 main.dart 指向我的 Splash_Screen。在我使用的导航模型中，主要指向 Nav.dart 文件。

如何让我的应用按以下顺序启动：Splash_Screen --> 当点击按钮时 --> 进入底部导航栏将通向其各自的 3 个页面的位置。

提前致谢。

编辑：代码

main.dart
import 'package:flutter/material.dart';
import 'package:offroad/screens/splash_screen.dart';


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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  

SplashScreen.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:offroad/screens/home_screen.dart';

class SplashScreen extends StatefulWidget 
  @override
  _SplashScreenState createState() => _SplashScreenState();


class _SplashScreenState extends State<SplashScreen> 
  Color mainColor = Color(0xFFF1330A);
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/splash.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: Container(
          color: Colors.black54,
          child: Stack(
            children: <Widget>[
              Container(),
              Positioned(
                bottom: 90,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: GestureDetector(
                    onTap: () 
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => Home(),
                        ),
                      );
                    ,
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 80),
                      height: 80,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: mainColor,
                      ),
                      child: Center(
                        child: Text(
                          'Entrar',
                          style: TextStyle(
                            fontSize: 25,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: 230,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Text(
                    'Tu mundo 4x4\n empieza aqui!',
                    style: GoogleFonts.amiri(
                      height: 1.2,
                      textStyle: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 40,
                      ),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

一旦我的启动页面加载并点击按钮，我希望它现在进入并加载它，这是我单独工作的，但 main.dart 指向“nav.dart”

【问题讨论】：

请添加flutter标签，以便相关观众可以帮助您并提供代码，以便清楚问题所在！

谢谢，我已经添加了代码和图像来帮助传递手头的问题。再次感谢！

您能否更具体地说明您需要什么？

【参考方案1】：

不确定您想要实现的具体目标，但您应该使用 MaterialApp 中的路由或 onGenerateRoute 来定义您的路由。 在这种情况下，您可以摆脱 home 并将初始路由设置为 Splash Screen，并将默认路由设置为 nav。 然后，您可以使用您的路由或 onGenerateRoute 中定义的命名路由导航到您的选项卡组件。