ทุกอย่างคือวิดเจ็ต: Text, Container และ Icon

ทำความเข้าใจแนวคิดหลักของ Flutter นั่นคือต้นไม้วิดเจ็ต ผ่านสามชิ้นส่วนพื้นฐาน: Text, Container และ Icon

8 นาที · 3 คำถาม

ใน Flutter ทุกอย่างคือวิดเจ็ต วิดเจ็ต (widget) คือชิ้นส่วนของส่วนติดต่อผู้ใช้: คำอธิบายของชิ้นส่วนหนึ่งของสิ่งที่ปรากฏบนหน้าจอ ข้อความคือวิดเจ็ต ไอคอนคือวิดเจ็ต ช่องว่างก็เป็นวิดเจ็ต... และทั้งหน้าจอก็เช่นกัน! ในการสร้างส่วนติดต่อผู้ใช้ คุณ ซ้อน วิดเจ็ตเข้าไปในกันและกัน เหมือนตุ๊กตาแม่ลูกดกของรัสเซีย เมื่อรวมกันแล้วมันจะกลายเป็น ต้นไม้วิดเจ็ต (widget tree): วิดเจ็ตแต่ละตัวมี แม่ (parent) (ตัวที่บรรจุมันไว้) และบางครั้งก็มี ลูก (children) (ตัวที่มันบรรจุไว้) มาย้อนดูโปรแกรมขั้นต่ำของเราและมองต้นไม้ของมันกัน

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(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

จากบนลงล่าง: MaterialApp ตั้งค่าแอปทั้งหมด (ธีม การนำทาง) ตามหลัก Material 3 ภาษาภาพของ Google Scaffold (แปลตรงตัวว่า "นั่งร้าน") ให้โครงสร้างของหน้าจอ: พื้นหลัง แถบหัวเรื่องที่จะมีหรือไม่มีก็ได้... Center จัดลูกของมันให้อยู่กึ่งกลาง และ Text แสดงข้อความ พารามิเตอร์ style ของ Text รับ TextStyle ที่กำหนดขนาด (fontSize) สี หรือความหนาของตัวอักษร ทีนี้มาทำความรู้จัก Container กล่องสารพัดประโยชน์: สี่เหลี่ยมที่คุณควบคุมขนาด สี และเนื้อหาของมันได้

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

ฟังก์ชัน buildYellowBox คืนค่าวิดเจ็ต: การแบ่งส่วนติดต่อผู้ใช้แบบนี้ออกเป็นชิ้นเล็ก ๆ ที่มีชื่อ เป็นแนวปฏิบัติที่พบได้ทั่วไปมาก Container นี้กว้าง 200 พิกเซล สูง 100 ระบายตัวเองเป็นสีเหลืองอำพันด้วยคลังสี Colors และบรรจุข้อความที่จัดกึ่งกลางไว้ ชิ้นส่วนพื้นฐานชิ้นที่สาม: Icon ซึ่งแสดง สัญรูป (pictogram) Flutter มาพร้อมไอคอนสำเร็จรูปนับร้อยในคลัง Icons: ดาว หัวใจ บ้าน...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

จำตรรกะของต้นไม้ไว้: เมื่อวิดเจ็ตรับลูกได้ เพียงตัวเดียว พารามิเตอร์จะชื่อ child (ซึ่งเป็นกรณีของ Center และ Container) ในตัวอย่างแรกของเรา Scaffold เป็นแม่ของ Center ซึ่งเป็นแม่ของ Text Flutter วาดหน้าจอด้วยการเดินไล่ต้นไม้นี้จากบนลงล่าง หากคุณบอกได้ว่าใครเป็นแม่ของใคร คุณก็อ่านส่วนติดต่อผู้ใช้ของ Flutter ใดก็ได้

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ใน Flutter วิดเจ็ตคืออะไร?
   • ชิ้นส่วนของส่วนติดต่อผู้ใช้ที่อธิบายชิ้นส่วนหนึ่งของหน้าจอ
   • ไฟล์ตั้งค่าของโปรเจกต์
   • ฐานข้อมูลที่ติดตั้งมาในโทรศัพท์
2. คุณใช้วิดเจ็ตใดเพื่อแสดงสัญรูปอย่างเช่นดาว?
   • Text
   • Container
   • Icon
3. ใน Center(child: Text("Hi")) วิดเจ็ตใดเป็นแม่?
   • Text เพราะมันถูกเขียนไว้ท้ายสุด
   • Center เพราะมันบรรจุ Text ไว้ผ่านพารามิเตอร์ child ของมัน
   • ไม่ใช่ทั้งคู่: วิดเจ็ตสองตัวเป็นอิสระต่อกัน