عرض أقصى
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 15 من 30.
تتمدّد البطاقة التي تحتوي على نص طويل لتملأ عرض الشاشة. يبدو ذلك مناسبًا على الهاتف؛ لكن البطاقة نفسها تتمدّد على الجهاز اللوحي إلى سطر واحد طوله ألف بكسل، ما يجعل قراءته صعبة.
يحدّد ConstrainedBox حجم العنصر الفرعي. ويمثّل maxWidth: الحد الأقصى الذي يمكن أن يتمدّد إليه:
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
child: Container(...),
)على شاشة يقل عرضها عن 400 بكسل، تظل البطاقة تتقلّص لتناسبها. أما على شاشة أعرض، فتتوقف عند 400، ويلتف النص على أسطر أكثر.
يقبل BoxConstraints أيضًا minWidth: وminHeight: وmaxHeight:. والحد الأدنى هو أصغر حجم يمكن أن يكون عليه العنصر الفرعي، لذا فهو لا يمنعه أبدًا من التمدّد.
التحدي
سهلحافظ على سهولة قراءة بطاقة الاقتباس على الشاشات العريضة: اسمح لها بالاتساع إلى حد أقصى يبلغ 320 بكسل.
جرّب بنفسك
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('Quote of the Day')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Center(
child: Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.amber.shade100,
borderRadius: BorderRadius.circular(16),
),
child: const Text(
'The best way to learn to build apps is to build apps, one small screen at a time.',
style: TextStyle(fontSize: 20),
),
),
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تصميم يتكيف مع الشاشة
1التشارك في الصف
Expanded يملأ الصفمشاركة المساحة باستخدام flexFlexible يحتضن عنصره الفرعيSpacer يباعد بين العناصر4الأحجام ونقاط التوقف
العرض الكامل: double.infinityعرض أقصىحجم الشاشة: MediaQueryنقاط التوقف باستخدام LayoutBuilderتدرّب بنفسك: مترجم Flutter عبر الإنترنت