رصّ الودجات فوق بعضها
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 10 من 30.
يضع Column عناصره الفرعية واحدًا تحت الآخر، بينما يضع Row عناصره جنبًا إلى جنب. أما Stack فيضعها فوق بعضها، مثل أوراق على مكتب:
Stack(
children: [
Container(height: 200, color: Colors.grey),
const Text('On top'),
],
)يُرسَم العنصر الفرعي الأول أولًا، في الأسفل. ويُرسَم كل عنصر فرعي بعده فوق العناصر التي سبقته. لذا توضع الصورة أولًا، ثم التسمية التي تظهر عليها أخيرًا.
تبدأ العناصر الفرعية من الزاوية العلوية اليسرى لـ Stack، ويكون Stack بحجم أكبر عناصره الفرعية. وهكذا توضع شارة أو تسمية أو زر تشغيل على صورة.
التحدي
سهلتظهر شارة SALE أسفل الصورة. ضعها على الصورة: غيّر Column التي تضم العنصرين إلى Stack، بحيث تُرسم الشارة في المقدمة.
جرّب بنفسك
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('Shop')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Column(
children: [
Container(
height: 200,
color: Colors.blueGrey.shade100,
child: const Center(child: Icon(Icons.image, size: 64)),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.red,
child: const Text('SALE', style: TextStyle(color: Colors.white)),
),
],
),
const SizedBox(height: 12),
const Text('Running shoes', style: TextStyle(fontSize: 20)),
],
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تصميم يتكيف مع الشاشة
1التشارك في الصف
Expanded يملأ الصفمشاركة المساحة باستخدام flexFlexible يحتضن عنصره الفرعيSpacer يباعد بين العناصرتدرّب بنفسك: مترجم Flutter عبر الإنترنت