SwiftUI學(xué)習(xí)100天(Day94 - 項目 18,第三部分)

原創(chuàng)鏈接:https://www.hackingwithswift.com/100/swiftui
以下內(nèi)容僅供學(xué)習(xí)參考:

你準備好結(jié)束我們的最終技術(shù)項目了嗎?我希望如此,因為你還有另一篇評論要完成,還有三個新的挑戰(zhàn)要接受。我現(xiàn)在警告你:所有挑戰(zhàn)都涉及GeometryReader
,因為它會迫使你清楚地思考每個視圖的幀的計算方式,以及如何使用它們來創(chuàng)建有趣的效果。
我知道GeometryReader
真的能讓你頭暈?zāi)垦?,但你要學(xué)會適應(yīng)的唯一方法——有效地使用它就是練習(xí)、練習(xí)、再練習(xí)。
我以前引用過 Amy Morin,但今天我想最后一次引用它。她說,“生活中最偉大的事情往往發(fā)生在我們的舒適區(qū)之外,懷疑自己走出舒適區(qū)的能力會讓你陷入困境?!?所以,讓今天成為你走出舒適區(qū)并隨心所欲跳舞GeometryReader
的一天吧!
今天你應(yīng)該完成項目 18 的總結(jié)章節(jié),完成它的回顧,然后完成它的所有三個挑戰(zhàn)。

布局和幾何:總結(jié)
我希望這個較小的技術(shù)項目在我們漫長的應(yīng)用程序項目之后證明是一個受歡迎的突破,但我更希望你真的開始對 SwiftUI 的布局系統(tǒng)如何工作有一個良好的心理模型。這個三步布局系統(tǒng)可能聽起來很簡單,但要完全理解它的后果需要時間。
至于GeometryReader
,這是你甚至無需考慮就可以完美解決的事情之一,這很好。但是,當你想要為你的設(shè)計添加一點活力時——當你想要在用戶與之交互時真正使某些東西栩栩如生——GeometryReader
是一種快速而靈活的修復(fù)方法,只需幾行代碼即可提供巨大的功能.
回顧你學(xué)到的東西
任何人都可以聽完教程,但要記住所教的內(nèi)容需要實際工作。我的工作是確保你從這些教程中獲得盡可能多的知識,因此我準備了一個簡短的評論來幫助你檢查你的學(xué)習(xí)情況。
單擊此處查看你在此項目中學(xué)到的知識:
https://www.hackingwithswift.com/review/ios-swiftui/layout-and-geometry
挑戰(zhàn)
最好的學(xué)習(xí)方法之一是盡可能多地編寫自己的代碼,因此這里有三個挑戰(zhàn)供你完成,以試驗?zāi)銓?span id="s0sssss00s" class="color-pink-02">GeometryReader
的了解
.
首先,回到ContentView
我們的旋轉(zhuǎn)顏色行示例:
完成后:
使?jié)L動視圖頂部附近的視圖淡出到 0 不透明度——我建議從頂部開始約 200 點。
使視圖根據(jù)其垂直位置調(diào)整比例,靠近底部的視圖較大,靠近頂部的視圖較小。我建議不要小于常規(guī)尺寸的 50%。
對于真正的挑戰(zhàn),讓視圖在你滾動時改變顏色。為了獲得最佳效果,你應(yīng)該使用初始化程序創(chuàng)建顏色
Color(hue:saturation:brightness:)
,為色調(diào)輸入不同的值。
其中每一個都需要你進行一些試驗和錯誤,才能找到行之有效的值。無論如何,你應(yīng)該使用max()
來處理縮放比例,以便視圖不會小于其大小的一半,并把min()
與色調(diào)一起使用,以便色調(diào)值不會超過 1.0。


