章節四：基本UI元件應用實例

因田木

9 小时前

IPFS

基本UI元件」如同行動App建築的積木，理解它們的原理和組合方式，是打造高質感AI新介面不可或缺的基礎。透過B4A簡單直覺的設計工具與程式語法，開發者能迅速構建專業、實用並兼顧美感與效率的AI應用。

一、行動應用UI的核心基礎

在AI新介面UI設計與實作過程中，掌握「基本UI元件」的正確用法—如按鈕、標籤、輸入框、圖片、列表等—是跨足專業高效開發的重要第一步。這不僅關乎易用性和美感，更攸關AI互動流程、訊息輸出入及即時回饋的流暢體驗。

本章從實作角度，結合perplexity.ai在日常生活AI應用的需求，逐一剖析各主要元件的運用邏輯與組合技巧，實現專業、實用且高度擴展性的行動App設計。

二、B4A基本UI元件全面剖析

1. 按鈕（Button）

按鈕為行動介面上觸發指令及互動的核心元件。具備清晰的標籤語和回饋效果，可引導用戶操作，啟動查詢、發送指令或切換流程。例如在AI問答App，用戶輸入問題後點擊「提問」按鈕，觸發RESTful API發送。

常用屬性：Text（顯示文字）、TextStyle（字型、大小）、Enabled（是否啟用）
事件：Click、LongClick

2. 標籤（Label）

標籤主要用於顯示靜態資訊、說明、提示等。可作為標題或欄位說明，也常用於顯示AI產生的回覆結果。透過字型、顏色、對齊方式等調整，讓資訊一目瞭然。

常用屬性：Text、TextColor、Font、Alignment
事件：Click、LongClick（可模擬互動需求）

3. 輸入框（EditText）

輸入框是用戶主動資料輸入的入口，常用於文字提問、表單填寫等場景。具備多樣輸入限制（如最長字數、僅限數字、遮蔽密碼等）以提升準確性和安全性。

常用屬性：Hint（預設提示）、InputType（文字、數字、密碼等）、Text
事件：TextChanged、FocusChanged

4. 圖片元件（ImageView）

圖片能強化視覺表現，也可承載Logo、頭像、情境插圖或動態反饋。結合AI運算結果（如人臉辨識、圖像推論）時，常用於即時顯示或預覽。

常用屬性：Bitmap/Image（圖片資源）、ScaleType（縮放方式）、Tag（標註用途）
事件：Click、LongClick

5. 列表（ListView/CustomListView）

列表用於批量資訊展示（如AI歷史紀錄、推薦清單、選項列表等），可支援點擊、劃動、排程與過濾，是訊息輸出的重要元件。

常用屬性：Items（資料集合）、SingleLine/TwoLine模式
事件：ItemClick、ItemLongClick

三、應用組合實例——以AI問答App為例

以日常生活應用的perplexity.ai型AI問答App實作，典型UI組合如下：

App標題（Label）
提問輸入區（EditText + Button）
AI回應顯示區（Label/ListView）
背景或Logo圖片（ImageView）

操作流程：

用戶於「EditText」輸入問題
點擊「Button」送出
App以AI服務為後端，接收回應於「Label」或「ListView」顯示
若需顯示AI推理過程、插圖等，可運用「ImageView」呈現

四、B4A設計器與元件屬性設定技巧

B4A的Designer工具（設計器）可將上述元件以拖放方式擺放至主畫面，通過Properties設定每個元件：

指定「Name」屬性利於後端程式綁定（如btnAsk, edtQuestion, lblAnswer）
設定Align屬性讓布局美觀，如EditText靠上、中等
ImageView可透過Add Images匯入專案圖像資源並指派顯示
針對ListView，可於Items屬性直接設初值，搭配程式進行動態修改

五、進階組合模式與互動流設計

AI新介面設計強調流程簡潔、一致回饋與多元輸出，可進一步將上述基本元件做進階組合：

多欄位/多步驟表單：用多組EditText + Label構成導引式輸入流程
智能提示按鈕：Button搭配AI推薦（如猜你想問），實現主動引導
圖片辨識回饋：ImageView即時展示用戶上傳照片，AI回覆結果顯示於Label
歷史對話紀錄：ListView儲存與顯示AI問答歷程，便利查詢

六、B4A語言程式範例

以下為AI問答應用核心UI元件的主程式邏輯範例：

text
Sub Process_Globals
End Sub

Sub Globals
    Private edtQuestion As EditText
    Private btnAsk As Button
    Private lblAnswer As Label
    Private imgLogo As ImageView
    Private lstHistory As ListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Main")
    btnAsk.Text = "問AI"
    lblAnswer.Text = ""
    imgLogo.Bitmap = LoadBitmap(File.DirAssets, "app_logo.png")
    lstHistory.Clear
End Sub

Sub btnAsk_Click
    Dim question As String = edtQuestion.Text
    If question.Trim <> "" Then
        lblAnswer.Text = "AI回應中…"
        ' 呼叫AI流程（以下為簡化說明）
        CallSubDelayed2(Me, "CallAI", question)
    Else
        lblAnswer.Text = "請輸入您的問題！"
    End If
End Sub

Sub CallAI(question As String)
    ' 模擬API回覆過程
    Dim reply As String = "這是AI對「" & question & "」的回覆"
    lblAnswer.Text = reply
    lstHistory.AddSingleLine("Q: " & question & " A: " & reply)
End Sub

【設計註】元件於Designer配置，命名後於程式引用。lstHistory呈現問答記錄，imgLogo顯示App商標，btnAsk送出AI查詢。可依專案需求擴充API呼叫、錯誤處理、動態UI反饋等細節。