如何让 Navigator 在 Flutter 中工作？

Question

我是 Flutter 的新手，所以很明显我在代码中的某个地方搞砸了，我无法弄清楚。基本上我有一个登录屏幕，我想从中导航到第二个屏幕，但是当我 select 按钮时绝对没有任何反应，也没有出现错误。我一直在寻找答案，但其中 none 可以解决问题。我希望有一个人可以帮助我。（按钮的文本为西班牙语）。

这是main.dart:

import 'package:flutter/material.dart';

import 'package:go_out/screens/screens.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: 'home',
      routes: {
        'home': (_) => const HomeScreen(),
        'signInEmail': (_) => const SignInEmail(),
      },
    );
  }
}

这是home_screen.dart:

import 'package:flutter/material.dart';

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../widgets/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Padding(
        padding: EdgeInsets.only(left: 15, right: 15),
        child: Center(
          child: _SignInPageDesign(),
        ),
      ),
    );
  }
}

class _SignInPageDesign extends StatelessWidget {
  const _SignInPageDesign({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 10, right: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            'images/logo.png',
            height: 200,
            fit: BoxFit.cover,
          ),
          const SizedBox(
            height: 30,
          ),
          CustomElevatedButtonWithoutIcon(
            text: 'Crear Cuenta',
            onPressed: () => Navigator.pushNamed(context, 'signInEmail'),
          ),
          const SizedBox(height: 12),
          CustomElevatedButtonWithIcon(
            text: 'Continuar con Facebook',
            onPressed: () {},
            icon: FontAwesomeIcons.facebookSquare,
          ),
          const SizedBox(height: 12),
          CustomElevatedButtonWithIcon(
            text: 'Continuar con Google',
            onPressed: () {},
            icon: FontAwesomeIcons.google,
          ),
          const SizedBox(height: 12),
          CustomElevatedButtonWithIcon(
            text: 'Continuar con Apple',
            onPressed: () {},
            icon: FontAwesomeIcons.apple,
          ),
          const SizedBox(height: 12),
          const CustomTextButton(
            text: 'Iniciar sesión',
          ),
          const SizedBox(height: 12),
          CustomElevatedButtonWithoutIcon(
            text: 'Registrar comercio',
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

这是 home_screen.dart 的问题，它没有 return 任何值。

CustomElevatedButtonWithoutIcon(
            text: 'Crear Cuenta',
            onPressed: () => Navigator.pushNamed(context, 'signInEmail'),
          ),

这是我想去的第二个屏幕sign_in_email.dart:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(254, 80, 0, 1),
      ),
    );
  }
}

这是 class CustomElevatedButtonWithoutIcon:

import 'package:flutter/material.dart';

class CustomElevatedButtonWithoutIcon extends StatelessWidget {
  const CustomElevatedButtonWithoutIcon({
    Key? key,
    required this.text,
    required this.onPressed,
  }) : super(key: key);
  final String text;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(
        text,
        style:
            const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
      ),
      onPressed: () {},
      style: ButtonStyle(
        fixedSize: MaterialStateProperty.all<Size>(const Size(0, 50)),
        backgroundColor: MaterialStateProperty.all<Color>(
            const Color.fromRGBO(254, 80, 0, 1)),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
        ),
      ),
    );
  }
}

Answer 1

CustomElevatedButtonWithoutIcon 在按下时实际上没有做任何事情，onPressed: () {}, 应该是 onPressed: onPressed,。

检测此问题的一种简单方法是在导航之前添加打印语句，或添加断点。如果两者都没有被触发，则该函数没有被调用，您的问题不在导航中。

Answer 2

您没有传递任何 onPressed 函数，您将其保留为空，所以没有任何效果，只需将您的 onPressed 函数传递到 ElevatedButton 中，如下所示

import 'package:flutter/material.dart';

class CustomElevatedButtonWithoutIcon extends StatelessWidget {
  const CustomElevatedButtonWithoutIcon({
    Key? key,
    required this.text,
    required this.onPressed,
  }) : super(key: key);
  final String text;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(
        text,
        style:
            const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
      ),
      onPressed: onPressed,
      style: ButtonStyle(
        fixedSize: MaterialStateProperty.all<Size>(const Size(0, 50)),
        backgroundColor: MaterialStateProperty.all<Color>(
            const Color.fromRGBO(254, 80, 0, 1)),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
        ),
      ),
    );
  }
}

此外，最好使用 RouteGenerator，使用下面的代码创建一个 route_generator.dart 文件

import 'package:flutter/material.dart';

class RouterCustom {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;

    switch (settings.name) {
      case "home":
        return MaterialPageRoute(
          builder: (_) => const HomeScreen(),
          settings: const RouteSettings(name: "home"),
        );
      case "signInEmail":
        return MaterialPageRoute(
          builder: (_) => const SignInEmail(),
          settings: const RouteSettings(name: "signInEmail"),
        );

      default:
        return MaterialPageRoute(
          builder: (_) => Scaffold(
            body: Center(
              child: Text('No route defined for ${settings.name}'),
            ),
          ),
          settings: const RouteSettings(name: "404"),
        );
    }
  }
}

然后将其传递给您的主要方法的路由参数

MaterialApp(
  initialRoute: "home",
  onGenerateRoute: RouterCustom.generateRoute,
)

Answer 3

您的小部件 CustomElevatedButtonWithoutIcon 在按下后没有调用任何函数

你有这个

onPressed: () {},

更改为

onPressed: onPressed

如何让 Navigator 在 Flutter 中工作？

How can I get the Navigator to work in Flutter?

android

ios

flutter

flutter-test