جارٍ تحميل الدرس...
في نافذة الطباعة اختر «حفظ كملف PDF» كوجهة.
نظم التشغيل 2 - المعمل 3
عادات تصحيح الأخطاء، وعرض الصور، وبنية StatelessWidget، وعناصر التخطيط الأساسية
StackOverflow ومحركات البحث توفر وقتا حقيقياRenderFlex overflowedMaterialAppScaffoldMaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('My First App')),
body: Center(child: Text('Hello, Flutter!')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
)Image.networkURL، مع إمكانية تحديد العرض/الارتفاعImage.assetflutter:
assets:
- images/logo.pngStatelessWidgetStatelessWidget دالة build ترجع شجرة عناصرهmain.dart
MaterialApp
HomeScreen
home:
home_screen.dart
StatelessWidget
Scaffold
عناصر الـ Body
Margin
المساحة خارج حد عنصر الواجهة
Padding
المساحة داخل الحد، حول المحتوى
المحتوى الفرعي
Padding المستقل عندما تحتاج مسافة دون لون أو حدودCenter العنصر الابن صراحة داخل والدهContainer(
margin: EdgeInsets.all(20),
padding: EdgeInsets.all(16),
child: Text('I have margin and padding!'),
)RowColumnRow(
children: [
Icon(Icons.star, color: Colors.amber),
Icon(Icons.star, color: Colors.amber),
Icon(Icons.star_border, color: Colors.amber),
],
)mainAxisAlignment| القيمة | التأثير |
|---|---|
MainAxisAlignment.start | تجميع العناصر عند البداية (الافتراضي) |
MainAxisAlignment.center | توسيط العناصر على طول المحور |
MainAxisAlignment.end | تجميع العناصر عند النهاية |
MainAxisAlignment.spaceBetween | مسافة متساوية بين العناصر، بدون مسافة عند الأطراف |
MainAxisAlignment.spaceEvenly | مسافة متساوية بين العناصر وحولها |
MainAxisAlignment.spaceAround | نصف مسافة عند الأطراف، ومسافة كاملة بين العناصر |
crossAxisAlignmentSafeAreaMaterialApp مع Scaffold الهيكل القياسي للشاشة؛ وتحمل الصور عبر Image.network أو Image.assetStatelessWidget، صنف واحد لكل ملف، للحفاظ على قابلية صيانة الكودRow وColumn عدة عناصر أبناء؛ ويتحكم mainAxisAlignment/crossAxisAlignment في تباعدهاSafeArea المحتوى بعيدا عن النوتشات وعناصر واجهة النظامMahmoud Abas|المعمل: أساسيات واجهات Flutter، التخطيطات، وتنظيم الكود