מרכוז עמודה

חלק מהיחידה האפליקציה הראשונה שלך במסלול ה-Flutter של Coddy. שיעור 22 מתוך 32.

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

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start מציין את החלק העליון, center את האמצע ו-end את החלק התחתון. spaceEvenly מפזר אותם עם מרווחים שווים. ל-Row יש אותה הגדרה, לאורך הרוחב שלה.

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

אתגר

קל

שלושת המספרים מופיעים בחלק העליון של המסך. העבירו אותם לאמצע, בעזרת mainAxisAlignment: של העמודה.

נסו בעצמכם

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}