用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頁面的開發。