Flutter：如何跳轉頁面？

CoorChice發表於2019-04-06
Flutter

目錄傳送門：《Flutter快速上手指南》先導篇

1.Flutter 中的頁面

前面提到過，在 Flutter 中萬物皆 Widget，頁面自然也是一個 Widget。

只不過是一個全屏的 Widget。

以下這個 Widget 就可以作為一個頁面：

class SplashPage extends StatelessWidget {
  final splashUrl =
      'https://raw.githubusercontent.com/chenBingX/img/master/其它/u=343452579,826911251&fm=26&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment(0, 0.75),
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(image: NetworkImage(splashUrl))),
        ),
        GestureDetector(
          // 設定點選事件
          onTap: () {
            // 使用 Navigator 跳轉頁面
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return HomePage();
            }));
          },
          child: Container(
              width: 100,
              height: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                gradient: LinearGradient(
                  colors: <Color>[Colors.red, Colors.green, Colors.blue],
                ),
              ),
              child: Center(
                  child: Text(
                "Next",
                style: TextStyle(color: Colors.white, fontSize: 16),
              ))),
        ),
      ],
    );
  }
}

複製程式碼

應用頁面：

void main() => runApp(MaterialApp(
      title: 'Flutter',
      home: SplashPage(),
    ));
複製程式碼

看看效果：

2.使用 Navigator 跳轉頁面

在 Flutter 中，使用 Navigator 來進行頁面跳轉。

一個簡單的跳轉頁面的例子：

Navigator.push(context, MaterialPageRoute(builder: (_) {
            // 目標頁面，即一個 Widget
            return DetailScreen();
複製程式碼

如果想要關閉一個頁面，可以這樣做：

Navigator.pop(context);
複製程式碼

我們再構建一個 Scaffold 風格的頁面，看看跳轉的效果。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Text('This Home Pahe'),
        ),
      ),
    );
  }
}
複製程式碼

看看效果：

3.通過頁面名稱跳轉

Navigator 支援通過頁面名稱跳轉到指定頁面。

當然，你需要先註冊頁面，在 MaterialApp 的 routes 中。

MaterialApp(
  // 設定第一個頁面，即啟動頁
  initialRoute: '/',
  routes: {
    // 註冊一個頁面
    '/': (context) => FirstScreen(),
    // 註冊第二個頁面
    '/second': (context) => SecondScreen(),
  },
);
複製程式碼

現在，你可以通過剛剛註冊的頁面名稱來跳轉一個頁面，就像這樣：

Navigator.pushNamed(context, '/second');複製程式碼

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github


相關文章