iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 21

Flutter Developer Learning SwiftUI. @State var lesson21 = "列表(下)"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

List三部曲完結篇了

1. 下拉刷新+搜尋



下拉刷新的話很單純,請用.refreshable(),一句話講完
搜尋的話有個前提是必須搭配NavigationView
但如果是這頁自己加了的話線會壞掉(左邊的inset太多了)

.searchable()的話,prompt是搜尋框內顯示的提示
placement是搜尋框的樣式,可以研究一下不同的效果
若提供suggestions這個ViewBuilder的話
就可以做成搜尋建議
.searchCompletion()就會顯示搜尋結果

2. 客製常見樣式

這小節會展示兩種樣式
第一種是row上面有個按鈕
點了做一些事情
而整個背景上點了通常會跳頁
就像App Store這樣

第二種是在垂直滾動的列表上
會需要特定的row可以水平滾動
而上面的卡片點了會跳頁
就像foodpanda這樣

2.1

這個樣式的起源是來自於
不推薦使用 List一文裡的

它的選取效果是一整個「cell」。比如說設計的要求是整個 cell 可以點按,同時裡面有比較小的按鈕。那不管按哪邊,都會有整個 cell 被選起來的效果。這絕對不是你想要的

這題的確是很常見的狀況,然後13又說

你一開始還是可以用 List 試試看(問題會出在哪,總是要自己試過嘛)

所以我就來試了XD


用了兩個.alert()來確認是不是點到不同的地方會有不同的反應


然後我是先用ZStack把加上.onTapGesture()的背景包起來
另外再疊上加上.onTapGesture()的Text
這樣做的確是不會有點擊的動畫
但是如果我們是希望點背景會切換頁面
使用NavigationLink就會有點擊效果了(跟使用Button一樣)

按下去就會出現淺灰,而且右邊又被硬塞了一個>
所以一定要用List又會遇到跳頁
可能就要找出如何不用NavigationLink跳頁的方法

2.2


這邊就很簡單了
快速用個ScrollView+HStack產生多個NavigationLink即可
好險這邊不會出現整個row顯示淺灰的狀況,只有那張小卡會有動畫
可能是因為多疊了一層HStack的關係?
總之這邊安全過關~

PS.

大家在打modifier時要小心一點
真的是小心一點XDD
如果少了modifier前的這一個點(.padding() 打成padding())
編譯編得過
但壞小子會來找你

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 16 - RecyclerView (這玩意可是跟UITableView差滿多的喔...)
Flutter版:
iOS Developer Learning Flutter. Lesson10 建立列表
iOS Developer Learning Flutter. Lesson11 又是列表(置頂與刷新)
iOS Developer Learning Flutter. Lesson12 還是~列表(輸入與折疊)
iOS Developer Learning Flutter. Lesson13 裁判~可以讓人列完又列這樣的嗎? (多選與側滑)


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson20 = "列表(中)"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson22 = "表格"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言