使用导航器问题在页面之间导航

时间:2019-10-14 21:34:14

标签: flutter flutter-layout

我正在研究Flutter,并使用此框架构建我的第一个应用程序。

现在我面临一个问题。

我的情况很简单,我想从主屏幕导航到另一个屏幕。

这是主视图中的代码

class HomeView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeViewState();
  }
}

class HomeViewState extends State<HomeView> {
...

并且我想使用导航器导航到另一个屏幕

@override
  Widget build(BuildContext context) {
    return Container(
        child: InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/userdetailsview');
            },
            child: Card(
...

这是我的App.Dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: Scaffold(
        body: Center(
          child: HomeView(),
        ),
      ),
      routes: <String,WidgetBuilder>{
        '/homeview': (BuildContext context) => new HomeView(),
        '/userdetailsview': (BuildContext context) => new UserDetails(),
      },
    );
  }
}

最后这是我要浏览的页面的代码

class UserDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('test');
  }

}

您可以看到我的情况很简单,但这就是结果。

enter image description here

由于某些原因,您可以看到第二页与主页重叠。

我是使用Xamarin Forms和XAML应用程序的开发人员,Flutter非常容易理解,我真的很喜欢它,但是缺少像这样的简单任务的信息。

如果有人可以帮助解决我的问题,我将不胜感激

谢谢!。

2 个答案:

答案 0 :(得分:1)

在UserDetails.dart中尝试

class UserDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
             body: Text('test');
    )
  }
}

答案 1 :(得分:-1)

问题在于没有脚手架。 Scaffold是Material应用程序(AppBar,Drawer之类的东西)的帮助程序。但是您不必强迫使用Material。

您所缺少的是作为父级的Theme实例。