大家好，我叫尼克·曼寧（Nick Manning）
在我的業餘時間揮動應用程序，並且我還創建有關它的教程視頻
所以我是撲撲課程平靜的創造者
非常感謝免費的代碼營組織為這個視頻提供贊助，讓我們
開始了
大家好，我叫尼克·曼寧，這是我撲撲的課程，所以我
真的很高興為您提供這個，因為我已經花了大約六八個
幾個月的拍攝和內容創作，我將其歸結為本課程
而這樣做的目的是節省您學習顫動的時間，以便您看到
這是我的表演記錄，每當我要播放的視頻時，我都會瀏覽
顯示筆記，以便您可以自己閱讀並記下筆記
我的背景我從事軟件開發已有20年了，其中有5年
iOS工程師，所以跟著你們中的一些人可能不想跟著您
只想看那很好，但是您將需要一切
撲撲網站表示，任何一種主流操作系統都流行
系統最新版本的Flutter和iOS模擬器或Android模擬器，因此
確保您已安裝並進行了所有設置，因此如果您願意，
不知道如何設置您遇到問題可以訪問我的網站
或我擁有的YouTube頻道，以及有關如何設置的特定視頻
Windows和OS X的逐步操作，因此需要經驗水平，因此您
需要具有一種現有編程語言的經驗，並且
您已經編碼的東西，例如網站，網絡應用程序甚至手機
應用程序，您不需要，但是您過去所做的事情使您知道
一些基本的編程，你有一些基本的編程技能，所以讓我們
從這裡開始，如果您想再次去看其他視頻，請檢查顫動崩潰
課程通訊，但我們現在要開始第一課，即第一章
正在創建基本屏幕，請繼續關注
大家好，所以在本課中，我們將討論佈局和抖動
我們將使用名為column的小部件，它使我們進入哪個列
從上到下的佈局小部件，讓我向您展示我們將要成為的樣子
最終將其編碼為我們應用的位置詳細信息屏幕，稱為
Tourism Co應用程序和位置詳細信息屏幕顯示
很多事情，您可以說我們可以使用此列小部件，因為
事情是小部件，這裡是從上到下佈置的，所以還有另一個
稱為行和列的小部件可讓您從左到右佈局內容
這樣的例子，但是您幾乎大部分時間都將使用此列
小部件，因為移動應用程序上的很多內容都是列樣式
佈局，因此在此視頻中，我們將介紹實現三個文本部分
所以文本部分讓我們定義區域，例如，假設我們要顯示
摘要，然後這段文字就是文字部分的內容
讓我們開始編碼吧，所以上次我們有了這個，我們從這個主頁開始，
我們將其重命名為位置詳細信息，所以我們真的可以快點
為該目錄位置詳細信息命名，因為這是
我們將要使用的代碼順序組織，所以我們有許多屏幕和
每個目錄是屏幕的名稱，然後是文件的名稱
定義該屏幕的文件也是該名稱，所以我們定義它，我是
現在要停止我的應用程序並重新啟動它，因為我在
更改文件名，因此有時我們不能使用熱重裝，因此
開始讓我們瀏覽一下列，所以我要渲染三個文本部分，但是現在
我不會只顯示文字，而是要顯示彩色框
框將向我們展示該內容如何成為
每個內容，所以我們定義彩盒的一種方法是使用小部件
在稱為容器的顫動中，所以容器有點像
顫抖它是HTML中的div只是您具有靈活性的邊界區域
您可以定義不同的參數之一是顏色，所以我可以
只是說容器和一些顏色，我可以使用一個叫做
裝飾，所以有不同類型的裝飾一個是盒子裝飾
只是一種定義框的通用方法，我可以使用
顏色參數，所以我要說顏色，我要說顏色點
紅色，因此在飛鏢中表示紅色意味著紅色是靜態成員，這意味著您
不需要實例化顏色類來引用它，所以這就是為什麼
有類名點，然後在這裡的值，所以最後容器將採取
孩子，所以我們要說孩子的文字，然後再說什麼，然後我們要保存
它，而我們沒有做的一件事就是定義我們的列忘記這樣做
有一個名為children的參數，children是一個ER，它是一個列表，不是
一個小部件，所以它是一個列表，因為您可以在其中包含多個項目
您的列表，所以我們要在這裡定義三個容器，所以我要復制
並將其粘貼並變成紅色，將具有綠色和
我們要有藍色背景現在這裡什麼都沒有發生
因為我們要在這裡定義一些參數，所以我可以定義一些文本
很好，我會很快地做，但是你知道我的意思是看屏幕
並沒有真正發生什麼有趣的事情，只是定義這些
小小的盒子，你甚至看不到文字，所以我想做什麼
被定義為主軸對準和主軸對準是什麼
這樣做是為了讓我們控制每個孩子在屏幕上的垂直間距
或它的佈局方式以及當我垂直說專欄時
它是垂直的，所以主軸是通用的，所以我要走一步
返回，所以主軸是您所使用的小部件的主軸
使用，因此，如果您使用的是圓柱，主軸將是
從上到下的屏幕，如果您使用的是行小部件，主軸將
是從左到右的水平線，所以主軸說的是
鬆散定義，這取決於您使用的小部件，因此主要
軸對齊控制內容從上到下的佈局方式
我平均分配了以下選項，所以讓我們嘗試一下
前面，您會看到每個框在屏幕上均勻分佈
簡單，我也可以說結束，所以如果我說結束，每個項目都會被渲染
從我專欄的最底部開始，專欄佔據了整個屏幕
我現在不需要介紹其他選項，但最常見的是
是開始，所以我們要堅持第二列或行參數
我們不會在本視頻中覆蓋一行，但這也是row的參數
是橫軸對齊，橫軸對齊是精確的
與主軸相反，這是一種虛擬水平線
在屏幕上，因此如果主軸從上到下，交叉軸
從左到右在屏幕上，讓我告訴您這裡有哪些選項
所以我說了訪問對齊基準中心並開始
拉伸，所以我們不打算涵蓋所有這些內容，而是最常見的內容之一
是拉伸的，所以要確保我列的每個項目都從左側拉伸
在右邊，所以我們保存一下，現在我將向您展示每一項都是從
從左到右，很酷，這樣，這段代碼看起來很難看，但至少我們
有一些容器可以存儲文本，所以一旦我們繼續
實施此屏幕，我們將有一個不錯的邊界區域，
內容將從上到下很好地流動，並且也將被拉伸，
讓我們整理一下本視頻最後一步的代碼，因為這些是
可重用的一段代碼，我們將其放入小部件中，因此
我將像所有人一樣使用此文件的模板，將類導入此處
構建方法，我將其複制，然後創建一個名為text的新文件
部分，因此我們在位置詳細信息中在此處定義文件的原因
屏幕是因為我們不打算重複使用該小部件，而是要定義
應用程序中其他任何位置，因此我們可以將其保留在此屏幕的本地
粘貼它，我們為無狀態小部件提供了一個不錯的模板
要構建定義文本部分的文件，我們將其命名為
然後在位置詳細信息屏幕中，我可以復製或剪切我們想要的內容
表演，我要說集裝箱，我要說返回這裡，現在我們可以
只需更新一下，這樣我們就可以說文本部分，我們可以定義
我們說其中的三個，稍後將根據類型進行動態調整
的文本部分，但現在我們只定義一個有限列表，
我們要說導入文本部分很酷，所以這定義了三個紅色框
非常無用，所以我們現在想做的是自定義
即使我們不會在最終屏幕中使用背景色
背景顏色屬性我只想向您展示如何定義參數
所以如何參數化無狀態小部件或實際上任何小部件，如果我們
首先要傳遞顏色我定義了一個私有成員私有含義
它應該在此小部件之外訪問，這只是
小部件應該知道並且要做的是，我說的成員類型是
顏色，成員名稱下劃線
因為下劃線表示它將是私有的，所以我要說
顏色並對其進行自定義，我將創建一個自定義構造函數，以便
構造函數讓我可以自定義實例化此類的方式，所以我要說
文字部分，因為這是類的名稱，這就是您定義
構造函數，我可以做的是，有兩種類型的參數
對於構造函數，在dart中有一個可選參數，並且有
命名參數，所以可選名稱，位置抱歉，所以我們將找到
保持簡單的位置參數意味著如果我在這裡說顏色，你知道我們
基本上所有我們將如何使用它都是在位置細節中，我只想說
顏色為紅色，綠色和藍色，以及基於
你知道這是第一個參數，它知道它將與
這個參數很簡單，然後我可以說這個點下劃線的顏色等於顏色
所以這意味著在JavaScript中有點像同一件事，這意味著
它指的是此類的實例，所以我要說這個
下劃線的顏色，它將為我提供該參數的值
將要對此簽名，所以在dart中有一個快捷方式
位置參數，而我不必在這裡定義方法主體
說這個點強調顏色，這是對位置參數的作用
它會採用該價值，並且會自動使
分配給成員此值，所以無論我作為第一個傳入
這裡的參數將立即簽名為該點色，因此
很酷，所以最後我們要在這裡引用我們的電話號碼，以便進行定制
我們要點擊保存，讓我們看看這裡發生了什麼
很酷，它還能滿足我們的其他需求
是的，這是對的，我的意思是你最後要做的就是說
這個私人成員是最終的，而最終的意思是一旦您說了
它你不能更改它，這真的很好，因為它使任何人都可以閱讀
代碼知道他們不應該更改它們，因為編譯器會
給您一個錯誤，分配完成後我們無需更改它
做，所以我只在這裡說最終的，這就像一個最佳實踐，就是這樣
稍後我們將添加一些真實文本，我們將為其設置樣式，我們將看到
現在佈局是如何定義文本約束的，但是現在
這很簡單，希望您對主軸對準十字有個好主意
軸對齊，如果您願意，可以將一些額外的工作更改為一行
嘗試一下，或嘗試一下此處提供的其他選項，讓我們
繼續，大家好，在本視頻中，我們將介紹如何添加
圖片到您的應用，這很簡單，有兩種主要方法
一種是使用圖片資源或圖片的網址，因此在本視頻中，我們將
首先將實際圖像資產（例如JPEG文件之類的文件）導入到我們的應用中，
我們將其包含在我們的pub spec yamo文件中，然後我們將
稍後實施它，我們將從URL中提取圖像，因此應該
非常簡單，但我們將介紹一些您可能還不知道的事情
例如約束條件以及如何佈局圖像，因此在上一期視頻中，
佈局讓我們只涵蓋我們正在審查的內容
並在整個視頻系列中實施，因此在此詳細信息頁面中
頂部的橫幅圖片和一些文本部分，所以我們要做的是
為文本會議奠定了基礎，我們只顯示了幾行
我們將在下一個視頻中使用文字和所有
現在格式化，讓我們在頂部添加圖片
並保持簡單，以便添加圖像，我們將基本上
通過該視頻的博客文章，因此，如果您要查看筆記，我會
在我們前進的過程中顯示筆記，以便您閱讀我們將要創建的筆記
一個名為資產圖片的新目錄，因此資產就像字體文件一樣
映像任何此類內容，它們都將放在一個目錄中
這就是我們要組織事物的方式，我們將使用JPEG和
是的，這樣就可以繼續進行，如果您想查看該分支
代碼，或者您可以自己進行第二步的編碼，所以我要做的就是關閉
在這邊，我已經有一張要復制的圖像，而我
如果您簽出代碼的第3步，則將要復制，從第3步開始的任何操作
這張圖片，所以我要在這裡複製它，而在屏幕外，您不是
將要看到它，但是我要將其複製到以下目錄，因此在我的代碼中
這裡有我的主根目錄，所以我要點擊頂部的這個按鈕
新文件夾，我將在項目的根目錄中創建一個新文件夾，名為
資產糟糕，讓我搬到這裡，以便資產將與Android並駕齊驅
目錄放在iOS目錄中，然後我將創建一個名為
圖片，我們稍後還會有其他文件夾，然後在視頻中關閉
我要在另一個屏幕上，我只是複制實際的實際圖像
文件，因此我可以從我在
理光指向倉庫的鏈接在博客文章中，位於步驟3中，因此
我已經復制了它，讓我向您展示它已被複製的事實，因此
這是一個旅遊應用程序，它將在日本的所有地點
決定選擇那輛，所以這是日本的一個地點
是圖像文件，所以稍後我們將從服務器加載它，現在我有了
我在那裡的圖片我不能馬上使用它，我必須走進我的酒吧
spec EML文件，讓我在這裡隱藏代碼，因此pub這樣的kml文件就像
項目的配置位於項目的根目錄中，您可以看到
那裡的文件名，您將列出要使用的軟件包
而所有這些我們還沒有添加任何軟件包，但是我們將在
另一個視頻，但是如果您在此處向下滾動，則會發現其中有一些
您可以啟用的示例配置，以便在dart中註釋掉其中的內容
他們在這裡用這個英鎊符號對這個數字符號，所以如果你只是
註釋掉它，您實際上就可以使用該配置，因此重要的是
部分是正確配置此配置，以便可以正常工作
否則，如果格式混亂，則可能無法正常工作，因此我們要做的是
據說它在說明中說到向您的應用程序添加資產添加一個
資產部分，因此我們必須在此行並且必須縮進
正確的，所以這是父母的撲打，然後資產在這裡，所以
縮進在這裡縮進，以致您無法執行此操作必須像
這，然後我們將不包括特定的圖像，我們將僅包括
整個目錄，所以我們要說出我們正在使用的所有資產
要說出實際圖像目錄的路徑是什麼
資產/圖片，然後確保以這種方式在末尾添加斜杠
flutter知道您可以在其中包含所有圖像，因此看起來
這是博客文章，您可以看到我們想要的註釋
像這樣另一個陷阱是你要確保
這也是縮進的，所以這裡的實際指令是縮進的
正確地保存，然後我們將其實現
所以讓我們看看我們在這裡有代碼，所以最後一次我們有一個位置
詳細信息屏幕，因此該位置詳細信息屏幕只有三個文本部分
我們將在下一個視頻中填寫，但我們要做的就是添加
屏幕頂部的實際圖像橫幅，因此它將成為我們的
我們專欄的子項，所以讓我們添加一下，現在讓我看看我們想做什麼
在這裡，因為我們希望這是它自己的小部件，所以我們將創建一個新的
小部件，就像我們創建文本部分小部件一樣，所以我要
稱這個新的小部件圖像橫幅，所以這是我們要創建的圖像
在短短一秒鐘內，甚至在我們實施之前，
只是編碼我們要如何自定義它，然後我們要傳遞什麼
進入此小部件的實例化，基本上只是文件名，因此
那就是我們要做的，要說包括圖像的路徑，所以
我們要說的是資產斜杠圖片斜杠，然後是文件名
有點奇怪，因為它當然是日語，所以如果您不說日語
對您來說看起來很奇怪，但這是文件名，
當我們顯示文本對應的文本時，它將成為我們位置的名稱
帶有該圖像，請注意，稍後我們將把這個應用程序更改為
動態的，所以我們不會對圖像進行硬編碼，而是要從網絡上提取圖像
服務API現在，我們只是要對其進行硬編碼
工作，所以接下來我們將包括我們尚未實現的小部件
然而，為了簡潔起見，我只是在這裡這樣做，所以我要說圖像下劃線
標語，這將是我們要創建的文件的名稱，請記住
在飛鏢中，如果您不知道導入應該是字母順序的
點菜，所以我要確保這是在此之前，並用紅色下劃線
因為我們還沒有創建它，所以讓我們現在開始創建它
放入我們的位置詳細信息文件夾中，因為此小部件僅
將由位置詳細信息使用，我們不會在其他任何地方使用它
如果它是在應用程序中共享的，則它是位置詳細信息本地的小部件
我們會將其放在單獨的位置，因此我們將其命名為
小部件圖片的名稱下劃線，並確保其全部為小寫
然後，由於這是一個無狀態的小部件，因此我們將實現它
就像我們在上一個視頻中所做的文本部分小部件一樣，所以我只是
要將這些代碼作為模板複製到此處，並註意Visual Studio
代碼還為您提供了一些選擇，並且擴展了使用方法
快速自動生成無狀態窗口小部件的熱鍵，但這不是
我們將不介紹的是更高級的內容
因此，我們將其命名為圖像橫幅，這是我們的小部件的名稱，
我們不想自定義顏色，但是我們要
能夠自定義資產的路徑，因此我們將擁有一個私有的
成員，這將是一個稱為資產路徑的字符串，因此它是私有的
再次因為這裡有下劃線，我們將通過資產路徑
這將是我們構造函數的位置參數，因此
表示當該人要使用此小部件的第一個參數時，
提供給構造函數的將是資產路徑，如果您沒有
當我們使用此位置參數並且使用
這個點，然後是我們自動分配的私人成員的名稱
如果您上次沒有看到它，那麼價值就非常之快
這樣的事情將是很長的路要走，所以這有
過去的資產路徑，所以這是很長的路要走，但是我們無法工作
這樣更好地做到這一點，所以讓我們實現我們的
現在是圖像橫幅，所以我們要做的是使用顫振進行顯示
小部件圖像小部件，但是我們要將其包裝在容器中
我們可以做的就是提供一些其他選項，例如填充或高度
以及所有這些，因此您需要將圖像包裝在一個容器或一些容器中
像這樣的其他小部件，讓我們開始吧，所以如果
你看截圖，圖像會有一定的高度，所以
我們將要一直將圖像擴展到最大程度
容器，但我們仍希望將圖像的容器限制為
一個特定的高度，為此，我們將使用一種稱為
約束，這是容器小部件上的一個參數，就像
你知道的裝飾還有一個叫做你知道的盒子
裝飾，但也有盒子約束和什麼盒子約束
這樣做是為了讓我們提供所有其他選項來顯示內容
該容器受到限制，因此最常用的名稱構造方法
被稱為擴展，它的作用是讓我擴展所有內容
容器中的內容，只要高度保持在200像素以內
指定顫動或飛鏢的高度，我們將使用雙精度和雙精度
是一種特定的數據類型，您可以在這裡看到它基本上就是一個
小數點就是您所需要知道的全部，所以如果您可以說200
這個，但是有時候原始的工作室代碼會給你一個警告，你不會
也這樣做，但是使用小數點，例如正確的小數點，即使它是點
零可能更好，這是約束，所以我們將
看看它是如何工作的，但是約束條件將擴展所有
直到高度為200的內容，我們都會進行裝飾，
要給它裝飾一個我們已經介紹過的背景色
在另一個視頻中，我們在這裡只說灰色
我們之所以要指定背景顏色的容器，是因為
稍後，當我們從URL加載為時，如果該URL無法加載圖像，
仍然想顯示某種佔位符，而不僅僅是空白，所以
那隻是我決定讓你不必做的決定，所以現在的孩子是
將成為圖像小部件，所以我們只說圖像並使用圖像小部件
我們還將使用命名構造函數，並記住一個命名
構造函數就像小部件的名稱，然後是點號，然後是
該構造函數，因此您可以看到這裡有不同的命名方法
使用不同名稱的構造函數的用法，您可以使用其中之一
我們將要使用的資產還有文件內存和網絡，因此我們將
以後使用網絡讓我們現在使用資產，基本上是在獲取任何資產
您已在發布規範中指定了駱駝文件，因此我們現在可以將其提供給
資產路徑的名稱，所以我要說一下資產路徑以及我們要做的最後一件事
想要在本視頻中進行報導，除非主要是圖像要如何
根據屏幕尺寸或其所在的容器進行擴展並運行
就像HTML或CSS一樣，您可以指定其擴展方式以及所有方式
你在顫動中做到這一點是我們使用了這個Fitz參數，並且我們使用了這種
值稱為盒裝蓋，所以盒裝像盒裝盒一樣可以約束
盒裝為您提供了其他類似的選擇，因此適合隱藏式翻蓋
填寫包含，您可以在空閒時間使用這些內容，然後單擊它們並閱讀
有關它們的信息，文檔將說明如何使用
這些，但是在本視頻中，我們將僅使用封面，封面是什麼
在其所在的容器中盡可能多地填充圖像
很酷，它們在CSS中也有類似的東西，所以我們保存一下
語法錯誤，因此我們將確保在此處完成圖像資產
然後容器完成，讓我們看看還有什麼其他我們不滿意的地方
這確保已完成，還有什麼我需要在這裡使用分號
這是分號，所以我要重新啟動它，然後轉到圖像
加載，恰好是200像素高，現在我們可以開始閱讀文字了
我們的應用程序，所以這是這裡的教程，如果您想通讀的話
博客文章中包含所有代碼，您可以免費閱讀
是的，就是這樣，謝謝收看
大家好，在本視頻中，我們將介紹如何使用自定義
字體和顫動，我們將在這裡建立屏幕
我們已經在頂部添加了圖片，但是我們將開始添加文本
部分，因此您在此處看到的文字部分將顯示
總結，它將有一個標題，我沒有一個身體，所以我們要實現
小部件，然後我們最後將覆蓋我們的文本主題設置和內容整理
文字流式處理可讓您在一處定義所有樣式，以適應不同的需求
應用程序中元素的類型，然後這種方式代碼很乾淨，因為
它知道要提取的樣式，因此，如果您要
跟隨我在這裡有博客文章並獲取我們正在使用的字體文件
要使用這些字體資產，只需檢查步驟/零步驟即可
代碼存儲庫的分支，鏈接位於博客文章中，因此讓我們
入門，我們要先實施，我們不會完全按照步驟操作
按照博客文章順序中的博客文章步驟，我們將實施
首先是實際的文本部分，因為然後我可以應用字體，它將看起來
更好，它會更容易理解，所以我們要做的第一件事是
實現此文本部分的更多功能，因為現在它非常
捏造它只是表明我們想要做的就是刪除
這種顏色並能夠顯示標題和正文，所以現在就實現它
所以我們要實現兩個私有成員而不是顏色，一個是
標題，其中一個是body，我們要更新構造函數，所以這個點
身體，所以無論您傳遞的是位置參數，
分配給這些成員，然後讓我們基本上定義我們想要小部件的方式
進行結構化，以便每個小部件都可以具有自己的佈局，因此在該位置
詳細信息屏幕中，我們確實使用了稱為“列”的內容
在版式視頻中，但每個文本部分都會有自己的列，因為
內容以列格式從上到下佈局，因此
摘要，然後這段文字，讓我們在這裡代替容器
實現一個列，它將是它自己的列，主軸對齊將進行
首先意味著每個孩子都要從上到下佈置
順序，沒有任何填充交叉軸對齊將被拉伸，所以我想要
它可以延伸到容器的整個寬度，我們要做的是
刪除裝飾，我們不需要那個，對於孩子，我要一些
這裡的文字很好，我們有兩個州孩子，因為這將是一個
列，這將是項目列表，在這裡我們將擁有標題和
然後另一個是身體然後我們要結束專欄
沒有人在這裡做過，我們的孩子在這裡命中，然後我們
出現錯誤，因為我們必須更新位置信息
屏幕使用此功能，因此我們已經在此處導入了文本部分，我們不需要
為此，現在我們要說的是，我們將在此處對代碼和值進行硬編碼，因此
我們要說一些總結，然後再總結
很棒的事情，所以稍後我們將使所有這些文本動態化
從Web服務器API中提取某處在Web服務器上運行的API，
我們不會對諸如圖像名稱之類的東西進行硬編碼
很酷，它看起來很無聊，因為它沒有格式
因此，讓我們介紹一下，我們要做的下一件第一件事是在每個控件中添加填充
小部件，以便在此處為文本的每個文本位添加填充
容器小部件中的每個文本小部件容器小部件可讓我們定義
文本不是要向容器中添加填充，因為我們想要
控制不同的填充方案，所以我們要控制左側的填充
以及右側和頂部和底部，每個都會有所不同
我們要說的是Const，它是集合中的恆定邊，然後是LT
RB，這是用於集合中邊緣的特殊命名構造函數，可讓您細化
定義所有填充，因為每個this文本部分小部件都會
為了簡單起見，定義相同的左右填充
這裡是一個常數，這將是一個靜態常數，
我將繼續說明為什麼它必須在一秒鐘內保持靜態，但是我們要打電話給
它是水平填充，為了簡潔起見，因為我用了很多
說H墊，人們通常會弄清楚這是什麼原因
靜態的是因為因為我在這裡使用Const，所以它必須是靜態的
我看不到我是否在這裡刪除它，我無法將常量定義為
這裡的類成員，並且必須是靜態的，這只是飛鏢的規則，因此
對於左側和右側的填充，它的頂部將具有該值
底部，我將使用自定義值，因此我將使用32和4
確實不需要指定小數點，但是
我只是喜歡，因為這是雙重的，而且更加一致
所以我們在這裡定義填充，我要結束一個文本，然後在
容器，然後我要添加讓我添加我的孩子，然後我要添加
其他容器，只是因為有不同的填充
它只是基於應用程序設計的事實
不同類型的填充，這樣填充將讓我看看我的筆記
它將是十，並使用與水平填充相同的值在這裡保存
太酷了，現在我們有了很好的填充功能，我將添加更多內容
在這裡輸入文字，以便您可以在某種程度上看起來更逼真
下一個視頻，我們將在此處添加真實文本，所以讓我將其粘貼到很酷的地方
所以這看起來真的很醜陋，但是它告訴你
會很好地流動，填充物看起來還可以
好吧，讓我們先介紹一下應用程序的樣式，再通過樣式
我們將要實現的使用自定義字體，因此我們無法實現
樣式，直到添加字體文件，它才會失敗，讓我們添加一個自定義
字體，以便獲取我們需要的自定義字體文件，讓我向您展示
該字體看起來非常漂亮的屏幕截圖，它是該字體
蒙特塞拉特，我要檢查代碼分支的步驟，然後
只是要復制已經擁有的資產，我將在屏幕外進行
在這裡，因為它更容易，我們要做的是資產
目錄中我們將有一個名為fonts的孩子，因此它將是一個
圖片目錄的兄弟姐妹，然後我將其粘貼到此處
屏幕外和繁榮就可以了，所以添加了字體，所以我下載了每個字體文件
這些來自google字體的字體文件每個字體文件都有一個特殊的名稱，例如姓氏以及
我們要做的是在我們的酒館Becky mo文件中，因為您還記得
公開mo文件，使您可以定義將要覆蓋的軟件包
我們尚未使用自定義軟件包的內容，它使您可以定義圖像的位置
資產就是這裡的資產這樣的圖像，但是對於這個視頻，我已經實現了
已經必須輸入自己的內容或從中復制
示例代碼，我們可以定義一個名為fonts的部分，並且必須將其縮進
正確地做一個壓痕，因為它位於顫動之下
部分非常重要，我們將其命名為蒙特塞拉特
您在此處定義的名字是當您
定義樣式，以便為每個字體文件指定要使用的粗細
對於這個文件，它將是300，有點像常規的斜線
常規重量，然後600是一個大膽的重量，所以我們要有兩個
不同的權重，因此請確保您保存該字符，並且縮進正確無誤
就像每個部分都使用兩個空格，這就是Moe的格式
EML正在定義縮進，所以我們如何使用這些字體，但我們可以做一件事
要做的是在我們的文本部分中，我們可以在每個文本小部件中定義只是為了
我們可以說一些風格，然後我們可以
定義文本樣式，然後我們可以為該樣式定義各種參數
但是對於只是為了更簡潔的代碼，我們不需要執行這種冗長的方法
做事情，因為這將變得非常重複，我們要做的是
在整個應用程序中找到一種樣式，它也可以像CSS一樣工作
並在整個應用中定義樣式，因為我們使用的是材質應用
小部件材質應用小部件為我們提供了這些快捷方式，而當我們
在這裡看看我的筆記我們可以在這裡做的一件事就是定義一個叫做
主題，這就是我們如何在顫抖中使用主題，所以主題是一般性的
而且主題類型不同，所以我們要安全
然後主題數據和主題數據讓我們定義各種小部件的方式
在應用程序中設置樣式，因此我們要定義的第一件事是應用程序欄
主題，因此應用欄是導航的材料設計術語
頂部的導航欄，因此對於iOS用戶，它被稱為導航欄
欄主題，您可以完全實例化一個應用欄主題類，以便該應用欄
主題類將為您提供某些參數，其中之一是基本文本
頂部導航欄的主題，因此讓我們定義一個文本團隊和文本
我們在這裡實例化的主題，對於該短信的標題，
您可以使用多種選項來設置文本主題
您的空閒時間，但這些是不同的，這些基本上都是
一般發短信的主要選擇，我不會過多地關注我們，但對於
為了簡潔起見，我將找到我想使用的文字主題
而不是將其硬編碼到我的文件中，我將定義文本
主題放在一個單獨的文件中，因此組織得很好，但現在我只想
輸入我要實現的內容，這將是應用欄文字樣式
這將是我即將定義為自定義事物的東西
現在我要實施它，以便正確地組織您的風格
我個人通常要做的是創建一個稱為樣式藝術的文件
飛鏢將定義我的應用程序中的所有樣式，我要做的是
導入材料，我將在頂部定義一些常量，因為我
只需將其粘貼在這裡，這將使我保留樣式文件
非常簡潔明了，所以我要定義特定的不同類別的文本
大小，然後是我要使用的字體名稱，這是核心
我在發布規範EML文件中定義的姓氏，因此我要將其粘貼到此處
這將是我的應用程序欄樣式，它將再次是文本
樣式，並且可以再次使用，就像CSS一樣，因此很容易遵循
有一個字體家族，所以指的是我的字體名稱
蒙特塞拉特（Montserrat）權重，因此對於顫動中的字體權重，您可以定義其他字體
權重，所以它們都從100變為900，因為我定義了一個
我的發布規範電子郵件文件中有300，請參見此處，我可以使用該重量，所以這就是字體
重量，然後是中等的字體大小，然後是20，然後是顏色
只是會變成白色，因為我有一個彩色的導航欄
在這裡，所以我要保存它，然後將其以我的應用深色樣式導入
黑暗，我要保存並冷卻，現在我們的導航欄已使用自定義字體設置了樣式
您會發現這裡有點輕巧，以後還會對其進行樣式設置
因為這不是我們想要使用的最終設計，但是會
稍後再繼續，所以讓我們結束我們的應用程序樣式，現在
我們有應用欄主題縮進看起來有些奇怪
這裡是因為自動格式化的方式，但對我來說，這樣做可以使您閱讀
更好，我們要在這裡定義的最後一個樣式是
基本上是文本部分，所以我將在這裡查看我的註釋，以便查看文本
我們要定義的主題有整個應用程序中的各種文本主題
我們可以在這裡定義，以便文本團隊可以針對各種不同
組件，所以只是為了散佈一些鬆散的名為title的東西
我可以告訴您如何使用它，但是基本上它適用於任何標題
您使用的名稱，因此我們將其稱為標題文本樣式，我們將在
第二個是因為與應用欄紡織品相同的樣式將來自我們
風格，然後我們要說身體1，所以身體
1只是我們稍後將在代碼中引用的另一個名稱，適用於任何
我們將其稱為body 1文本樣式的body文本主體，讓我們實現
現在在我們的樣式文件中，所以在我們的樣式飛鏢中，我將這些粘貼到
首先，我要粘貼標題文字樣式和圖塊紡織品
看起來會像同一件事，但是只會有黑色
這將是巨大的，下一個是身體1的紡織物，但是
它將具有不同的文本大小，因此正文文本大小為16，所以現在
我將其粘貼到其中，並在此處定義了所有樣式的通用樣式
現在，應用中的文字已更改，因此將使用
樣式，但其中某些元素將不被使用，因此
假設標題文字樣式不會使用
所以這還不會很大，所以要故意說嘿
對於這個標題，我們在這裡說摘要1我想使用標題文字樣式
不得不故意進入我的文本部分小部件，我們將不得不
更新，以便我們將如何更新，因為這裡我們要說的是
文本小部件樣式，然後我們將說主題使用的名稱構造函數
我們要通過我們的上下文，我們的上下文再次是​​我們通過的東西
在應用程序中周圍，這只是一種顫動的方式，可以知道某些呃
有關渲染樹，小部件樹和現在的某些上下文信息
我們可以引用此處定義的任何樣式，因此可以引用文本
因為我們定義了一個文本主題，所以我會去
回到這裡，所以在我們的主題數據小部件中，我們
定義了一條短信，所以現在我們可以使用它，所以我可以說
上下文文本主題的主題，現在我可以確切指定我的子集
文字主題，是因為我再次定義了標題文字主題，回到了應用程序
dart CI定義了一個標題文本主題，我現在可以使用它，所以我在這裡說標題
我要保存它，現在它正在使用實際的文本主題，我希望它是
我一直想要使用的確切文字大小，我將為我做同樣的事情
身體，所以我將其粘貼在這裡，我要說的基本上是一個
這不是我不必這樣做，因為它已經佔用了
之類的樣式，因為如果我定義一個文本主題，這只是普通文本
正文1該應用程序的所有常規文本將採用這種樣式，但
我仍在此處定義此樣式，並且顯式使用主體1，因為它是
這樣更明確，但您不必這樣做
是的，這就是您設置文本樣式和样式的方式，我認為可以將其包裝起來
是的，這堂課是對的，我們稍後將為您提供更多的風格，
在下一集中，我們將實際使用動態文本，因此我們不會很難
編碼任何東西，但是是的，所以感謝您的觀看
大家好，尼克，所以在這一集中，我們將討論三個
一件事是如何使用模型來表示數據和功能，以及
我們將更新代碼以使屏幕動態顯示，而不是硬編碼
那裡的數據，而且我們將涵蓋諸如通用的飛鏢概念
map函數的匿名函數和Cascades，所以如果您想遵循
在學習本課程時，我將遍歷此博客文章，而您
可以在flutter崩潰課程comm上找到博客文章，然後轉到
情節在這裡使用模型，如果您想要代碼在那裡的鏈接
博客文章就在這裡，您必須在這裡查看該分支
突出顯示它實際上具有我們將要實現的代碼，因此
讓我們談談and apps數據模型的重要性，因此數據模型是
對於任何類型的應用程序來說，都是非常通用的東西
可以是僅傳統應用程序軟件應用程序的網絡應用程序，也可以是
移動應用無關緊要，因此模型基本上是飛鏢中的榮耀類，因此
當我們有一個要編寫的應用程序時，該應用程序通常具有輸入和
輸出就像任何軟件程序一樣，因此數據的輸入將是
可能是我們從某個地方的API提取的一些數據，所以它可能是firebase API
或基於傳統HTTP的傳統Restful API，這就是我們的輸入
應用程序，因為數據正在進入我們的應用程序，但問題是我們需要何時
我們將這些數據帶入我們的應用程序中，我們需要以某種方式在內存中表示它，
該數據可能很複雜，可能具有不同類型的數據
字段類型，屬性以及該數據可能與每個字段相關
其他方式也不同，所以我們在這裡輸入旅遊Enco應用程序
數據將是可以顯示給用戶的位置列表，每個位置
位置可以列出該位置的事實，例如有趣
您想要顯示給用戶的東西，如果我們想在
我們的應用程序將創建兩個類，一個位置類和一個位置
事實課，我們將在它們之間建立聯繫，因此模型
也代表不同數據之間的關係，因此
模型或類的位置（如果您將有一個列表項，該成員是
列出將成為事實的飛鏢列表，因此存在一對多的關係
位置與位置事實之間的關係，因此所有這些數據
分類學以及我們將要在課堂上代表的所有東西，我們將
稱它們為模型，就像很多人使用的術語一樣
當我們從API獲取數據時，我們將編寫某些代碼
創建位置類的實例，以及何時我們要在我們的數據中使用該數據
應用程序，例如，我們加載了給定的屏幕，例如，我們加載了位置詳細信息屏幕，
如果我們將它們乾淨地分成幾部分，則可以輕鬆使用該數據
分開的模型文件，所以再次向下滾動到這裡，我們有了模型
我們將在本課中反复創建的位置和位置事實
這將是一對多的關係，所以更多的是來自數據庫
設計術語一對多等等，但這就像東西
您還應該知道，您不僅可以將其用於數據庫，還可以將其用於
您的模型在Flutter應用中如何相互關聯，這就是我們
要使用我們的模型，我在這裡向下滾動，這就是給定的方式
我們將如何使用模型的用例，以便我們的應用加載，然後
我們的應用程序中還沒有多個屏幕，我們將在
下一課，我們將加載一個位置詳細信息屏幕，
會說，嘿，只要給我像
位置標識符或ID，我們還將在本課中添加
位置的名稱，然後在導航欄中進行渲染，然後為每個
位置事實再次是位置位置之間的一對多關係
事實會在屏幕上呈現給定的文本部分，因此您現在可以看到
在我的模擬器中，我有三個只是硬編碼的文本部分，所以
我們要做的是更新代碼以基於
我們關聯的每個事實可能是一個事實，可能是五個
事實取決於我們要渲染的位置實例，那麼我們如何
添加我們的模型，以便基本上我將向您展示何時使用的最佳做法
您要在其中添加模型的地方添加模型，以及如何使用代碼註釋
最佳做法是什麼，以確保是否有人正在閱讀
易於閱讀的代碼，讓我們從我們正在編寫的代碼示例開始
代碼將在此博客文章中，所以我基本上要打開
在這裡打開我的代碼，我將在這裡進行探索，
將要創建一個稱為模型的目錄，因此基本上就代碼而言
Lib目錄中的組織最佳實踐將是一個兄弟姐妹
目錄兩個屏幕，我們要去的屏幕目錄
稱它為模型，然後我們將創建一個名為location的新文件
現在我們可以增加尺寸，只需實施位置模型
所以它將再次成為一個班級，每個班級和飛鏢都將成為標題
大小寫意味著每個單詞的首字母大寫都將大寫
在這裡要有三個字段我要在其中找到字符串
給定名稱，這將是圖像路徑，然後它將是
位置信息最終列表位置信息，我還沒有創建，所以它是
事實會出錯，然後我將更新構造函數，以便我
可以很容易地創建此模型，所以我們之前已經介紹過了
將在這裡使用快捷方式，如果我們使用此點名，則此點圖像路徑
這一點事實，我們可以讓構造函數自動分配
您傳遞給會員的價值觀，這樣我們就不必實際
像這樣的構造函數實現類，我們已經走了
以前的那些，所以我不會做得太多，然後我們要
導入我們尚未創建的文件，但位置偏暗，請確保
模型的名稱在單個情況下就像一個位置，因為它是給定的
位置，所以不要將其設為複數，並且也要使用文件名，所以我
將要創建一個稱為位置事實的文件名，而不是傳真或類似文件
它是位置事實中的一個單一事實，再次是其標題大小寫
看到我們想要的標題和文字，讓我將其粘貼
因為它比博客文章更快，所以這裡不是火箭科學，所以
位置傳真將有標題文本，就是這樣，所以沒有錯誤
在這裡很棒，是的，讓我們看看，讓我們談談
我們如何將業務邏輯添加到模型中，所以業務邏輯又是
只是一些代碼的榮耀術語，並且該代碼有一些規則
根據您的業務或您要實現的目標，因此我們
將實現這一目標以及一種實現業務的傳統方式
邏輯是，如果不是那麼大的應用程序，則可以將它們直接添加到模型中
不是很多人只是添加一個中小型應用程序
他們模型的業務邏輯和核心功能，所以讓我們
說我想獲得一個位置列表，我要添加一個獲取方法
這些位置，我要將該方法添加到location類中，這樣
幾乎是一種常見的方法，所以在這裡我要實現
我要粘貼到這裡，因為這裡有很多代碼，我
我建議您不要輸入它，因為它很乏味，您可以直接簽出
這裡的代碼讓我們看一下，所以這將是一個
靜態和靜態含義，您無需實例化位置即可調用
您可以說全部獲取的功能，所以這將是一個名為
獲取所有信息將獲取我們虛擬數據庫中的所有位置
現在進行了硬編碼，但在一些課程中，我們將從實際的
後端API，所以我們要說全部獲取，這不是現實的獲取
全部起作用，因為通常您會像分頁參數一樣添加
他們從1到10取任何東西，或者從10到20取數字，或者所有
這是一個非常簡單的示例，它將返回位置列表，因此
我們要調用的每個位置都是我們要傳遞名稱的構造函數
在這裡，這是圖像的路徑，所有這些，然後將是
一個列表，對於每個列表項，我們將留在其中
一個位置的事實，所以這將是如何到達那裡的總結，所以它是
現在真的很醜，但是一旦我們有了一個實際的Web服務API
它會全部消失，並請注意，目前我們正在使用這種
我們的構造函數的有序參數的存在
有很多參數，還有另一種方法，我們將
覆蓋另一課，但就目前而言，這就像最簡單的方法一樣，所以我們
讓我們的模型繼續進行，現在讓我們使代碼動態化，我們將
採取並使用此提取所有功能，我們將更新位置
詳細信息屏幕，所以我們導入位置信息類，我們將進行更新
以下我們將更新應用欄標題我們將更新該圖像
橫幅，然後我們將遍歷每個位置的每個事實
我們將加載並呈現給定的文本部分，以便我們能夠做到這一點
首先是一種簡單的方法，我們將在構建中加載所有這些位置
方法，所以我們要說位置點取全部，然後我們要分配一個
給定位置，因此對於給定列表位置，列表類型是
一種特殊的屬性，稱為first，就像這樣說
基本上，現在我們沒有多個位置要實施
下一課我們只是假設我們只有一個位置，因為我們
在下一課中，只需在此處加載位置詳細信息屏幕
在標識符中是一個位置詳細信息屏幕，然後按標識符加載
在我繼續之前的另一句話是，通常不想在
構建函數，因為可以調用任何小部件的構建函數
多次，所以我們不想這樣做，而只是想讓它工作
現在我們將在這裡進行操作，我將在以後的課程中解釋
這種理想的方式，所以現在我們可以訪問給定的位置，所以我
可以在這裡更新標題，我可以說位置名稱，因為位置
有一個名稱屬性，您可以在這裡看到這是名稱
屬性，然後我可以在圖片橫幅中說位置點圖片傳遞
那是這裡的另一個屬性，所以讓我們重新加載它，看起來就像
工作得很好，所以我們要分別做什麼
文字部分，所以基本上在飛鏢中有一個特殊的功能，稱為map
地圖的作用是轉換列表或數組以及名為list的藝術家
的東西到另一個列表，但另一種類型的數據，所以如果我有一個
假設字符串列表，我可以使用map將其轉換為實際列表
在我們的情況下，像小部件列表這樣的對像我們要做的是
將有一個位置事實的列表，這是一個數組，我將向您顯示
模型，它將是位置事實的此數據類型列表，然後再次
再次談到這一點，這就是我們所謂的泛型，因此我們在
最後幾節課，但我想在繼續之前快速快速地刷新
這將是位置事實的列表，因此泛型基本上是
定義給定類型以指定事物類型的能力，因此您
必須指定一些您可以說的字符串列表，您可以說一個
整數列表，在我們的情況下，我們將獲得位置事實的列表，因此
那就是泛型，無論如何，我們要說的是map函數
給定位置信息列表，我們將其轉換為的小部件列表
鍵入文本部分，這就是Matt將一種類型的列表轉換成的內容
進入另一種類型的列表，那麼我們該怎麼做呢？
我們要把所有這些東西拿走我們要把它剪下來，我們要
說一些小部件列表，然後我們將其添加到此處
之後，在我們繼續之前，讓我實現一個功能
返回實現我們的地圖功能的小部件列表
所以我們要做的是有一個小部件列表
函數將要返回，讓我快速地看一下代碼
我將其稱為文本部分，所以我剛剛帶來的博客文章
有了最終的實現方式，但我想在這裡從頭開始
這將需要一個位置，而該位置將
我們要說的是位置再次收到傳真，這是一個清單項目，我們要
說點圖，而數學則採用另一種所謂的匿名函數
單詞是另一個單詞，因為它是dart中的閉包，而閉包是
其他編程語言中非常普遍的東西，其語法是
有點奇怪的閉包或匿名函數是一個函數，但你
不要給它起一個名字，只是它是匿名的，所以沒有名字，所以F
是我們的功能，我們將在這裡實現我們的功能，因此
該函數，因為map的工作原理該函數將採用一個參數
參數是給定事實，因此dart中的匿名函數具有
它分為三部分，第一部分是參數的實際列表
就像其他函數一樣，這是參數列表，
可用參數的數量由此實際映射在此處定義，因此我們
知道如果我們單擊它，這是非常隱秘的
定義我們傳入的內容將只允許我們擁有一種參數，但是我
會發現這很複雜，無論如何它是參數列表，
然後這裡有一個箭頭，它被稱為火箭符號或類似符號
這就是說，我們要為我們的單行實現定義
函數，因此理論上我們可以做到這一點，我們可以使用花括號並實現我們的
函數在這裡，但是用這個箭頭確實可以讓我們定義它是否是
函數是一行，可以讓我們定義函數
作為一行代碼，所以我們可以說，以及我們在此處定義為
聲明它返回，所以我們可以，如果我們想返回，比如說fubar
可以做到這一點，所以我們要做的就是實現
返回一個文本部分，所以請記住我們在這裡有一個文本部分小部件，
這就是我們要實現的內容，因此文本部分
要有事實是什麼，有標題和文字的事實，所以事實標題實際上
再次發短信，就像我剛才所說的，只是要再講一次，因為你
會在撲撲地圖中使用這很多東西，將轉換一個列表
輸入另一種類型的列表，所以在這裡，我們將使用
遍歷事實列表中的每個事實，對於每個事實，我們將執行一個
以此表示的單個語句，該語句將返回什麼
將被推送到新列表中，因此它將返回一個文本部分，
我們將實現文本部分的實例化，
那麼它將返回它，所以這將返回一個可迭代的列表
在給定類型中如此可迭代的東西在dart中另一件事是
有點像父母祖父的那種
可以對其進行迭代是通用的，但我們不會那樣做
對我們有用，所以我們需要做的是獲取列表
所以對於可迭代我們只能說兩個列表，兩個列表將轉換
可以迭代到實際列表類型的東西，是的，就是這樣
返回此實現時，然後我們需要使用此列表
我們將在此處返回文本會話，因此我們不能只調用這樣的文本部分，
傳遞位置，因為我們要添加位置，因為
是一個列表，我們希望將其添加到我們想要注入的現有列表中
進入我們的列表，所以這已經是我們的列表了，我們想在這裡註入
基本上我們要做的是使用飛鏢傳播算子
在下一個版本的dart中會出現稱為Cascade的傳播，並且
這是不同的，但是Cascade是兩個點，而級聯的作用是
給定的項目，它使您可以針對它運行一個函數或
作業或其他操作，所以我要說Cascade運算符，然後
我們只是要說一點，所以我要在黑暗中有一個特殊的功能
完全被調用，它的作用取決於所有對象的
迭代到列表的末尾，所以如果我們在這裡有給定的列表，我們會說
完全沒有問題，然後我們將它傳遞給您一個可迭代的內容，因此文本
部分是可迭代的，這就是我們要做的，所以有很多事情要做
在那兒解壓縮，但是像這樣在dart 2.3中很常見
這很快就會出現，您將可以使用另一個稱為a的運算符
散佈運算符，它是三個點，在列表項上有點固定
那更容易，所以無論如何，讓我們重新加載屏幕，是的
那裡有文本，所以所有文本在這裡看起來都很漂亮，就是這樣
看看我們還要在這裡講什麼，所以如果您想了解級聯是什麼
我有鏈接到級聯是什麼，我有鏈接到地圖功能是什麼時候
我對此有註釋，但也有指向實際文檔的鏈接。
在dart網站上，所以這是它的鏈接，是的，就像您知道的，我會說
玩弄這些東西，總的來說，基本上我想這就是我們
削減這就是我們需要涵蓋的全部內容，因此我們的應用程序現在
動態適應我們定義的任何數據，因此在下一節中
下一課，我們將介紹更多高級功能並進行擴展
一個新的屏幕，感謝您的收看，所以在本集中，我們將
涵蓋了抖動的導航以及ListView小部件，
重要的小部件，因為大多數應用是由某種ListView組成的
東西可能是新聞源項目照片
無論如何，最後我們也將涵蓋手勢檢測器
我們將實現應用程序的第二個主要屏幕
Tourism Co應用程序，您將可以瀏覽位置列表和
點按一個即可進入我們已經在此處實現的詳細信息屏幕，因此
如果您想遵循該代碼，然後開始獲取，
我們將要實施本課程的代碼，您可以在以下位置查看回購
這篇關於flutter崩潰過程的博客文章
這被稱為導航和抖動，並且有一個用於此代碼的鏈接
在這裡上課，您必須檢查分支步驟斜線步驟零六
我們要做的第一件事是更新燈具數據，因此再次修復了您的數據
只是測試數據，但我們想顯示更多位置，因此我們可以顯示此列表
輕鬆查看小部件，我們還將向位置模型添加一個新字段
這是ID，而ID要做的是，它是一個唯一的標識符，它使我們
在我們的應用程序中傳遞，以便我們可以加載給定的詳細信息屏幕，因此如果我點擊
例如，我也會在後端撥打電話說
嘿，我獲取了位置2的所有數據，所以我們沒有與
後端，但是那是我們之前要實現的代碼
我們實際上是進行集成的目的只是為了連接起來，以便您可以查看
分支即可複制並粘貼此新位置數據（如果需要）
我現在要這樣做，所以讓我們打開我們的項目，這樣我們就可以打開
位置模型，現在我們只有一個位置實例，所以我們
要創建三個，然後在將其粘貼之前，我實際上
實現此ID成員，以便將int ID用作位置，它將是一個int
不同的應用程序使用不同形式的標識符，有時它們使用字符串
作為一個傻瓜，但在我們的情況下，我們將使用老式的int
所以我們不得不在這裡更新我們的控制器，我們的構造函數相當抱歉，然後
我只是要粘貼在這裡的東西，這會容易得多
所以繁榮就完成了，我們要確保我們的應用程序中有圖像
位置是指圖片，因此我們稍後將在本地使用圖片文件
從URL加載它，所以現在我沒有所有圖像，所以我要
必須從中獲取圖像並退出稱為“步長”步驟的分支
零六，我現在要在屏幕外複製它，所以我檢查了一下
屏幕外，我將其複制，然後將其粘貼到
資產目錄和圖像子目錄，所以我要粘貼它
它們會在此處顯示，因此請確保您在此處具有這些圖像，或者
否則它們不會顯示很好，所以讓我們回到我的博客文章中，如您所知
在每節課中，我都會關注我的博客文章，因此，如果您想查看表演說明
當我們為您增加尺寸時，您可以像我所說的那樣完成夾具數據
所以接下來我們要做的是實現一個新屏幕，即位置
列表屏幕，這將是一個無狀態的小部件，因為它不會
需要維持任何狀態，並且還要使用一個腳手架
正是這個便利小部件讓我們創建了
新屏幕，我們將在其中創建一個ListView和一個ListView
基本上只收錄項目清單，只是一堆
數據，它將呈現這些項目並自動滾動，讓您滾動
這些項目，如果你知道它是否溢出屏幕，所以這是
您在列表前面看到的樣板，我們將如何使用ListView
我們基本上會獲取我們所有的位置並將其映射給我們，
在上一課中介紹了地圖，因此，如果您不了解該信息，請查看並
對於每個位置，我們將顯示位置名稱句點，僅此而已
然後我們將為ListView返回一個列表，所以讓我們在這裡繼續
現在將實現它，我們可以在此基礎上繼續，因此我們可以添加圖像
或使其成為水龍頭標籤”或其他任何東西，讓我們實際實現這個好吧，讓我們
在這裡繼續，所以打開so，以便screens目錄顯示我們所有現有的
屏幕上現在每個屏幕都有一個文件夾
代碼組織，這就是我們要繼續組織代碼的方式
我要點擊新文件夾，我們將其稱為位置，因為它是
基本上是位置列表，並且要為您的屏幕命名
基本上將它們命名為盡可能簡單，所以您不想要它
想要命名位置列表的東西如果您願意的話，它太冗長了
只是太冗長，所以我將其稱為位置，因為這是
在主屏幕上，我將其命名為與目錄相同的名稱，這確實是
保持一致很重要，所以讓我們開始實現這一點，我要粘貼
在無狀態小部件以及我們的導入的樣板代碼中，因此我需要
導入應用程序飛鏢以及位置模型，以便在簡單屏幕上顯示
粘貼在我們想使用腳手架，所以我要
粘貼進去，因為我們已經檢查過了，然後再讓我增加
文字大小適合您，然後我將在此處隱藏左側面板，以便您可以看到
更好，所以腳手架可以吸收人體，讓我們繼續前進，
實現ListView，所以我們說ListView，所以有不同版本的
您現在可以使用的ListView我們將使用傳統的ListView
構造函數，我們稍後將使用一些名稱構造函數
但是我們會介紹這一點，因此，如果您已經習慣於列出視圖並且您在
以不同的方式實施它，就像跟隨並看到
我實現ListView的方法是因為實現它的主要方法是
children參數，而children參數採用以下列表的列表
無論您要渲染什麼，所以最後將是小部件列表
今天，現在我們要使其變得非常簡單，讓我們回去
在博客文章中的示例中，我們現在將實現一個列表
文本小部件，所以當我獲取位置信息時，我要說地圖和地圖
基本上是一個匿名函數，因此對於地圖中的每個項目
這是我要執行以下功能的位置
將要返回代表我ListView中每個項目的小部件，因此
我要返回一個文本小部件，而我要使用位置名稱作為
文本小部件，最後我將其轉換回列表，因為map
返回一個可迭代的類型，它更多的是您沒有的高級類型
現在真的需要知道，但是您只需要將其轉換回
列表，因為那是子代，這是小部件列表，所以我們必須
保存下來，讓我們看看我猜是這樣，讓我們看看是否已渲染，所以我有
我的模擬器在這裡打開，我們現在打開了詳細信息頁面，所以現在我們必須
更新應用程序飛鏢以在此處顯示此視圖
因此，讓我們轉到應用程序dart，在vs代碼中打開內容的快捷方式是command
P，或者如果您使用的是Windows或Linux，則為ctrl P，然後只需輸入名稱即可
的文件，所以這真的很有用，所以現在基本上沒有主屏幕
將會是位置詳細信息，例如
現在位置，讓我們更新我們的進口商品，我將更新此保存
它，現在讓我讓我在這裡做
用我的方式忍受，您現在可以看到代碼和屏幕，這很酷
是一個非常基本的ListView，看起來並不酷，只是顯示為一個
名稱，就是這樣，沒有什麼幻想，我們要添加圖像
稍後再為這裡的每個項目提供服務，我將向您展示，以便
像我們的應用程序的實際最終結果的模型，我已經向您展示了
在讓我在新窗口中為您打開它之前，因為它沒有讓我
給你看讓我們看看位置列表是的，這是
將成為我們的最終列表視圖，我們將實現ListView
每個項目只有一張圖片，它的底部有一個小部件，帶有
名稱位置的開放時間和一些字幕，所以
那就是我們要做的，所以我們不會渲染那些圖像
儘管現在如此好，但讓我們介紹如何進行交互
帶有實際的ListView項，因此我們將實現一個手勢檢測器
手勢檢測器是非常基本的東西，而且會抖動
小部件已經具有檢測輕拍的功能，可能是以下形式
按鈕或除手勢檢測器外的其他任何類型的父類型
幾乎可以用於任何小部件，因此我們可以用手勢包裝任何東西
檢測器並實際傳遞匿名方法，該方法可以執行
我們想要什麼，在這種情況下，我們要
導航到位置詳細信息屏幕，讓我們實現一個手勢檢測器
基本上實現手勢檢測器是它自己的小部件，因為它是
這只是一個小部件，讓我在這裡做一個自動換行，或者包裝好，
我要在這裡隱藏一個左欄，這是另一個小部件，因此我們可以包裝
帶有手勢檢測器和手勢檢測器的文本小部件，其中有一個子
將成為實際的東西，讓我們在那裡看到子文本，
然後在這裡加上括號並保存，它將自動格式化
而且它不會做任何事情，因為我們必須實現一種新的方法
參數在這裡，所以不只是提供一個孩子，還有另一個
您將提供的參數，該參數在水龍頭上調用，在水龍頭拍下調用
單擊它以查看如何實現點按是手勢點擊的一種
回調，如果您在手勢中鍵入Tap，則單擊，然後單擊
你會看到它只是一個函數，一個通用函數，所以你
可以根據您的需要進行點擊，以了解事情的實現方式，但是
現在就信任該過程，它將成為一個實際的功能
匿名函數，現在就實現它，因為它只是一個泛型
函數不帶任何參數，所以我們在這裡做括號
因為沒有任何參數列表，然後火箭這裡的箭頭
表示法，現在我們將實現點按和
因為它有點複雜，我們將把它的名字傳遞給它
函數，這樣我們就不會像
阻止它會變得太凌亂，所以我們要實現一個功能
調用位置水龍頭，因此非常重要地命名您的功能非常重要
明確地顯示，因此我們將特定位置作為我的不理想選擇
我的意見是給它起個名字，例如手柄水龍頭或手柄位置水龍頭
猜想手柄位置拍子很好，但是在位置選項卡上是
更加簡潔，它就像處理程序一樣明確，依此類推
我認為這是最好的術語，因此成為
在編寫代碼時對術語很有幫助，因為它可以確保
您的代碼很好，簡潔，所以現在就實現它吧
我們將在上下文中傳遞信息，以便您一秒鐘後看到
需要使用此上下文變量，我們要做的是傳遞ID
該位置重要的是我們不會通過實際位置
因為在dart中，它將復制該位置實例，但這不是
真正高效的內存我們想要做的是僅通過絕對最小值
我們將要使用的任何功能所需的數據，因為因為我們不再
不想複製實際的整個對象實例，所以我們要這樣做
讓我們現在實現該方法，因為該方法不會返回
在“位置”標籤上我們可以說無效的所有內容，但我通常要做的就是離開
如果返回的是void，則可以忽略它，然後通過構建
上下文，然後是位置ID，那麼這將要做的就是導航
到新屏幕，所以現在讓我們先討論導航
可以實施，所以在開始實施之前
讓我們來談談一些導航概念，以便在任何移動應用中進行導航
就像一副紙牌，其中每張紙牌都是一個屏幕，當您的應用
第一次加載時只會從一張卡開始，因為有
僅加載了一個屏幕，該屏幕在材料中的應用程序飛鏢中定義
應用程序小部件（通過home參數），我們已經介紹過了，但是這個home是
應用程序的啟動器屏幕，因此您的應用程序僅以一個開始
現在，當我在自己的物品上點擊一個項目時，屏幕和卡組中的一張卡片
我們將要實現的ListView將加載一個新屏幕
它會加載另一張卡片的位置詳細信息屏幕，而您的
虛擬卡片組，它將拿走卡片並將其移動到
卡片組中的另一張卡片進入用戶視圖，以便您推動和
在一天結束時彈出卡，基本上是計算機科學術語
一疊，然後您可以將更多的牌推入牌組的頂部，將牌推入
甲板的最上方是向用戶顯示的內容以及何時返回的內容
因此，假設他們點擊了“後退”按鈕，則卡片會從卡座頂部滑出
用戶仍然可以使用上一個屏幕，因此上一個屏幕是
仍然在內存中，所以當我們在應用程序中定義一系列屏幕時
以及許多其他類型的移動框架，您正在定義
我們所說的路線以及從Web應用程序開發中藉用的路線
術語，其中路由是基本URL，是頁面的路徑，因此主頁
頁面路由只是斜線，而其他屏幕路由就像斜線一樣
因此，在波動中，您正在定義路線，這些路線稱為命名路線，因為
為每條路線命名，因此我們定義一個參數
在材料應用程序中稱為“路線”，現在最終我們將不會使用此功能
參數，因為我將向您展示它的缺點，但是它非常
簡單的應用程序確實很好用，因為如果您沒有任何種類的
就像您想傳遞到新屏幕的精美上下文一樣，它工作正常，我將
解釋一下，我將在幾秒鐘內解釋我的意思，所以讓我們
打開博客文章，向您展示此處的示例，我將復制並
粘貼進去，因為沒有必要將其全部鍵入
非常傳統的應用程序，當我們有路線時，我們會以斜線為準
隨便叫什麼，但通常使用斜線作為主屏幕
這是第一個加載正確的屏幕，而不是首頁，我們可以說
就像最初的路線一樣，我們只能參考該路線
之所以命名，是因為當我們要導航到時，該路線的名稱只是斜線
另一個屏幕，我們必須首先找到通往該屏幕的路線，
屏幕就像第二個斜杠或fubar或任何您想為其命名的屏幕
並導航到該屏幕，然後我可以按名稱引用該屏幕
或路線名稱，這樣我可以說導航器將其命名為上下文斜線，然後您
知道路線的名稱，所以如果我點擊某個位置，請返回我的詳細信息頁面
我可以說navigator基本上是用於導航和
撲一下，有一個叫navigator的類，你說推名稱是
路線，然後將其傳遞給構建上下文，然後傳遞路線名稱
現在定義非常簡單，缺點很明顯，因為如果
如果需要傳遞任何參數，則第二個屏幕需要傳遞任何參數
像fubar這樣的參數，就像這樣，您將在哪裡得到
那些參數的值是一個缺點，因為沒有辦法
定義如果這些參數數據將如何到達這些參數
是動態的，例如，如果我有位置
詳細信息屏幕這裡的位置詳細信息，我需要傳遞位置的ID
我們正在通過在這裡定義它來加載我如何知道ID
在物質路線上，所以有一個我們要實施的解決方案
標準的顫動，但不是很清楚地記錄下來，這是一種
進入官方文檔的方式更多，所以我不
建議您定義這樣的路線，因為它們確實就是
那是最大的缺點，我希望它能做出解釋
很有意義，所以讓我們基本上暫停一下並實施位置信息
屏幕上我們需要如何加載它，因為我無法實現一個有效的示例
位置詳細信息屏幕，除非我們現在進行更新，否則我們將忽略以下事實：
現在，“位置詳細信息”屏幕只需要花費
看起來它只會加載任何隨機位置，這是我的位置詳細信息屏幕
它只會獲取所有位置，然後說第一個位置
已加載，因此我們現在必須快速更新位置詳細信息
屏幕上輸入一個參數，讓我們現在開始操作，以便我們可以
int作為稱為位置ID的私有成員現在請記住，這仍然是一個
無狀態小部件，因為位置ID我們不需要此數據對任何
狀態更改，它只會在加載時加載此位置ID，並且
確實沒有改變，所以讓我們現在創建一個自定義構造函數，以便我們
可以加載位置ID並分配給私有成員，所以我
可以通過ID致電位置詳細信息，然後我們需要一種獲取方法
通過ID定位到特定位置，然後將其加載到此處，我們沒有方法
因此，我們在位置模型中擁有的唯一方法就是全部獲取
我們將必須實現一種與我們要去做的事情非常相似的方法
最終實現，這是對我們的後端服務的呼籲
通過ID標識符獲取模型，因此我們繼續執行一個函數
稱為按ID提取，因此我們仍然可以提取所有內容
但我要實現static靜態方法，因為我們不需要
實例化一個位置，它將返回通過ID提取的位置，這就是
將其作為名稱，我們將傳遞一個位置ID，然後輸入
我們要做的就是每當實現一個最簡單的方法
實現只是寫出偽代碼，然後實現
因為它更容易實現，所以我們要說獲取所有位置
迭代它們，當我們找到帶有ID的位置時，我們想要一種
返回當然是立即要得到這是一個
一個小例子，我們將用後端API調用代替它，但是
這不是實現此目標的有效方法，但可以完成工作
現在完成，所以我們將首先繪製所有位置的草圖，以便
說位置全部獲取，然後我將有一個for循環和一個for循環
dart中的剝離很簡單，看起來很多循環都可以使用，
其他編程語言，所以我不需要解釋太多，所以我們要
說重複所有位置，然後在位置I上進行迭代
如果ID與位置ID匹配，則索引I立即返回索引處的位置
我和我知道您是說我們可能可以加載所有位置，
地圖，它會立即通過地圖獲取這些位置，但這只是一個
簡單的例子，所以我們現在要通過ID來獲取，稍後再
仔細檢查這是一個錯誤，因為我們沒有完全實施
實施了我們的屏幕，但是將來您將為
這個，我們稍後再進行測試，就像你不會寫
函數，然後期望它們起作用，最好對它進行單元測試
那不過是另一集而已，也讓我們將此方法移至此處
那是因為它更多是一種顯式方法，我們想展示
所有這些數據都只是為了使其看起來更好
現在讓我們實現位置詳細信息和位置詳細信息屏幕
我們將調用此方法，以便我們通過ID表示位置提取，然後我們可以
只需將其傳遞給我們的位置ID，並將其命名為變量位置，然後我們就可以
刪除它，所以現在我們將使它工作正常，我們可以實例化
位置詳細信息和立場信息會自動包含一個位置ID，然後在
屏幕加載我們通過ID來獲取，因此現在我們來實現一個
我無法像我所說的那樣實現推送名稱，就像我們必須
傳遞一個實際的ID，所以我現在將討論如何將動態參數傳遞給
我們要加載的屏幕還可以，所以讓我們實現我們實際要執行的操作
在此的最終實現中進行編碼，因此我們不會
使用普通的推送名稱，我們將使用更擴展的推送版本
命名，我們將傳遞一個參數以推送名稱，即ID
這裡的位置ID，所以讓我們現在實現它，所以在我們首先做之前
要去應用程序飛鏢，這就是我個人如何實現這一點
實現路線的許多不同方法，但我要有兩個常量
在應用程序的頂部，因為常量允許我定義類似引用
通過實際名稱全局定位路線，而不必這樣做
錯誤，因此我可以通過實際的變量名稱和
dart中的常量應該以大寫字母開頭，因此
在標題情況下，這些不是類，它們是實際變量，因此它們看起來
像類，但它們是實際變量，但它們又是標題
情況是因為它們是常數，所以我定義了所有路線的名稱
在這裡，我有一條僅是斜線的家鄉路線和現在的位置詳細信息路線
當您通過陡峭的路線飛舞時，它已經會知道嘿，這是我的
第一個屏幕，我要加載的很好，所以現在讓我們回去，現在我可以說推送了
命名，然後選擇位置路線，然後我將向您展示如何通過
的論據，因此我們將必須將此位置ID傳遞給名為
函數並將參數傳遞給它，有一個arguments參數，因此對於
push表示我們有參數，而所有參數都是一個映射，因此是一個映射類型
然後我們可以在這裡定義我們想要的任何東西我可以說出ID然後是位置
ID和我們的屏幕實際上是要您使用的，我將在
分鐘，它將如何使用它，所以我們將通過名稱（例如ID）來引用它
然後是值位置ID，我們會記住我們使用此ID鍵
到我們的地圖上，讓我們繼續進行下去，這就是我們要去的藝術領域
我們不打算在這裡使用routes參數嗎，所以我要刪除
而且我們實際上並不需要初始路線，因為我們已經有了一條路線
叫做slash，它首先加載，我們要使用
在生成路徑上調用的特殊參數
給我們一個動態的路線列表，它以所謂的形式
路線分解和路線工廠只是一個花哨的名詞，基本上是一個
數據的有效負載，所以只是說嘿，這是我的路線，所以
讓我們在要實現的函數上創建一個傳遞，這是一個私有函數
所以它是從下劃線（稱為下劃線）開始的，現在我們要實現
那是因為它在我們的應用程序點飛鏢中，它在最高級別
最容易在這裡定義它，以便它將返迴路線工廠，我將
在一秒鐘內向您顯示一天結束時Factory的路線，
該函數將返回一些數據，因此將返回實際的
功能，因此，如果您單擊到作為路線工廠的生成路線
讓我們點擊一個路線工廠，而路線工廠實際上是一個
進行大量設置並返回動態類型的路由，所以我不喜歡
深入研究這個讓我實現它，這將帶來很多好處
更有意義，但是我們最後要做的就是返回一個函數，這樣
參數設置的功能，所以我們將在這裡使用設置，我將
向您展示我們將如何使用設置，因此首先我們將獲得
討論我們選擇的路線的論點
和設置具有稱為參數的成員，因此我們可以將設置用於
獲取各種信息，但論據是其中之一，現在我們
將創建一個名為screen的變量，而screen是實際的小部件，
將根據路線名稱返回給我們的最終屏幕，因此
我們擁有的路線的名稱被定義為該名稱的設置，因此，如果
用戶點擊他們想要在給定路線上點擊的任何內容
覆蓋範圍由名稱定義，該名稱將是/或/位置
細節，我們要做的是使用飛鏢的一項新功能，即switch和
開關，讓我們基本上是榮耀的if和else if語句，它具有
可以根據需要擁有其他多個if，但這只是更簡潔的方法
說如果有的話，然後其他的話，如果有的話，然後其他的話，如果有的話
否則是正確的，所以我們可以說是switch而不是我們將名稱傳遞給它
路線，然後我可以說在這種情況下，如果這是我所處的位置路線
要做一些自定義的事情，我要說的是我要返回的屏幕是
基本上是位置小部件的新實例，然後我要說
中斷，因為在switch語句中它將經歷所有情況，直到
中斷或您返回某物，因此下一種情況是位置明細路線和
記住每個案例都必須以冒號而不是真正的分號來結束
重要的是，大多數編程語言都有
switch語句，所以大多數人（如果您對此很熟悉）是
對您而言，它將看起來像是第二自然，因此如果需要，可以獲取位置詳細信息路線
導航到此處的位置詳細信息路線，該路線由斜線定義
位置詳細信息我現在必須做一些自定義操作，我要說的是位置
詳細信息，我將在這裡使用我的參數映射，我將通過以下方式引用它
這就是我們在此處定義的ID密鑰
參數是一個映射，該映射中有一個名為ID的鍵，您應該使用
默認情況下使用單引號，然後我現在可以實例化它
帶有自定義參數，因此現在我的屏幕必須快速導入
位置詳細信息位置詳細信息很棒，現在我可以退還，所以休息一下，現在
switch語句具有此最終情況，即所有情況都不匹配
這是默認情況，您只用默認冒號定義它，然後按
默認只是我們要返回null而什麼也不做，然後最後我是
我們要做的就是返回所謂的“物質頁面路線”，我們知道
需要返回這個，因為路由工廠是一個函數，是的，我不會
現在過多地參與其中，但我只能說您希望
正確返回的材料頁面路線
物質頁面路線是一種類型，基本上是路線的一種類型
到基本上該路線工廠鍵入材料頁面路線基本上我沒有
想要投入太多，但這是一種路線，因此您可以使用任何類型的路線
相對多種路線，但最受歡迎的是物質頁面路線
然後材料帶八條路線接了一個建造商，我不用擔心
建設者所有這是一種能夠傳遞動態變化的奇特方法
就像這裡的匿名函數，因此語法有點奇怪，但基本上
這是一個考慮到上下文的函數，您說好，我要返回什麼
我要返回屏幕小部件，就是這樣，所以我知道這看起來有點
很奇怪，但是基本上這就是我們定義所有路線的方式
我們需要動態的應用程序，它的優點是
在我們的應用小部件中預先定義了，所以讓我們開始工作吧，然後我將
向您展示它現在將如何工作，所以在生成路線之前是路線，而在我們之前
使它正常工作，我將很快快速清理它，因為我想要
在我得到之前，我基本上會先獲取我的主題數據
它可以快速工作，讓我整理一下，因為它看起來很漂亮
非常醜陋，我要說團隊數據對不起這裡的切線，但我想
只需將其放在此處，我將向您展示快速整理一下它是多麼容易
太好了，所以我們的應用程序小部件上的主屏幕非常清晰
生成路線和我們的主題，它在這裡的方法中，這樣很好，並且
乾淨很酷，所以現在我們已經結束了，這有點乏味，但讓我們
看看這是否行得通，所以讓我們再次檢查我們的代碼，推名為okay，應該
工作，讓我們看看它現在是否很酷，它沒有加載位置
詳細信息屏幕並看到它就像加載位置屏幕一樣，讓我們
解決發生這種情況的原因，因此在我們的應用程序飛鏢位置中
位置詳細信息位置詳細信息路線，而我們要加載的名稱是C
位置詳細信息路線，所以我們必須推送名稱位置詳細信息棕色，所以讓我們熱
重新加載它，當我單擊一些很酷的東西時，它就會出現，所以我們得到了它
工作，我可以回去，當我回去時，它將彈出路線，所以有
不，您不需要像不需要手動執行此pop方法
編寫一些代碼，說明將位於我們套疊頂部的這張卡推離堆棧
它會自動執行，因為我們使用的是Material應用程序材質
欄小部件的設計，因此應用欄小部件將自動顯示後退按鈕
如果不是家，則出現屏幕時
這很酷，因此在下一集中，我們將實際實施
漂亮的位置列表屏幕，但這只是細微之處
導航機制讓我確保我沒有錯過任何事情，因為
博客文章基本上詳細解釋了這是如何實現的，並給出了
您還鏈接到文檔，讓我們看看是的，我想這就是最終的
dart文件很酷，我談到了回溯以及類似的所有內容
可能會有更好的方法來實現
動態的，需要動態的參數，但是如果您知道，可以隨時聯繫
有一個更好的方法可以做到這一點，但就目前而言，浮動人員的實施方式是
幾乎是最明確的方法
一切都是在應用黑暗中預先定義的，非常感謝您的觀看和支持