Menu
CoddyTech
flag Ar iconالعربيةdown icon

إصلاح التجاوز: الالتفاف

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

تحتوي بعض الصفوف على عناصر ينبغي أن تتدفق مثل الكلمات في جملة: الوسوم والمرشحات والشرائح. عندما يكون عددها أكبر مما يتسع له سطر واحد، يتجاوز Row الحد من جهة اليمين.

يأخذ Wrap قائمة children: نفسها، وعندما لا يتسع السطر للعنصر التالي، يبدأ سطرًا جديدًا أسفله:

Wrap(
  children: [
    for (final tag in tags) Text(tag),
  ],
)

هذا هو الحل الثالث لتجاوز الحدود. استخدم Expanded عندما ينبغي أن ينكمش أحد العناصر، واستخدم نافذة عرض قابلة للتمرير عندما تكون الصفحة أطول من الشاشة، واستخدم Wrap عندما ينبغي للعناصر الانتقال إلى السطر التالي.

يحافظ Wrap على حجم كل عنصر كما يطلبه. فهو لا يضغطها أبدًا؛ بل ينقلها إلى السطر التالي فحسب.

challenge icon

التحدي

سهل

تتجاوز الوسوم الحافة اليمنى. اجعلها تلتف إلى عدد الأسطر الذي تحتاج إليه، مثل الكلمات في فقرة.

جرّب بنفسك

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تصميم يتكيف مع الشاشة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت