ໝາຍເຫດ: ກະທູ້ນີ້ຈະເປັນກະທູ້ທີ່ຈະມີການອັບເດດເລື້ອຍໆ ເນື່ອງຈາກຈະໄດ້ໃຊ້ສະເພາະເວລາວ່າງຂຽນ ແລະ ໃຊ້ເວລາໃນການຂຽນດົນໜ້ອຍໜຶ່ງ.
ໃນສ່ວນຂອງ Layout ນີ້ຈະຂໍແບ່ງອອກເປັນ 2 ໝວດໃຫຍ່ຕາມໃຈເຈົ້າຂອງກະທູ້ເລີຍເນາະກະຄື:
- Non-Scrollable (ເລື່ອນຂຶ້ນລົງ ຊ້າຍຂວາ ບໍ່ໄດ້)
- Scrollable (ເລື່ອນຂຶ້ນລົງ ຊ້າຍຂວາ ໄດ້)
ສ່ວນແບບແຕ່ລະແບບຂອງ Layout ຈະມີຫຼັກໆດັ່ງນີ້:
- Row / Col
- Baseline
- Stack
- Expanded
- Padding
- PageView
- List
- Silvers
- Hero
- Nested
ສໍາລັບ Layout ທໍາອິດຈະເປັນແບບ Non-Scrollable - Row / Col
Code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("This",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 250, 50, 0))),
Text(" Is",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(200, 0, 255, 0))),
Text(" a",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 255, 50, 0))),
Text(" Row",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 0, 0, 255))),
InkWell(
child: Text(
" change to column",
style: TextStyle(
fontSize: 24.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),),
onTap: () {},
)
],
)
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("This",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 250, 50, 0))),
Text(" Is",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(200, 0, 255, 0))),
Text(" a",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 255, 50, 0))),
Text(" Col",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 0, 0, 255))),
InkWell(
child: Text(
" change to Row",
style: TextStyle(
fontSize: 24.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),),
onTap: () {},
)
],
)
ຈາກ code ທັງ 2 ແບບ ດ້ານເທິງ ຈຂກທ ຂໍອະທິບາຍວ່າ:
ໃຫ້ແຕ່ລະຄົນຄິດໃສ່ກັບເວລາເຮົາສ້າງ row ກັບ col ຂອງ html ທີ່ເຮົາຕ້ອງເປີດ
<div>
<Row></Row>
<Col></Col>
</div>
ຕ່າງແຕ່ວ່າອັນນີ້ເຮົາເປີດ Row ເທື່ອດຽວ ແລ້ວເຮົາມາເພີ່ມສິ່ງທີ່ເຮົາຕ້ອງການຈະເພີ່ມໃສ່ໃນ children ຕົວຢ່າງທີ່ ຈຂກທ ເຮັດດ້ານເທິງ
ເລື່ອງຕໍ່ມາແມ່ນ properties ຂອງ Row ແລະ Column ຂອງ flutter ຈະຂໍອະທິບາຍແບ່ງດັ່ງນີ້:
Row:
1. mainAxisAlignment (ແມ່ນການ alignment ຕາມລວງນອນ ເຊິ່ງຈະມີ MainAxisAlignment ແບບ
center, start, end, spaceAround, spaceEvenly, spaceBetween) ໝາຍຄວາມວ່າຖ້າໃຊ້
MainAxisAligment.start ແມ່ນທຸກໆຢ່າງໃນ children ຈະຖືກຫຍັງຂຶ້ນໄປຢູ່ດ້ານເທິງ ຖ້າບໍ່ເຂົ້າໃຈເບິ່ງຮູບດ້ານລຸ່ມ ຫະຫະ
2. crossAxisAlignment (ແມ່ນການ alignment ຕາມລວງຕັ້ງ ເຊິ່ງຈະມີ crossAxisAlignment ແບບ
center, start, end, baseline, stretch)
Column:
ສະຫຼັບກັນກັບ Row ກະຄື main = ລວງຕັ້ງ, Cross = ລວງນອນ. ສ່ວນ ການ align ຕ່າງໆຈະຮັບຄືກັນກັບຂອງ Row ໝົດ ບໍ່ວ່າຈະເປັນ mainAxisAlignment ຫຼຶ crossAxisAlignment
ປລ. code ທັງໝົດ complete app ຖ້າຢາກໃຫ້ມີ comment ບອກໄດ້ເລີຍເດີ້ ເພາະຫຼັງຈາກເຮັດຈົບທັງໝົດຈະປ່ອຍຂຶ້ນ github
