Flutter 跨平台開發架構-實現簡單的頁面切換

張阿鬼 2020/12/31 17:29:50

0 4015

在Flutter開發的過程中，通常都會需要用到頁面的切換，
Flutter的頁面約略可以分成兩種巡覽方式。
一種是透過創立物件實體巡覽，
另外一種則類似前端開發時的路由概念。

首先我們準備兩個頁面，一個為進入頁，另一個則是要巡覽頁面

APP進入頁

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Change Page',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('換頁Demo'),
        ),
        body: _FirstPage(),
      ),
    );
  }
}

class _FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

第二頁

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('換頁Demo'),
      ),
      body: _SecondPage(),
    );
  }
}

class _SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

透過實體巡覽頁面
接著我們將進入頁跟第二頁的畫面中央都放置一個按鈕
首頁的按鈕按下後會進入到第二頁
而第二頁的按鈕按下後會退回上一頁

在進入頁中，按鈕按下後，
我們使用Navigator.push的方式將頁面切換到第二頁

 @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
        child: Text("去第二頁"),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => SecondPage()));
        },
      ),
    );
  }

在第二頁中，按下按鈕後
會使用Navigator.pop的方式回到上一頁

 @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
        child: Text("回上一頁"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );
  }

最後產生的結果

使用路由方式
首先在進入頁的地方，註冊routes資訊，

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Change Page',
        theme: ThemeData(
          primarySwatch: Colors.green,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('換頁Demo'),
          ),
          body: _FirstPage(),
        ),
        routes: <String, WidgetBuilder>{'/second': (_) => new SecondPage()});
  }

接著更改換頁的程式碼，將push改成pushNamed，
傳入的參數文字就是在前步驟於routes中註冊的資訊

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
          child: Text("去第二頁"),
          onPressed: () {
            Navigator.pushNamed(context, "/second");
          }),
    );
  }

範例程式碼下載
https://bitbucket.org/steven0529/flutterchangepage/src/master/