Skip to content

[Flutter] 切換頁面的基本範例程式

Last Updated on 2021-05-17 by Clay

在開發 App 的時候，我們常常需要有多個頁面可以讓我們切換，還完成各式各樣的設置——以現在的 App 如此豐富的市場來看，只單純擁有一個頁面的 App 反而是比較少的。

因此，今天我就來紀錄該如何在使用 Flutter 開發 App 時進行『切換頁面』的動作。如果對於官方的文檔有興趣，可以參閱： https://flutter.dev/docs/reference/tutorials

順帶一提，我使用的 IDE 是 Intellij IDEA，我認為使用這個 IDE 進行 Flutter 開發非常方便，配置環境也簡單。如果有興趣，可以參考我之前寫過的《Flutter 下載 Intellij IDEA》。

切換頁面

首先，我們直接看一個簡單的程式碼：

import 'package:flutter/material.dart';

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


class Page01 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Page01'),
          ),
          body: _Page01()
      ),
    );
  }
}


class _Page01 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Go to Page02'),
      onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) => Page02()));},
    );
  }
}


class Page02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page02'),
      ),
      body: _Page02(),
    );
  }
}


class _Page02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page02'),
    );
  }
}



Output:

點選 Go to Page02 的按鈕。

我們就會來到第二頁了，按左上角的返回。

我們又會回到第一頁了。當然，不同的頁面也都可以這樣實做。

程式碼解釋

import 'package:flutter/material.dart';

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



一開始先進定好我們程式的進入點：最開始是由 Page01() 這個 Class 開始執行程式。

class Page01 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Page01'),
          ),
          body: _Page01()
      ),
    );
  }
}


首先先定義了一個 AppBar (就是上方的藍色條)，這個步驟其實可以忽略。然後我們定義這個 Class 的 body 為 _Page01() 這個 Class —— 以下的 Page02 也會這麼做。

這並不是沒有意義的分割行為，這可以讓我們在開發將來想要的專案時更能將程式碼模組化。

class _Page01 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Go to Page02'),
      onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) => Page02()));},
    );
  }
}



_Page01() 的功能基本上只有定義一個按鈕（種類是 RaiseButton），Button 上顯示的文字為 "Go to Page02"。

按下之後的事件定義在 onPressed: 之後，基本上為將界面轉移到 Page02() 所繪製的 Widget 上。

class Page02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page02'),
      ),
      body: _Page02(),
    );
  }
}



Page02() 與 Page01() 同樣，僅僅只有定義好 AppBar，剩下的主體都在 _Page02() 這個 Class 當中。

class _Page02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page02'),
    );
  }
}



_Page02() 其實也只定義了一個 Text 物件，放在畫面的正中央，顯示 "Page02" 而已。

至此，我們已經簡單完成在 Flutter 中切換頁面的功能了，想要更多的功能、更多的頁面都可以依此去做調整。若有遺漏或不全之處，還請多多留言給予我指導，非常感謝！

Tags:

Leave a Reply