محاذاة الحواف اليسرى

جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 23 من 32.

الاتجاه الآخر في Column، أي الاتجاه العرضي له، هو المحور العرضي. افتراضيًا، يتم توسيط كل عنصر فرعي عرضيًا داخل العمود، لذا لا يبدأ السطر القصير والسطر الطويل من الموضع نفسه.

يغيّر crossAxisAlignment: ذلك:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

في Column، يحاذي CrossAxisAlignment.start العناصر الفرعية إلى اليسار، ويحاذي end إلى اليمين، أما center فهو الخيار الافتراضي.

التحدي

سهل

اجعل كلا السطرين يبدآن من الحافة اليسرى نفسها، باستخدام crossAxisAlignment: للعمود.

جرّب بنفسك

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: Center(
          child: Column(
            children: [
              Text('Name', style: TextStyle(fontSize: 24)),
              Text('A much longer line', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}