إصلاح التجاوز: الالتفاف
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 8 من 30.
تحتوي بعض الصفوف على عناصر ينبغي أن تتدفق مثل الكلمات في جملة: الوسوم والمرشحات والشرائح. عندما يكون عددها أكبر مما يتسع له سطر واحد، يتجاوز Row الحد من جهة اليمين.
يأخذ Wrap قائمة children: نفسها، وعندما لا يتسع السطر للعنصر التالي، يبدأ سطرًا جديدًا أسفله:
Wrap(
children: [
for (final tag in tags) Text(tag),
],
)هذا هو الحل الثالث لتجاوز الحدود. استخدم Expanded عندما ينبغي أن ينكمش أحد العناصر، واستخدم نافذة عرض قابلة للتمرير عندما تكون الصفحة أطول من الشاشة، واستخدم Wrap عندما ينبغي للعناصر الانتقال إلى السطر التالي.
يحافظ Wrap على حجم كل عنصر كما يطلبه. فهو لا يضغطها أبدًا؛ بل ينقلها إلى السطر التالي فحسب.
التحدي
سهلتتجاوز الوسوم الحافة اليمنى. اجعلها تلتف إلى عدد الأسطر الذي تحتاج إليه، مثل الكلمات في فقرة.
جرّب بنفسك
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)),
),
],
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تصميم يتكيف مع الشاشة
1التشارك في الصف
Expanded يملأ الصفمشاركة المساحة باستخدام flexFlexible يحتضن عنصره الفرعيSpacer يباعد بين العناصر2خطأ تجاوز السعة
خطأ تجاوز السعةإصلاح التجاوز: التوسيعإصلاح التجاوز: التمريرإصلاح التجاوز: الالتفافالتباعد داخل الالتفافتدرّب بنفسك: مترجم Flutter عبر الإنترنت