Flutter - สถาปัตยกรรมประยุกต์

ในบทนี้ให้เราพูดถึงสถาปัตยกรรมของเฟรมเวิร์ก Flutter

วิดเจ็ต

แนวคิดหลักของ Flutter framework คือ In Flutter, Everything is a widget. วิดเจ็ตเป็นส่วนประกอบส่วนติดต่อผู้ใช้โดยทั่วไปที่ใช้ในการสร้างส่วนต่อประสานผู้ใช้ของแอปพลิเคชัน

ในFlutterแอปพลิเคชันเป็นวิดเจ็ต แอปพลิเคชันเป็นวิดเจ็ตระดับบนสุดและ UI ของมันถูกสร้างโดยใช้ลูก (วิดเจ็ต) หนึ่งลูกขึ้นไปซึ่งสร้างอีกครั้งโดยใช้วิดเจ็ตลูกของมัน นี้composability คุณลักษณะนี้ช่วยให้เราสร้างส่วนต่อประสานผู้ใช้ที่มีความซับซ้อน

ตัวอย่างเช่นลำดับชั้นวิดเจ็ตของแอปพลิเคชัน hello world (สร้างในบทก่อนหน้า) เป็นไปตามที่ระบุในแผนภาพต่อไปนี้ -

ประเด็นต่อไปนี้น่าสังเกต -

• แอปของฉันเป็นผู้ที่สร้างเครื่องมือและมันเป็นสร้างโดยใช้เครื่องมือพื้นเมืองกระพือ, MaterialApp

• MaterialAppมีคุณสมบัติที่บ้านเพื่อระบุส่วนติดต่อผู้ใช้ของหน้าบ้านซึ่งเป็นอีกครั้งที่ผู้ใช้สร้างเครื่องมือMyHomePage

• MyHomePageสร้างขึ้นโดยใช้วิดเจ็ตเนทีฟอื่นที่กระพือปีกScaffold

• Scaffoldมีสองคุณสมบัติ - ร่างกายและappBar

• bodyใช้เพื่อระบุส่วนติดต่อผู้ใช้หลักและappBarใช้เพื่อระบุส่วนติดต่อผู้ใช้ส่วนหัว

• ส่วนหัว UIถูกสร้างโดยใช้วิดเจ็ตเนทีฟที่กระพือ AppBarและBody UIสร้างโดยใช้วิดเจ็ตCenter

• ศูนย์เครื่องมือมีคุณสมบัติเด็กซึ่งหมายเนื้อหาจริงและเป็นที่สร้างโดยใช้ข้อความวิดเจ็ต

ท่าทาง

กระพือวิดเจ็ตปฏิสัมพันธ์ผ่านการสนับสนุนเครื่องมือพิเศษGestureDetector GestureDetectorเป็นวิดเจ็ตที่มองไม่เห็นซึ่งมีความสามารถในการจับการโต้ตอบของผู้ใช้เช่นการแตะการลาก ฯลฯ ของวิดเจ็ตลูก เครื่องมือพื้นเมืองจำนวนมากของการปฏิสัมพันธ์สนับสนุนกระพือผ่านการใช้GestureDetector นอกจากนี้เรายังสามารถรวมคุณลักษณะแบบโต้ตอบลงในวิดเจ็ตที่มีอยู่ได้ด้วยการเขียนด้วยวิดเจ็ตGestureDetector เราจะเรียนรู้ท่าทางแยกกันในบทที่กำลังจะมาถึง

แนวคิดของรัฐ

เครื่องมือ Flutter สนับสนุนการบำรุงรักษาของรัฐโดยการให้เครื่องมือพิเศษStatefulWidget Widget ความต้องการที่จะได้รับจากStatefulWidgetเครื่องมือที่จะบำรุงรักษารัฐสนับสนุนและเครื่องมืออื่น ๆ ที่ทุกคนควรจะได้รับจากStatefulWidget วิดเจ็ต Flutter คือreactiveในภาษาพื้นเมือง สิ่งนี้คล้ายกับ reactjs และStatefulWidgetจะแสดงผลอัตโนมัติเมื่อใดก็ตามที่สถานะภายในมีการเปลี่ยนแปลง การเรนเดอร์ได้รับการปรับให้เหมาะสมโดยการค้นหาความแตกต่างระหว่าง UI วิดเจ็ตเก่าและใหม่และการแสดงผลเฉพาะการเปลี่ยนแปลงที่จำเป็น

เลเยอร์

แนวคิดที่สำคัญที่สุดของ Flutter framework คือเฟรมเวิร์กถูกจัดกลุ่มออกเป็นหลายประเภทในแง่ของความซับซ้อนและจัดเรียงอย่างชัดเจนในชั้นของความซับซ้อนที่ลดลง เลเยอร์กำลังสร้างโดยใช้เลเยอร์ระดับถัดไปทันที ด้านบนชั้นส่วนใหญ่เป็นเครื่องมือที่เฉพาะเจาะจงกับAndroidและiOS เลเยอร์ถัดไปมีวิดเจ็ตเนทีฟที่กระพือปีกทั้งหมด เลเยอร์ถัดไปคือเลเยอร์การแสดงผลซึ่งเป็นส่วนประกอบของเรนเดอร์ระดับต่ำและแสดงผลทุกอย่างในแอปพลิเคชัน Flutter เลเยอร์ลงไปที่โค้ดเฉพาะแพลตฟอร์มหลัก

ภาพรวมทั่วไปของเลเยอร์ใน Flutter ระบุไว้ในแผนภาพด้านล่าง -

ประเด็นต่อไปนี้สรุปสถาปัตยกรรมของ Flutter -

• ใน Flutter ทุกอย่างเป็นวิดเจ็ตและวิดเจ็ตที่ซับซ้อนประกอบด้วยวิดเจ็ตที่มีอยู่แล้ว

• สามารถรวมคุณสมบัติแบบโต้ตอบได้ทุกเมื่อที่จำเป็นโดยใช้วิดเจ็ตGestureDetector

• สามารถรักษาสถานะของวิดเจ็ตได้ทุกเมื่อที่จำเป็นโดยใช้วิดเจ็ตStatefulWidget

• Flutter นำเสนอการออกแบบเลเยอร์เพื่อให้สามารถตั้งโปรแกรมเลเยอร์ใดก็ได้ขึ้นอยู่กับความซับซ้อนของงาน

เราจะพูดถึงแนวคิดทั้งหมดนี้โดยละเอียดในบทต่อ ๆ ไป