גלילה יפה עם list whell scroll view

תמלול ההרצאה: גלילה יפה עם list whell scroll view

הטקסט המלא של הדקות הראשונות בהרצאה «גלילה יפה עם list whell scroll view» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   בשיעור הזה אנחנו הולכים להשתעשע קצת עם הרעיון של סטאק ולהציג רשימה של סרטים בווידג'ט שנקרא ListWheels Call View.

2. 00:09

   זה כמו ListView רגיל, רק שהוא נותן אפקט של גלגל וזה נראה ממש ממש יפה. אז נחלק את העבודה לשלושה חלקים. בחלק הראשון נגדיר את המחלקה Movie Item.

3. 00:18

   כל Movie Item יכיל את שם הסרט, את הלינק לתמונה של הסרט ואת הרייטינג. בחלק השני נגדיר ווידג'ט חדש שייצג בעצם סרט, וזה די דומה למה שעשינו בשיעור הקודם.

4. 00:29

   בחלק השלישי נשתמש בשתי האלמנטים האלו ונציג את כולם בווידג'ט ListWheelScrollView אז נתחיל. לחלק הראשון נוסיף מודל זה קובץ Dart נקרא לו MovieItem וזה יהיה class MovieItem לכל MovieItem יהיה את שם הסרט image.url ואת הרייטינג שיהיה double.

5. 01:01

   נוסיף קונסטרקטור MovieItem קונסטרקטור יתחיל את שם הסרט, את ה-image url ואת ה-rating.

6. 01:14

   אוקיי, אז סיימנו עם החלק הראשון. בחלק השני אמרנו שנגדיר וידג'ט שמייצג מובי. אז ניגש לתיקיה "לי" ונוסיף כאן תיקיה חדשה, נקרא לה "views" ובתוך views נוסיף את הווידג'ט החדש שלנו.

7. 01:31

   אז נגדיר כאן dart file, נקרא לו פשוט "Movie" וזה יהיה state-less widget. תן אימפורט מ-material. אוקיי, עכשיו כל מובי וידג'ט יכיל בתוכו מובי אייטם, שאותו בעצם הוא מייצג ומרנדר אז נגדיר כאן final movie item ונקרא לו movie item למה הוא final מכיוון שהוא לא משתנה לכל אורך

8. 02:02

   ההידור כשאנחנו מייצרים movie וידג'ט חדש אנחנו נותנים לו מופע של movie item והוא לא משתנה לכל אורך הזמן ואנחנו גם רואים כאן הערה הערה הזאת אומרת the final variable movie item must be initialized אז זה נכון כשאנחנו מגדירים משתנה שהוא final אנחנו חייבים להתחיל אותו אז בואו נתחיל אותו בקונסטרקטור נבנה קונסטרקטור

9. 02:22

   של מובי שמקבל מופע של מובי אייטם ועכשיו הכל בסדר כל מה שנשאר לנו זה רק לממש את הפונקציה build ומכיוון שהמובי ווידג'ט אמור לייצג סרט אנחנו כבר זוכים את העבודה מהשיעור הקודם אבל רק לצורך התרגול נממש את זה שוב פעם אז נחזיר קונטיינר שהרוחב שלו יהיה 340 הגובה יהיה 150 ואת הפסיק כמובן ורק לצורכי בדיקה נגדיר גם

10. 02:50

    צבע רקע שיהיה כחול אוקיי לקונטיינר זה יש child שהוא יהיה stack ול-stack כמו שאנחנו זוכרים יש children הילד הראשון יהיה image network כשה-url של התמונה יהיה בעצם ה-url של המובי אז כאן נרשום movie-item.image.url ואני רוצה להקפיא רגע את החלק השני כי כבר יש מה לראות בו ובואו נממש לרגע את החלק השלישי ונחזור לווידג'ט הזה אז נגדיר כאן מסך חדש תחת Screens זה יהיה

11. 03:26

    MovieListPage MovieListPage יהיה StatefulWidget MovieListPage import me material מעולה ועכשיו אנחנו צריכים להגדיר את רשימת הסרטים שלנו זה אמור להיות משהו כמו var items שווה וכאן נגדיר את רשימת הסרטים כל סרט יהיה מופע של MovieItem שמקבל בקונסטרקטור

12. 03:53

    את שם הסרט את ה-URL של הסרט אימג' URL ואת הרייטינג לדוגמה 3. אז עכשיו אני אדביק רשימה של סרטים שהכנתי כבר מראש.

13. 04:12

    מעולה. עכשיו בפונקציה build במקום להחזיר קונטיינר נחזיר מופע חדש של list will scroll view. ל-list will scroll view יש כמה פרמטרים אחד זה כמובן ה-children שתכף ניגע בו פרמטר נוסף הוא Item Extent.

14. 04:32

    Item Extent קובע את הגובה של כל ילד שיוצג ב-list will scroll view. אז אנחנו נגדיר כאן לדוגמה 150 נקודה פסיק ועכשיו כל מה שנשאר לעשות זה רק לספק את ה-children ל-list will scroll view יש לנו שתי דרכים לממש את זה ואני אדגים את שתיהן אחד זה באמצעות פונקציה שתחזיר לנו ליסט של וידג'ט אז נבנה פונקציה ונקרא לה get children

15. 04:56

    הפונקציה הזאת תגדיר משתנה שנקרא לו answer שהוא יהיה בעצם רשימה ריקה ועבור כל איבר באייטמס אנחנו ניצור ווידג'ט מסוג מובי ווידג'ט ונוסיף אותו לרשימה שלנו ובסוף נחזיר את הרשימה.

16. 05:15

    נעשה את זה ככה items.foreach הפונקציה foreach מקבלת פונקציה אנונימית שהפרמטר שלה הוא יהיה בעצם כל איבר ברשימה אז נקרא לזה אייטם ועבור כל אייטם אנחנו צריכים ליצור מופע חדש של מובי ווידג'ט אז נגדיר כאן var NewMovie שווה ל-Movie ואנחנו זוכרים שכל מובי ווידג'ט מקבל בתוכו מובי אייטם וזה בדיוק האייטם שעליו אנחנו רוצים.

17. 05:50

    את אותו NewMovie נוסיף לרשימה answer.addNewMovie ובסוף נחזיר את אותו answer. אני אחזור על זה. הגדרנו רשימה ריקה ועבור כל ילד באייטמס שזה רשימת הסרטים שלנו אנחנו משתמשים באותו אייטם, מייצרים באמצעותו מופע חדש של מובי ווידג'ט שהגדרנו בקובץ נפרד, דוחפים אותו לרשימה

18. 06:19

    ובסוף מחזירים את הרשימה. ועכשיו נחזור ל-list will scroll view שלנו ובתור children פשוט נפעיל את הפונקציה get children ועכשיו יש לנו רשימה של ווידג'טים שכל ווידג'ט הוא מובי ווידג'ט.

19. 06:35

    בואו נריץ ונראה מה קורה. אז כן, שום דבר לא קורה וזה בגלל שאנחנו בכלל לא מפעילים את הפונקציה movie list page. אז בואו נגיע למיין שלנו, במקום להחזיר Stack Test