Flutter 小册 | 导航路由已上架

在Flutter中，导航路由是通过Navigator小部件来管理的。以下是一个简单的例子，展示了如何在Flutter应用中使用导航路由：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      routes: <String, WidgetBuilder>{
        '/detail': (BuildContext context) => DetailPage(),
      },
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Detail Page'),
          onPressed: () {
            Navigator.pushNamed(context, '/detail');
          },
        ),
      ),
    );
  }
}
 
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: Text('This is the detail page.'),
      ),
    );
  }
}

在这个例子中，我们定义了两个页面：HomePage和DetailPage。在MaterialApp中，我们通过routes属性定义了一个路由表，这个表告诉Flutter如何去创建并导航到DetailPage。在HomePage中，当按钮被点击时，我们使用Navigator.pushNamed方法来推送一个命名路由到导航栈。这将会显示DetailPage。