🔖 หมวดบทเรียน: การจัดวางองค์ประกอบในหน้าจอด้วย Layout Widget
📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการจัดเรียงหลาย widget บนหน้าจออย่างเป็นระบบ
🎯 เป้าหมาย: เข้าใจการใช้ Row, Column และ Stack เพื่อจัดวาง widget แนวตั้ง แนวนอน และซ้อนทับ
🧭 เกริ่นนำ
Layout เป็นสิ่งสำคัญในแอป Flutter เพราะช่วยจัดตำแหน่งของ widget หลายตัวให้แสดงผลในหน้าจออย่างถูกต้อง บทนี้จะแนะนำ widget layout เบื้องต้น 3 ตัว คือ Row
, Column
และ Stack
ซึ่งเป็นพื้นฐานในการจัดวาง UI ไม่ว่าจะเป็นแอปเล็กหรือแอปใหญ่
➕ Column (แนวตั้ง)
Column(
children: [
Text("บนสุด"),
Text("กลาง"),
Text("ล่างสุด"),
],
)
ใช้จัดวาง widget จากบนลงล่าง
➡️ Row (แนวนอน)
Row(
children: [
Icon(Icons.star),
Text("รายการ 1"),
Text("รายการ 2"),
],
)
ใช้จัดวาง widget จากซ้ายไปขวา
🔁 Stack (ซ้อนกัน)
Stack(
children: [
Container(width: 100, height: 100, color: Colors.red),
Positioned(
top: 10,
left: 10,
child: Text("ซ้อนบน"),
),
],
)
ใช้วาง widget ซ้อนทับกัน เหมาะสำหรับ UI ที่ต้องการองค์ประกอบทับกัน เช่น แสดงข้อความบนภาพ
🧪 ตัวอย่างรวม
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Layout เบื้องต้น")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.settings),
],
),
SizedBox(height: 20),
Stack(
alignment: Alignment.center,
children: [
Container(width: 120, height: 120, color: Colors.orange),
Text("กลางภาพ", style: TextStyle(color: Colors.white)),
],
),
],
),
),
);
}
}
✅ สรุป
Column
ใช้จัดเรียง widget ในแนวตั้งRow
ใช้จัดเรียง widget ในแนวนอนStack
ใช้ซ้อน widget หลายตัวซ้อนกันในตำแหน่งเดียว
ในบทถัดไปเราจะเรียนรู้การโต้ตอบกับผู้ใช้ผ่านปุ่มต่าง ๆ และการตรวจจับ gesture ด้วย Button
และ GestureDetector