Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 6: Layout เบื้องต้น — Row, Column และ Stack

🔖 หมวดบทเรียน: การจัดวางองค์ประกอบในหน้าจอด้วย 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