البطاقات في قائمة
جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 9 من 33.
Card لوحة ذات زوايا مستديرة وظل خفيف يجعلها تبدو مرتفعة عن الشاشة. تجمع العناصر الموجودة بداخلها، بحيث يظهر كل عنصر في القائمة كقطعة واحدة.
Card(
child: ListTile(
leading: Icon(Icons.flight),
title: Text('Paris'),
subtitle: Text('France, May 3'),
),
)تترك البطاقة هامشًا صغيرًا حولها، بحيث تبرز البطاقات في القائمة عن بعضها. يغيّر margin: هذا الهامش، ويغيّر color: لونها، ويجعل elevation: الظل أعمق.
يُعدّ ListTile داخل Card أحد أكثر العناصر شيوعًا في تطبيقات Flutter: فكّر في قائمة بالطلبات أو الرسائل أو الرحلات.
التحدي
سهلرحلة باريس معروضة على بطاقة. اعرض رحلتي كيوتو وليما على بطاقتين أيضًا، بطاقة لكل رحلة.
جرّب بنفسك
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('My Trips')),
body: ListView(
padding: const EdgeInsets.all(8),
children: [
Card(
child: ListTile(
leading: const Icon(Icons.flight),
title: const Text('Paris'),
subtitle: const Text('France, May 3'),
),
),
ListTile(
leading: const Icon(Icons.flight),
title: const Text('Kyoto'),
subtitle: const Text('Japan, June 12'),
),
ListTile(
leading: const Icon(Icons.flight),
title: const Text('Lima'),
subtitle: const Text('Peru, August 20'),
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت