flutter - Flutter namedRoutes 不会导航到点击的屏幕,但不会抛出错误日志
问题描述
我一直在尝试将 namedRoutes 与自定义的“NavLink”组件一起添加到我的抽屉中,但链接没有导航到点击的屏幕。当我单击它们时,它们不会抛出错误日志,所以我不知道发生了什么。
主要.dart
import 'package:flutter/material.dart';
import 'package:hire_me/homepage.dart';
import 'package:hire_me/screens/notFound.dart';
import 'package:hire_me/screens/todoList.dart';
import 'package:hire_me/screens/nodeJs.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Portfolio',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 36.0,
fontWeight: FontWeight.bold,
color: Colors.black),
headline2:
TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
bodyText1:
TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal))),
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/todoList': (context) => TodoList(),
'/nodeJs': (context) => NodeJs(),
'/notFound': (context) => NotFound(),
});
}
}
主页组件
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Carlos Gumucio'),
centerTitle: true,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('More from me')),
NavLink(title: 'Todo List', route: '/todoList'),
NavLink(title: 'NodeJs API', route: '/nodeJs'),
],
)),
body: SingleChildScrollView(...
navLink.dart 组件
import 'package:flutter/material.dart';
class NavLink extends StatelessWidget {
const NavLink({Key? key, this.title = 'link here', this.route = '/notFound'})
: super(key: key);
final String title;
final String route;
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
// close the nav after navigating
Navigator.pop(context);
});
}
}
发布规范.yaml
name: hire_me
description: Reach me hub.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
url_launcher: ^6.0.4
material_design_icons_flutter: ^4.0.5955
google_fonts: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/images/
扑医生
[√] Flutter (Channel beta, 2.2.0-10.3.pre, on Microsoft Windows [Versión 10.0.19042.985], locale
es-CL)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio
[√] VS Code (version 1.56.0)
[√] Connected device (2 available)
• No issues found!
解决方案
好吧,我看到您在推送后立即弹出屏幕:
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
// close the nav after navigating
Navigator.pop(context); // This will pop your last pushed route
});
}
尝试用 注释掉该行Navigator.pop(context);
。
编辑1:
在推送新路线之前关闭抽屉:
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// close the nav before navigating
Navigator.pop(context); // This will pop your last pushed
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
route
});
}
推荐阅读
- android - Android Dagger2 共享管理器类
- ios - 如果条件问题迅速
- javascript - js中的二维码生成器
- javascript - 带有 addEventListener('keyup',)) 的 JavaScript 不能在 Web 上工作,但在 jsfiddle 上工作,请协助
- google-maps - Flutter map_view不显示标记
- android - 随机设备中的 Google AdMob 错误代码 (1)
- hyperledger-fabric - 调用 channel.sendTransactionProposal() 时出现 Hyperledger Fabric 节点dk 错误
- makefile - 如何动态生成 Makefile 目标
- highcharts - Highcharts Sunburst 水平半径
- java - 如何在android中获取特定数字的计数