إصلاح التجاوز: التمرير
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 7 من 30.
إذا احتوى Column على عناصر فرعية أكثر مما تتسع له الشاشة، فسيحدث تجاوز عند الأسفل. للهاتف ارتفاع محدود، ولا تتمرر Column من تلقاء نفسها أبدًا.
أحِطها بـ SingleChildScrollView. عندئذٍ يمكن أن يصل ارتفاع العمود إلى ما يحتاج إليه، ويمكنك سحب الشاشة لرؤية الباقي:
SingleChildScrollView(
child: Column(
children: [
// أي عدد تريده من العناصر الفرعية
],
),
)هذا هو الحل لصفحة أطول من الشاشة: صفحة إعدادات أو نموذج أو مقالة. أما بالنسبة إلى قائمة طويلة من عناصر من النوع نفسه، فإن ListView التي تعرفها بالفعل تؤدي المهمة نفسها.
تلتف طريقة العرض القابلة للتمرير حول العمود بأكمله. أما إحاطة كل عنصر فرعي بطريقة عرض قابلة للتمرير خاصة به، فتُبقي العمود بالارتفاع نفسه كما كان من قبل.
التحدي
سهليتجاوز الأسبوع الحافة السفلية. اجعل الصفحة قابلة للتمرير حتى تتمكن من الوصول إلى Sunday.
جرّب بنفسك
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('This Week')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
for (final day in days)
Container(
height: 120,
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: Colors.lightBlue.shade100,
borderRadius: BorderRadius.circular(12),
),
child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
),
],
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تصميم يتكيف مع الشاشة
1التشارك في الصف
Expanded يملأ الصفمشاركة المساحة باستخدام flexFlexible يحتضن عنصره الفرعيSpacer يباعد بين العناصر2خطأ تجاوز السعة
خطأ تجاوز السعةإصلاح التجاوز: التوسيعإصلاح التجاوز: التمريرإصلاح التجاوز: الالتفافالتباعد داخل الالتفافتدرّب بنفسك: مترجم Flutter عبر الإنترنت