ריווח בתוך גלישת שורות
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 9 מתוך 30.
התגיות מתאימות עכשיו, אבל הן נוגעות זו בזו. ל־Wrap יש שתי הגדרות לרווח שבין הילדים שלו:
Wrap(
spacing: 8,
runSpacing: 12,
children: [...],
)spacing: הוא המרווח בין שני ילדים באותה שורה. runSpacing: הוא המרווח בין שורה אחת לבאה אחריה. כל שורה של Wrap נקראת רצף, ומכאן מגיע השם.
המרווחים נלקחים בחשבון כש־Wrap מחליט מה נכנס בשורה, ולכן spacing גדול יותר יכול להעביר ילד לשורה הבאה.
אתגר
קלתן לתגים מקום:
8פיקסלים בין תגים באותה שורה12פיקסלים בין השורות
נסו בעצמכם
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: Wrap(
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 אונליין