توسيط عمود

جزء من قسم تطبيقك الأول في رحلة 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)),
          ],
        ),
      ),
    );
  }
}