จัดระเบียบวิดเจ็ตหลายตัวบนหน้าจอด้วยคอลัมน์ แถว ช่องว่าง และการกระจายพื้นที่
เปิดบทเรียนนี้ใน Kodokonหน้าจอจริงมักไม่ค่อยแสดงวิดเจ็ตเพียงตัวเดียว: คุณต้อง จัดระเบียบ พวกมัน นั่นคือหน้าที่ของวิดเจ็ตเลย์เอาต์ Column เรียงลูกของมัน ในแนวตั้ง จากบนลงล่าง; Row จัดเรียงพวกมัน ในแนวนอน จากซ้ายไปขวา เนื่องจากพวกมันรับลูกได้หลายตัว พารามิเตอร์จึงไม่ได้ชื่อ child อีกต่อไป แต่ชื่อ children และมันรับ รายการ (list): วิดเจ็ตที่อยู่ในวงเล็บเหลี่ยม [ ] คั่นด้วยจุลภาค
import 'package:flutter/material.dart';
Widget buildProfile() {
return const Column(
children: [
Icon(Icons.person, size: 48),
Text("Sonia Ben Ali"),
Text("Flutter Developer"),
],
);
}Row ทำงานเหมือนกันเป๊ะ แต่ในแนวนอน แกนหลัก (main axis) ของมันคือความกว้าง: พารามิเตอร์ mainAxisAlignment เลือกว่าจะกระจายลูกไปตามแกนนั้นอย่างไร (center เพื่อจัดกลุ่มพวกมันไว้ตรงกลาง, spaceBetween เพื่อกระจายพวกมันให้ห่างกันมากที่สุด...) และในการแทรกช่องว่างเปล่า ๆ ธรรมดาระหว่างวิดเจ็ตสองตัว ให้ใช้ SizedBox: กล่องที่มองไม่เห็นซึ่งคุณกำหนดความกว้าง (width) หรือความสูง (height) ของมัน
import 'package:flutter/material.dart';
Widget buildRating() {
return const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.star, color: Colors.amber),
SizedBox(width: 8),
Text("4.8 out of 5"),
],
);
}Padding เพิ่มช่องว่าง รอบ ๆ ลูกของมัน เพื่อไม่ให้เนื้อหาติดกับขอบ ปริมาณของช่องว่างอธิบายด้วย EdgeInsets: EdgeInsets.all(16) ใส่ 16 พิกเซลทั้งสี่ด้าน, EdgeInsets.only(left: 8) เฉพาะด้านซ้าย และ EdgeInsets.symmetric(horizontal: 12) ทั้งด้านซ้ายและขวาพร้อมกัน
import 'package:flutter/material.dart';
Widget buildQuote() {
return const Padding(
padding: EdgeInsets.all(16),
child: Text("A text with some room around it"),
);
}เครื่องมือชิ้นสุดท้าย: Expanded เมื่อวางไว้ในหมู่ลูกของ Row หรือ Column มันจะสั่งให้ลูกของมัน ใช้พื้นที่ที่เหลือทั้งหมด ในตัวอย่างด้านล่าง กล่องสีเทายังคงความกว้าง 80 พิกเซลของมันไว้ ส่วนกล่องสีน้ำเงินอมเขียวจะยืดออกเพื่อเติมเต็มความกว้างส่วนที่เหลือ ไม่ว่าหน้าจอจะมีขนาดเท่าใด
import 'package:flutter/material.dart';
Widget buildProgress() {
return Row(
children: [
Container(width: 80, height: 40, color: Colors.grey),
Expanded(
child: Container(height: 40, color: Colors.teal),
),
],
);
}