App Inventor學習記錄56,三角形的邊長、高度、周長、面積計算 APP

有的時候嘟哥在問我一些數學題的時候,有些公式我已經不太確定,乾脆就做個 APP把這些公式整理一下,這次就先從計算三角形的邊長、高度、周長、面積這裡開始。之後再來加入其它形狀。

記錄一下:
App Inventor學習記錄56,三角形的邊長、高度、周長、面積計算 APP


程式執行的時候是這樣子的:

從下拉式選單中,選擇要輸入那一個數值之後,再按下開始計算的按鈕,就會把相關的計算值給列出來。同時,在畫面的最下方也會把計算的公式給顯示出來。

我不知道 APP INVENTOR中怎麼直接輸入數學公式,所以這裡是用圖片的方式來顯示。


初始畫面編排如下:

做的時候才想起來光是三角型就有好多種,所以只能先把不同的三角形給拆開。
不然寫起來就太長了。

畫面一開始,擺了 2個圖片元件,寬度都設定成 50%。
開啟圖片Clickable可點擊的屬性讓圖片可以被點擊。但因為圖片被點擊的時候,不會有像按鈕元件,有被點擊的效果出來。所以這裡其實用按鈕元件,再變更按鈕的背景圖片的作法,會比較好一點。


初始畫面的程式碼如下:

當圖片被點擊的時候:
開啟另一個螢幕,要被開啟的螢幕叫 T1。


這是 T1螢幕的畫面配置:

1個圖片元件,放在最上方,做為顯示用。
1個標籤元件,用來說明。
1個下拉式選單元件,用來選擇輸入的條件。
1個文字輸入盒元件,用來輸入數值用,這裡有勾選只能輸入數字的屬性
接下來是一個 3X3的表格配置,用來放一些顯示用的標籤


T1螢幕的程式碼如下:


T1第 1部份的程式碼說明:

建立一個叫選擇元素的變數,它的值是一個表單,依次為:
邊長
高度
面積

建立一個叫文字提示的變數,它的值是一個表單,依次為:
請輸入 a值
請輸入 h值
請輸入 S值
這個表單的值,會顯示在文字輸入盒的提示文字。

建立一個叫公式圖片的變數,它的值是一個表單,依次為:
1-1
1-2
1-3
我把公式的圖片的檔名,設定為1-1、1-2、1-3,所以建一個表單在這裡,等一下可以讓系統用下拉式選擇的選中項去匹配要顯示那一張圖片,這樣子寫起來會比較簡單些。


T1第 2部份的程式碼說明:

當 T1螢幕初始化的時候:
把下拉式選單的元素,設定成選擇元素這個清單的內容。這是主要的項目。

至於把下拉式選擇的選中項索引設定為 1……是我忘了刪除,可以不寫。


T1第 3部份的程式碼說明:

當下拉式選單選擇完成:
把數值輸入這個文字輸入盒的提示文字,設定成文字提示清單中的第幾項。這個第幾項,是把下拉式選單的選中項,找出位在選擇元素這個清單中的第幾項來的。

假設,我們從下拉式選擇中,選擇了高度。我們可以利用高度這個值,去判斷高度這個值,是位在選擇元素這個清單中的第 2項。然後我們再把數值輸入這個文字輸入盒的提示文字,設定成文字提示這個清單中的第 2項,也就是”請輸入 h值”。

把公式圖片這個圖像元件的圖片,設定的方法,也是一樣的。都是先由下拉式選單的選中項,去判斷是位於清單中的那一項。然後再把這個項次,代入到另一個清單中做選擇。


T1第 4部份的程式碼說明:

這個部份反倒是沒有什麼好講的,就是利用流程判斷的選中值去做判斷。
在不同的選中值中,代入不同的數學公式。


實際在做的時候,本來想把所有的東西,塞在同一個畫面裡,但光是三角形的種類就一堆了,正三角形、等腰三角形、直角三角形……一個畫面真在是放不下,所以才開了 T1的螢幕。
把不同的三角形拆到不同的螢幕下做,雖然麻煩了點,但反到比較清楚些。

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

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

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

發表迴響