التباعد داخل الالتفاف
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 9 من 30.
أصبحت العناصر ملائمة الآن، لكنها متلامسة. يحتوي Wrap على إعدادين للمسافة بين عناصره الفرعية:
Wrap(
spacing: 8,
runSpacing: 12,
children: [...],
)spacing: هي المسافة بين عنصرين فرعيين في السطر نفسه. أما runSpacing: فهي المسافة بين سطر وآخر. يُسمّى كل سطر في Wrap run، ومن هنا جاءت التسمية.
تُحتسب المسافات عندما يحدد Wrap ما يتسع في السطر، لذا قد تؤدي قيمة أكبر لـ spacing إلى نقل عنصر فرعي إلى السطر التالي.
التحدي
سهلامنح الوسوم مساحة:
8بكسلات بين الوسوم في السطر نفسه12بكسلًا بين السطور
جرّب بنفسك
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: Wrap(
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 عبر الإنترنت