### 介紹與展示

* 介紹 Material 3 的新元件 Search Bar。
* 點擊 Search Bar 後會展開填滿整個畫面。
* 出現清除文字的圖示。
* 可輸入文字、搜尋、清除文字並收起 Search Bar。
* 搜尋後會新增一筆項目到下拉選單。

---

### 建立基本 Search Bar

* 使用 Scaffold 作為畫面容器。
* Search Bar 需要指定 query、onQueryChange、onSearch、active、onActiveChange 等必要參數。
* 使用 remember 記錄 query 和 active 的狀態。
* onQueryChange 更新輸入文字。
* onSearch 會將 active 設為 false 以關閉搜尋列。
* onActiveChange 控制搜尋列展開與否。

---

### 版面與樣式設定

* 使用 Modifier.fillMaxWidth() 讓 Search Bar 寬度填滿。
* 加入 placeholder 提示文字。
* 加入 leadingIcon 顯示搜尋圖示。
* 加入 trailingIcon 顯示關閉圖示，點擊後可清除文字或關閉搜尋列。
* 只有當 active 為 true 時才顯示 trailingIcon。

---

### 下拉內容設定

* 建立 items 狀態作為下拉資料來源，內容為字串列表。
* 在 content 區塊中使用 forEach 顯示每筆資料。
* 每筆資料包含歷史圖示與對應文字。
* 搜尋後會將輸入文字加入 items，並清空輸入欄位。

---

### 實用邏輯補充

* 清除圖示會根據當前文字狀態進行清除或關閉動作。
* 下拉內容僅為示範用途，實務上應從資料庫載入。
* 可進一步擴充功能，例如與後端同步搜尋紀錄。

### Terminology
* **Composable 函數**：Jetpack Compose 中用於定義 UI 元件的函數，具有 @Composable 標註。
* **Scaffold**：一個提供基本應用程式布局結構的 Compose 元件，如頂部欄、底部欄與內容區域。
* **SearchBar**：Material 3 中的新 UI 元件，提供可互動的搜尋欄功能。
* **MutableState**：一種可變的狀態容器，用於追蹤與觸發 UI 更新。
* **remember**：Compose 的 API，用來保存狀態並在 recomposition 中維持其值。
* **Query**：搜尋欄中輸入的文字內容，通常為一個字串。
* **Active**：布林值，表示搜尋欄目前是否處於展開狀態。
* **onSearch**：當使用者按下鍵盤上的搜尋鍵時觸發的 Lambda 函數。
* **onActiveChange**：處理搜尋欄展開與收起的狀態變更邏輯。
* **Modifier**：Compose 中用來修飾元件（如寬度、填充、點擊事件等）的物件。
* **Placeholder**：搜尋欄中預設顯示的提示文字。
* **Leading Icon**：搜尋欄左側顯示的圖示，通常用於表示搜尋功能。
* **Trailing Icon**：搜尋欄右側的圖示，可用於清除文字或關閉搜尋欄。
* **Shape**：決定元件外觀輪廓的參數，例如圓角形狀。
* **Colors**：搜尋欄中可自訂的色彩屬性。
* **Tonal Elevation**：搜尋欄的陰影層次，影響其浮動感。
* **WindowInsets**：管理應用畫面內邊距的屬性，用以處理系統欄位。
* **InteractionSource**：追蹤與元件互動（如點擊、聚焦）的來源物件。
* **Dropdown Content**：搜尋欄展開後顯示的建議或歷史內容清單。
* **TextFieldValue**：進階版本的輸入欄位狀態，包含游標位置等資料。
* **Icons.Default.Search**：預設搜尋圖示資源。
* **Icons.Default.Close**：預設關閉圖示資源。
* **ImageVector**：向量圖示物件，用於 Compose 中的 Icon 元件。
* **Icon**：Compose 中的圖示顯示元件。
* **Clickable Modifier**：可點擊修飾符，允許為元件添加點擊行為。
* **Text**：顯示純文字的 Compose 元件。
* **Padding**：設定元件內或外邊距。
* **Row**：水平排列的 Layout 容器。
* **ForEach**：用於遍歷集合並生成對應 UI 元件的函數。
* **MutableStateListOf**：支援響應式 UI 更新的可變列表。
* **KeyboardActions**：管理鍵盤操作行為的設定（如搜尋鍵）。
* **ImeAction**：鍵盤上的操作按鍵，如 Search、Done 等。
* **Soft Keyboard**：行動裝置中的虛擬鍵盤。
* **State Hoisting**：將狀態從子組件提升至父組件以利共用與控制。
* **Empty String**：一個內容為空的字串，常用作重置輸入。
* **List**：儲存一系列資料的容器，可用於展示清單資料。
* **Add Function**：將元素新增至集合中的方法。
* **Extended Icons**：擴展版的 Material Icons，可使用更多圖示。
* **History Icon**：代表歷史紀錄的圖示。
* **Recomposition**：當狀態改變時，Compose 自動重新執行 Composable 函數的過程。
* **State Management**：在 UI 中管理狀態更新與同步的技術。
* **Material Design 3**：Google 發表的新一代 UI 設計規範。
* **Jetpack Compose**：Android 的聲明式 UI 框架。
* **UI Components**：構成畫面界面元素的可組合元件。
* **Search Suggestions**：根據輸入文字顯示的相關建議內容。
* **Text Input**：允許使用者輸入文字的元件或行為。
* **Keyboard Dismissal**：操作完成後將虛擬鍵盤收起的行為。
* **Back Button Handling**：使用者按下返回鍵時觸發的行為控制邏輯。
* **Conditional UI Logic**：根據條件動態顯示或隱藏 UI 元件的做法。
* **Clear Functionality**：將輸入文字清除的功能。
* **UI State Restoration**：在配置改變後保留與恢復 UI 狀態的能力。
* **Interaction Feedback**：提供使用者操作時即時回饋的機制。
* **Functional Programming**：Compose 採用的宣告式與函數式程式設計風格。
* **UI Composition**：以組合方式建構畫面 UI 的概念。
* **Live Update**：資料變更時 UI 即時更新的能力。
* **MaterialTheme**：提供主題樣式設定的 Compose 物件。