iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 9

按上一頁時,不要刪掉商品

如此gif

  1. 按上一頁時不要刪掉商品
    pages/product.dart的build生命週期中,return一個WillPopScope組件,child是呈現畫面的那些組件,onWillPop是上一頁被按下去,切換頁面前要做的事。
import 'dart:async'; //為了使用Future
  ...
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        Navigator.pop(context, false);
        //如果傳true,就會像上一篇一樣刪掉商品
        return Future.value(false);
        //傳入false代表禁止他使用預設的方式跳回去,要他使用上一行的方式跳
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
            ...
        )
      ),
    );
  }
}
  1. 新增登入頁面

2-1. 改變檔案結構如下
https://ithelp.ithome.com.tw/upload/images/20181008/20111840sOaMUpi8ht.png

2-2. main.dart 初始頁面改為AuthPage

import './pages/auth.dart';
    ...
    return MaterialApp(
      ...
      home: AuthPage(),
    );

2-3. pages/auth.dart 含有一個登入按鈕的登入頁面

import 'package:flutter/material.dart';

import './products.dart';

class AuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('LOGIN'),
          onPressed: () {
            Navigator.pushReplacement(
            //直接把login頁面取代
            //所以他不會產生back的按鈕
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) => ProductsPage()
                  //回傳商品列表
              ),
            );
          },
        ),
      ),
    );
  }
}


主題來源:
Learn Flutter & Dart to Build iOS & Android Apps


上一篇
刪除商品
下一篇
收合式選單
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言