用Flutter编写页面跳转实现布局和导航

一、环境搭建

在开始编写Flutter页面之前需要搭建好Flutter的开发环境，可参考Flutter官网进行搭建：https://flutter.dev/docs/get-started/install。

搭建好开发环境后，我们可以在终端中输入如下指令来验证是否成功：

flutter doctor

如果环境搭建成功，那么命令行会输出一些提示信息，如下：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on macOS 11.3 20E232 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.57.0)
[✓] Connected device (2 available)

• No issues found!

二、页面布局

在Flutter中，页面布局通常使用组件来实现。以下是几个常用的布局组件：

• Container：矩形元素，可以设置颜色、边框、圆角等属性；
• Row、Column：行和列，可用来进行水平和垂直布局；
• Stack：堆叠组件，用来进行层叠布局；
• Expanded：可扩展的组件，用来给子组件分配剩余空间。

下面我们利用以上组件来实现一个基础的页面布局：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Layout Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Page Layout Demo'),
        ),
        body: Center(
          child: Container(
            color: Colors.blueAccent,
            width: 200.0,
            height: 200.0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Hello, Flutter!',
                  style: TextStyle(
                    fontSize: 24.0,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 16.0),
                RaisedButton(
                  onPressed: () {},
                  child: Text('Press Me'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上代码实现了一个简单的页面布局：在页面的中心位置，放置了一个蓝色的矩形元素，并在其中放置了一个包含一段文本和一个按钮的垂直方向的布局。

三、页面跳转

在Flutter中，可以通过Navigator.push()方法实现页面之间的跳转。我们需要先声明需要跳转到的页面，并在跳转的触发事件中调用push方法，同时将所需要传递的参数传入。

下面是一个简单的页面跳转实现的示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Layout Demo',
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Page2()),
            );
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to Page 1'),
        ),
      ),
    );
  }
}

以上代码中，我们定义了两个页面，分别为Page1和Page2。在Page1中，我们将“Go to Page 2”按钮的点击事件绑定为调用Navigator.push()方法，跳转到Page2页面。而在Page2中，我们将“Go back to Page 1”按钮的点击事件绑定为调用Navigator.pop()方法，返回到前一个页面。

四、总结

本文我们介绍了Flutter中页面布局和页面跳转的基本用法。页面布局中，我们可以利用一些常用的组件来实现页面基本的结构和布局；页面跳转中，我们可以通过Navigator.push()方法来实现页面之间的跳转和传递参数。通过这些基础用法，我们可以快速高效地完成Flutter页面的开发。