คู่มือการใช้งาน Padding ใน Flutter

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

การใช้งานพื้นฐาน

Padding ใช้โดยการล้อมที่ widget คุณต้องการเพิ่มระยะห่าง ด้านล่างนี้เป็นวิธีที่คุณสามารถใช้ Padding เพื่อเพิ่ม padding รอบ widget:

Padding(
  padding: EdgeInsets.all(16.0), // Adds 16 points of padding around the child widget  
  child: YourWidgetHere(),  
)  

ปรับแต่งระยะห่าง

คุณสามารถปรับแต่งระยะห่างสำหรับแต่ละด้าน(ซ้าย ขวา บน ล่าง แนวตั้ง แนวนอน) โดยใช้คุณสมบัติ EdgeInsets:

Padding(
  padding: EdgeInsets.only(left: 10.0, right: 20.0), // Adds 10 points of padding on the left and 20 points on the right  
  child: YourWidgetHere(),  
)  

Padding(
  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), // Adds vertical and horizontal padding  
  child: YourWidgetHere(),  
)  

ผสมผสานกับเค้าโครง

Padding มักใช้เพื่อปรับระยะห่างระหว่างวิดเจ็ตในเค้าโครง เช่น Column, Row, ListView เป็นต้น

Column(  
  children: [  
    Padding(  
      padding: EdgeInsets.only(bottom: 10.0),  
      child: Text('Element 1'),  
   ),  
    Padding(  
      padding: EdgeInsets.only(bottom: 10.0),  
      child: Text('Element 2'),  
   ),  
    // ...  
  ],  
)  

ความยืดหยุ่นกับขนาด

Padding ไม่เพียงแต่เพิ่มระยะห่าง แต่ยังสามารถสร้างเอฟเฟกต์ที่คล้ายกับระยะขอบได้อีกด้วย เวลาใช้งาน Padding ไม่กระทบกับพื้นที่ภายนอก widget ของ

 

บทสรุป:

Padding เป็นเครื่องมือที่มีประโยชน์ในการสร้างระยะห่างและปรับตำแหน่งขององค์ประกอบใน Flutter UI ของคุณ เมื่อใช้ Padding คุณสามารถสร้างเค้าโครงที่น่าดึงดูดใจและมีโครงสร้างที่ดีสำหรับแอปพลิเคชันของคุณ