[教學] 手機APP開發入門--9. 按鈕與反應

APP必須要與使用者互動，否則就太單調無趣。
最常見的互動界面就是按鈕，下面就是按鈕配置語法，
請打開 home.xml 在 label 下面增加一行：

<Button text="關於我" tap="onTap"/>

多了這行，APP主畫面在文字標籤下會多一個『關於我』的按鈕，按了會執行 onTap 這個函數。
還記得這個函數應該會被定義在哪裡嗎？
對了，就是 home.js, 所以我們還需要提供這樣一個 JavaScript 內容如下：

var frameModule = require("ui/frame");

function onTap() {
  frameModule.topmost().navigate("home/about");
}

exports.onTap = onTap;

一開始載入 ui/frame 模組並且命名為 frameModule.
接著定義要被按鈕呼叫的 onTap 函數。
函數內容為執行剛剛載入的模組裡的 topmost().navigate 函數。
該函數的作用是跳轉畫面到 home/about.
最後把定義好的函數會給 onTap.

從上面定義的函數內容所呼叫的 navigate 函數得知我們還需要提供 about.xml 也就是『關於我』的畫面檔案，
內容您自己寫，我的範例如下：

<Page>
  <StackLayout>
    <Label text="我喜歡電腦"/>
    <Label text="我也喜歡音樂"/>
    <Label text="所以我喜歡電腦音樂"/>
  </StackLayout>
</Page>

所以我們的 home 資料夾下現在已經有
home.xml, home.js, about.xml 三個檔案了，測試看看吧。
※最後更新時間：2019-12-25 08:08:05 From：123.193.249.19 By：coscell

[教學] 手機APP開發入門--9. 按鈕與反應 - 討論區