iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
Mobile Development

用30天學習做出我的第一個Flutter App系列 第 17

Day17 [Flutter通訊錄實作]-聯絡人列表頁面(5)

  • 分享至 

  • xImage
  •  

5.加入搜尋功能
HomePage.dart繼續添加下面的程式碼來完成搜尋功能

  • 啟用文字編輯器的監聽器
    • 這裡新增一個監聽器來控制搜尋欄產生變化時,程式碼會根據搜尋欄是否為空來重設篩選後的記錄或更新搜索內容。
    • setState():用來重新構建部分或整個介面,可以建立新的元件、重新排列,或者進行任何其他需要觸發UI重繪的操作。
      https://ithelp.ithome.com.tw/upload/images/20231002/201630639R2GY7usHH.png
  • 重置列表的紀錄
    • 搜尋欄為空時就會呼叫此方法來重置列表為原本的聯絡人列表
      https://ithelp.ithome.com.tw/upload/images/20231002/20163063sv9ue8uxh8.png
  • 實作 _searchPressed() 方法
    • 這裡要實作的內容是:
      • 點擊搜尋按鈕後將AppBarTitle改為搜尋框、搜尋按鈕改為關閉按鈕
      • 點擊關閉按鈕,按鈕變回原本的搜尋按鈕,搜尋框變回原本的title
        https://ithelp.ithome.com.tw/upload/images/20231002/20163063FipD8LLZ64.png
  • 觸發 _searchPressed()
    • build() 方法調整AppBar裡的onPressed執行內容
      https://ithelp.ithome.com.tw/upload/images/20231002/20163063DSnNwwS2AP.png
  • 實作結果
    • 1.進入聯絡人表單頁面
    • 2.點擊左上角搜尋按鈕,會出現搜索框
    • 3.輸入搜索條件,原本的列表會變成符合搜尋條件的聯絡人列表
    • 4.按下關閉按鈕,會回到原本的聯絡人列表頁面
      https://ithelp.ithome.com.tw/upload/images/20231002/20163063xn0YeiX1Xz.png

搜尋功能到這裡結束!明天接著實作聯絡人的資料頁面!

參考資料:
https://www.appcoda.com.tw/flutter-basics/


上一篇
Day16 [Flutter通訊錄實作]-聯絡人列表頁面(4)
下一篇
Day18 [Flutter通訊錄實作]-聯絡人資料頁面(上)
系列文
用30天學習做出我的第一個Flutter App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言