إصلاح التجاوز: التوسيع

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

يريد عنصر Text داخل Row أن يكون سطرًا طويلًا واحدًا. عندما يكون السطر أطول من الصف، يتجاوز الصف حدوده من جهة اليمين، رغم أن النص كان بإمكانه الالتفاف إلى أسطر متعددة.

لا يلتف النص لأن الصف يسمح لكل عنصر فرعي بأن يكون بعرض ما يشاء. لفّ النص داخل Expanded وسيُمنح عرضًا يساوي تمامًا المساحة التي تتركها العناصر الفرعية الأخرى. يلتف النص الذي له عرض محدد إلى أسطر أكثر.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

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

التحدي

سهل

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

جرّب بنفسك

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}