App Inventor學習記錄62,新增或刪除清單顯示器的項目,做簡單記事本

這一次要做的是一個簡單的記事本,主要就是用清單顯示器 Listview這個元件,把事項加到這個元件中。怎麼把新增項目加到清單顯示器中,以及怎麼刪除不要的項目

記錄一下:
App Inventor學習記錄62,新增或刪除清單顯示器的項目,做簡單記事本


執行的畫面如下:

在文字輸入盒中,輸入我們要新增的事項,然後點擊增加按鈕之後,就會把這個事項加到清單顯示器之後。然後把文字輸入盒的文字清空,方便下一次的輸入。

要刪除事項的時候,只要在清單顯示器上點一下,就會跳出一個對話框,確認是否要刪除這一個項目。當然也可以不跳出一個對話框,但是這樣就有可能會誤刪,所以加上一個對話框的功能。


畫面編排部份如下:

畫面編排的部份用到的元件不多。
1 個文字輸入盒,用來輸入事項。
1 個按鈕元件,用來把事項加入到清單顯示器中。
再來就是 1個清單顯示器和 1個對話框的元件。


全部的程式碼如下:


第 1部份的程式碼說明:

新增一個變數叫記事本內容,它的預設值是一個清單。
由於清單顯示器只能清單的內容,所以記事本內容的值就要設定成一個清單。


第 2部份的程式碼說明:

當螢幕初始化的時候候:
把清單顯示器的元件,設定成記事本內容這一個清單。


第 3部份的程式碼說明:

當按鈕 1被按下的時候:
把文字輸入盒的文字內容,新增到記事本內容這個清單中。
把文字輸入盒的文字,設定為空白。方便下一次的輸入。
把清單顯示器的元素,設定成記事本內容。因為我們新增了內容,但系統不知道,所以在這裡,我們還要在加上這一條,把清單顯示器的內容更新到最新的記事本內容


第 4部份的程式碼說明:

清單顯示器選擇完成的時候:
這裡指的是我們點擊了清單顯示器上的某一項

呼叫對話框,顯示選擇對話框。
輸入相關要顯示的標題和訊息,然後把按鈕 1設定成是,按鈕 2設定為否。
允許取消的選項,就設定為假。


第 5部份的程式碼說明:

當對話框選擇完成之後,我們加入一個判斷式:
如果選擇值等於是的話:
先判斷清單顯示器中的選中項是位於記事本內容的那個位置,然後就把這個選中項從記事本內容中給刪除。


這次主要是要介紹怎麼新增項目到清單顯示器中,以及怎麼點擊清單顯示器,就可以把事項從清單顯示器中給刪除。實際上這次 APP是沒有記事功能的,因為沒有加上資料庫儲存,所以每一次打開程式,所以的記錄都會被刷掉。

下一篇我們就來把資料庫的功能給加上去,這樣就是一個簡單的記事本 APP了。

這次的 aia檔的下載連結如下:
點我下載 NO_62_Delete_From_Listview.aia

參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響