مشاركة المساحة باستخدام flex

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 2 من 30.

عندما يكون عنصران فرعيان في Row كلاهما Expanded، يتقاسمان المساحة بالتساوي: على هاتف عرضه 390 بكسل، يحصل كل منهما على 195 بكسل.

لتقسيم المساحة بشكل غير متساوٍ، امنح Expanded قيمة flex:. إنها حصة وليست حجمًا. يجمع Flutter الحصص ويقسّم المساحة بحسبها:

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

مجموع الحصص 4، لذا يحصل الأحمر على ثلاثة أرباع الصف، والأزرق على ربعه. يحصل العنصر الفرعي الذي لا يملك flex: على حصة مقدارها 1.

لأن الحصص أجزاء من الكل، يحافظ التخطيط على نسبه مهما كان عرض الشاشة.

التحدي

سهل

اجعل مربع Chart أعرض بمرتين من مربع Notes. على الهاتف، يكون عرضهما 260 و130 بكسل.

جرّب بنفسك

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(
        appBar: AppBar(title: const Text('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}