תיקון גלישה: גלילה
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 7 מתוך 30.
אם יש ב-Column יותר צאצאים ממה שהמסך יכול להכיל, התוכן גולש מעבר לתחתית. לגובה הטלפון יש גבול, ו-Column לעולם לא נגללת מעצמה.
עטפו אותה ב-SingleChildScrollView. כך העמודה יכולה להיות גבוהה ככל שצריך, ואתם גוררים את המסך כדי לראות את שאר התוכן:
SingleChildScrollView(
child: Column(
children: [
// כמה אלמנטים ילדים שתרצו
],
),
)זהו הפתרון לדף שארוך יותר מהמסך: דף הגדרות, טופס או מאמר. לרשימה ארוכה של פריטים מאותו סוג, ListView שאתם כבר מכירים עושה את אותה העבודה.
תצוגת הגלילה עוטפת את כל העמודה. אם עוטפים כל צאצא בתצוגת גלילה משלו, העמודה נשארת באותו גובה כמו קודם.
אתגר
קלהשבוע גולש מעבר לתחתית. אפשר לגלול את הדף כדי להגיע אל Sunday.
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('This Week')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
for (final day in days)
Container(
height: 120,
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: Colors.lightBlue.shade100,
borderRadius: BorderRadius.circular(12),
),
child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
),
],
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטים2שגיאת גלישה
שגיאת גלישהתיקון גלישה: הרחבהתיקון גלישה: גלילהתיקון גלישה: גלישת שורותריווח בתוך גלישת שורותתרגלו בעצמכם: קומפיילר Flutter אונליין