Menu
CoddyTech

תיקון גלישה: גלילה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 7 מתוך 30.

אם יש ב-Column יותר צאצאים ממה שהמסך יכול להכיל, התוכן גולש מעבר לתחתית. לגובה הטלפון יש גבול, ו-Column לעולם לא נגללת מעצמה.

עטפו אותה ב-SingleChildScrollView. כך העמודה יכולה להיות גבוהה ככל שצריך, ואתם גוררים את המסך כדי לראות את שאר התוכן:

SingleChildScrollView(
  child: Column(
    children: [
      // כמה אלמנטים ילדים שתרצו
    ],
  ),
)

זהו הפתרון לדף שארוך יותר מהמסך: דף הגדרות, טופס או מאמר. לרשימה ארוכה של פריטים מאותו סוג, ListView שאתם כבר מכירים עושה את אותה העבודה.

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

challenge icon

אתגר

קל

השבוע גולש מעבר לתחתית. אפשר לגלול את הדף כדי להגיע אל 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))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה פריסות שמתאימות למסך

תרגלו בעצמכם: קומפיילר Flutter אונליין