PracticU

הסבר על widget column ועל widget row

בלי כתוביותעם כתוביות
PracticU › קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון › הסבר על widget column ועל widget row
הסבר על widget column ועל widget row
Column ו-Row הם שני הווידג'טים העיקריים לסידור תוכן בפלאטר, והם מופיעים כמעט בכל מסך. לפני בניית מסכים כדאי להכיר את המאפיינים שלהם.
השלבים העיקריים
1. עמודה (Column): מסדרת את הילדים אחד מתחת לשני. mainAxisAlignment קובע את היישור לאורך הציר האנכי: center, start, end או spaceEvenly, שמחלק את השטח שווה בשווה.
2. יישור רוחב: crossAxisAlignment מיישר לאורך הציר האופקי, שהוא הציר ההפוך בעמודה. כדי לראות את ההבדל נותנים לקונטיינר רוחב, למשל 300.
3. שורה (Row): מסדרת את הילדים אחד ליד השני. הציר הראשי שלה הוא האופקי, והציר ההפוך הוא האנכי.
4. גובה השורה: הגובה נקבע לפי הילד הגבוה ביותר. כדי לראות את היישור האנכי נותנים לקונטיינר גובה, למשל 300.
5. קונטיינר: עוטף את הווידג'טים ומוסיף להם רקע, מרווחים וגודל. ללא גודל מוגדר הוא מתפשט לכל הגובה.
שימו לב
היישור לא ייראה אם לקונטיינר אין גודל משלו, ולכן צריך לתת לו רוחב או גובה כדי לראות את ההשפעה.
בעזרת שני הווידג'טים האלה אפשר לסדר רוב המסכים הבסיסיים.
השיעור הבא בקורס: בניית עמוד LOGIN אמיתי מאפס בשפת DART

פרקי ההרצאה: הסבר על widget column ועל widget row

  1. 00:00

    הכרת widgets של שורה ועמודה

  2. 01:34

    יצירת מסך ראשי עם MaterialApp

  3. 02:27

    Container ועמודה עם אייקונים

  4. 03:21

    רקע צבעוני ושלושה ילדים בעמודה

  5. 03:52

    יישור הילדים בעמודה

תמלול ההרצאה: הסבר על widget column ועל widget row

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על widget column ועל widget row» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:16

    אז ברשותכם אני אכתוב את כל הקוד מחדש גם בשביל החזרה וגם כן אתן טיפים קטנים. אז נתחיל מהפונקציה void name שמפעילה את הפונקציה runup ואם אתם זוכרים מההקדמה אני פשוט אממש אותה שוב כפונקציית חץ.

  3. 00:30

    זווייד מיין אירו פונקצ'ן run-up אוקיי יש לנו פונקציה של שורה אחת ועכשיו אנחנו נחזיר מופעה של הווידג'ט מיי-אפ ונגדיר קלאס מיי-אפ אקסטיינס סטייטלס ווידג'ט ונדרוס את הפונקציה בילד מעולה ועכשיו אני אצור את הווידג'ט בצורה הרבה יותר מהירה שימו לב אם אני אמחק את הקוד ואשום st-less

  4. 01:02

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

  5. 01:25

    תפסו את השם פלאטר ותוודאו שהפלאגין פלאטר סניפט מותקן אצלכם אם הוא מותקן אז הכל צריך להיות בסדר נחזור למימור שלנו תחת סטייטלס ווידג'ט אנחנו לא מחזירים קונטיינר אנחנו מחזיר כמובן מטריאל אפ שההום שלה יהיה ווידג'ט שנקרא לו my home וכאן באותו אופן יש לנו גם קיצור עבור יצירה של סטייטפול ווידג'ט אז נרשום st full במקום st less

  6. 01:56

    ונוצר לנו קיצור נהדר שבו כל מה שצריך לעשות זה רק לרשום את השם של הווידג'ט. אז נרשום MyHome ושימו לב שנוצרו לנו מחלקות MyHome שיורשת מStatefulווידג'ט ו-MyHomeState שיורש מState מסוג MyHome אפילו הפונקציות קירייט סטייט ובילד נדרסו עבורנו.

  7. 02:14

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

  8. 02:26

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

  9. 02:45

    הצ'יילד שלו יהיה נתחיל עם קולום נגדיר עמודה קולום שהילדים שלה יהיו פשוט שלושה אייקונים. נשתמש בווידג'ט אייקון.

  10. 02:56

    באייקון אנחנו מגדירים כרגע שתי פרמטרים, אחד זה האייקון עצמו שמגיע מאייקונס נקודה ונבחר אייקון של מטוס לדוגמה, הרפליין, וסייז, הגודל של האייקון יהיה לדוגמה 50. בואו נריץ את הפרויקט.

  11. 03:12

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

  12. 03:24

    אז בואו נוסיף לו לדוגמה רקע מסוים, פשוט נרשום color, colors.red, נריץ שוב, אפשר גם לראות שהוא נמתח לכל הגובה.

  13. 03:36

    אוקיי, ועכשיו נוסיף עוד שתי בנים ל-children של הקולום, אז נרשום פסיק ונשכפל את האייקון, עוד פסיק ועוד שכפול של האייקון.

  14. 03:44

    את האייקון האמצעי אני רוצה לעשות בגודל של 100, מעולה. אז יש לנו בעצם עמודה. בואו נשחק קצת עימה מאפיינים של העמודה ונראה מה אפשר לעשות איתה.

  15. 03:56

    אז אם נכנס לקולום ונרשום פה לדוגמה Main Xs Alignment Main Xs Alignment קובע את העימוד המרכזי של העמודה. אם נרשום Main Xs Alignment.Center נראה שכל האלמנטים מיושרים לאמצע.

  16. 04:11

    באותו אופן יש לנו גם End ו-Start. אם אנחנו רוצים לרווח את האלמנטים באופן שווה נוכל להשתמש ב-Space Evenly וזה נראה ככה. אוקיי מה עוד יש לנו עבור קולום Cross Xs

לקורס המלא: קורס Flutter אונליין

ההרצאה הקודמת: בונים אפליקציה ראשונה ב-Flutter

ההרצאה הבאה: בניית עמוד LOGIN אמיתי מאפס בשפת DART

הרצאות קשורות מקורסים אחרים

  • הסבר של async ועל await
  • הסבר על Regions ועל AZ ב-AWS
  • הסבר על UID ועל GID
  • הסבר על Chef ועל Puppet

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון