Question

我创建了一个简单的代码练习Flutter网站。

我一直在尝试在颤动网络中的两个屏幕之间导航。但是我单击第一个屏幕中的按钮并导航到第二个屏幕，第二个屏幕显示为空白，右上角显示调试标志。我刷新后，第二个屏幕数据就会到来。

如何解决此问题？

这是代码

import 'package:temp/providers/Increment_provider.dart';
import 'package:temp/screens/Detail_screen.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<IncrementProvider>(
      create: (btx) => IncrementProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
         
          primarySwatch: Colors.blue,
        ),
        initialRoute: '/',
        routes: {
       
          DetailScreen.routeName: (ctx) => DetailScreen(),},
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<IncrementProvider>(context, listen: false);
   
    return Scaffold(
      appBar: AppBar(
    
        title: Text('Main Screen'),
      ),
      body: Center(
       
        child: Column(
         
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<IncrementProvider>(builder: (ctx,counter,ch)=>Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
                        
            ),
            FloatingActionButton(
              onPressed: () {
                Navigator.pushNamed(context,DetailScreen.routeName);
              },
              tooltip: 'Press the button',
              child: Icon(Icons.view_agenda),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.incrementor(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}


import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:temp/providers/Increment_provider.dart';

class DetailScreen extends StatelessWidget {
  static const routeName='/Detail_screen';
  @override
  Widget build(BuildContext context) {
    final counter=Provider.of<IncrementProvider>(context);
    return Scaffold(
     
      body: Center(child:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('The incremented value is ${counter.count}'),
         
        ],
       
      ),),
       
    );
    
  }
  
}


import 'package:flutter/material.dart';

class IncrementProvider with ChangeNotifier{
 int _count=0;

int get count=> _count;

void incrementor (){
  _count+=1;

  notifyListeners();
}
}

Answer 1

将导航器更改为：

Navigator.of(context).pushNamed(DetailScreen.routeName);

和您的 DetailScreen 不需要该列，因为 Center 小部件正在执行您的逻辑。

由于这种“怪异”的行为，总是可以在此处发布您的flutter doctor -v，这样我们就可以判断您是否使用了 Flutter 的其他版本（如果有插件）是最新的等等。

此外，我建议首先从 DetailScreen 中删除您的提供程序，以查看是否影响行为。我在没有提供程序类的情况下尝试了您的代码，并且可以使用iOS模拟器运行。此外，要仔细检查，请在文本上强制使用 TextStyle 颜色，只是要确保设备中的深色/浅色主题不会对此产生影响。

Answer 2

我已从代码中删除了提供程序，并使用了参数在屏幕之间传递数据。

import 'package:flutter/material.dart';
import 'package:temp/screens/Detail_screen.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(

          primarySwatch: Colors.blue,
        ),
        initialRoute: '/',
        routes: {

          DetailScreen.routeName: (ctx) => DetailScreen(),},
        home: MyHomePage(),
      );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    int count=0;

void increment(){
  setState(() {
    count+=1;
    print(count);
  });
}
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text('Main Screen'),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
    Text(
                '$count',
                style: Theme.of(context).textTheme.headline4,
              ),


            FloatingActionButton(
              onPressed: () {
                Navigator.of(context).pushNamed(DetailScreen.routeName,arguments: count);
              },
              tooltip: 'Press the button',
              child: Icon(Icons.view_agenda),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

import 'package:flutter/material.dart';


class DetailScreen extends StatelessWidget {
  static const routeName='/Detail_screen';
  @override
  Widget build(BuildContext context) {
    final count=ModalRoute.of(context).settings.arguments as int;
    return Scaffold(

      body: Center(child:Text('The incremented value is $count',style: TextStyle(color: Colors.black),),),

    );

  }

}

P.S：我正在Chrome浏览器中测试此代码，发现该问题。我尚未在任何仿真器中进行测试。

请在Chrome浏览器中运行代码。

如何在Flutter Web中导航到其他屏幕

2 个答案: