תיקון גלישה: גלישת שורות
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 8 מתוך 30.
יש שורות שמכילות פריטים שצריכים לזרום כמו מילים במשפט: תגיות, מסננים, שבבים. כשיש יותר מדי פריטים בשביל שורה אחת, Row גולשת ימינה.
Wrap מקבלת את אותה רשימת children:, וכשהילד הבא לא נכנס בשורה, היא מתחילה שורה חדשה מתחתיה:
Wrap(
children: [
for (final tag in tags) Text(tag),
],
)זהו הפתרון השלישי לגלישה. השתמשו ב-Expanded כשילד אחד צריך להצטמצם, בתצוגת גלילה כשהדף ארוך יותר מהמסך, וב-Wrap כשהילדים צריכים לעבור לשורה הבאה.
Wrap שומרת על הגודל שכל ילד מבקש. היא אף פעם לא מכווצת אותם; היא רק מעבירה אותם למטה.
אתגר
קלהתגיות גולשות מעבר לקצה הימני. סדרו אותן כך שיתפרסו על פני כמה שורות שיידרש, כמו מילים בפסקה.
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Interests')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
for (final tag in tags)
Container(
width: 110,
height: 40,
decoration: BoxDecoration(
color: Colors.purple.shade100,
borderRadius: BorderRadius.circular(20),
),
child: Center(child: Text(tag)),
),
],
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטים2שגיאת גלישה
שגיאת גלישהתיקון גלישה: הרחבהתיקון גלישה: גלילהתיקון גלישה: גלישת שורותריווח בתוך גלישת שורותתרגלו בעצמכם: קומפיילר Flutter אונליין