iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
Mobile Development

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

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

  • 分享至 

  • xImage
  •  

4.實作HomePage

  • 先import上次三個檔案
    https://ithelp.ithome.com.tw/upload/images/20230930/20163063NKXJzSnPqd.png
  • 宣告變數
    https://ithelp.ithome.com.tw/upload/images/20230930/20163063kNC4T2dEyJ.png
  • 添加設定,使狀態初始化時可以加載紀錄
    • 這裡先清空資料記錄,再從JSON檔案取得新的資料
    • setState():在異步操作完成後,使用setState來通知Flutter,狀態已改變要再重新構建介面。
      https://ithelp.ithome.com.tw/upload/images/20230930/201630637GzK4u8ds5.png
  • 回傳一個Scaffold作為畫面結構
    • 使用_buildBar(context)來構建導航列
    • backgroundColor:設置介面的背景顏色
    • body:設置Scaffold的主要介面內容,這裡是呼叫_buildList(context)來構建
    • resizeToAvoidBottomInset:false設置Scaffold不會自動調整底部的填充
      https://ithelp.ithome.com.tw/upload/images/20230930/20163063pnUtcSSEHH.png
  • 接著做兩個函式
    • AppBar:_buildBar(context)
      • elevation:0.1的陰影效果
      • backgroundColor、centerTitle、title:設定背景顏色、標題置中、標題內容
      • leading: new IconButton:在AppBar左側放置一個搜尋的按鈕(leading屬性用來設置左側區域)
        https://ithelp.ithome.com.tw/upload/images/20230930/20163063Fix6nISbL7.png
    • Body:_buildList(context)
      https://ithelp.ithome.com.tw/upload/images/20230930/201630630vYJ152e73.png

今天到這裡結束~這部分的程式碼還有點問題,明天會繼續做HomePage也把問題解決完!

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


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

尚未有邦友留言

立即登入留言