คู่มือการใช้เส้นขอบใน Flutter

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

เส้นขอบพื้นฐาน

คุณสามารถใช้ Border คลาสเพื่อสร้างเส้นขอบสำหรับไฟล์ widget. ด้านล่างนี้คือตัวอย่างการสร้างเส้นขอบให้กับสี่เหลี่ยมผืนผ้า:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border.all(width: 2.0, color: Colors.blue), // Create a border with width 2 and blue color  
 ),  
)  

เส้นขอบด้านต่างๆ

คุณยังสามารถปรับแต่งเส้นขอบสำหรับแต่ละด้านของ widget:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border(  
      left: BorderSide(width: 2.0, color: Colors.red),   // Left border  
      right: BorderSide(width: 2.0, color: Colors.green), // Right border  
      top: BorderSide(width: 2.0, color: Colors.blue),    // Top border  
      bottom: BorderSide(width: 2.0, color: Colors.yellow),// Bottom border  
   ),  
 ),  
)  

ปรับแต่งเส้นขอบด้วย Radius

คุณสามารถใช้ BorderRadius เพื่อปัดมุมของเส้นขอบ:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border.all(width: 2.0, color: Colors.blue),  
    borderRadius: BorderRadius.circular(10.0), // Round corners with a radius of 10  
 ),  
)  

ผสมผสานกับการตกแต่งกล่อง

คุณสามารถรวมการใช้ Border with BoxDecoration เพื่อสร้างเอฟเฟ็กต์และรูปร่างเส้นขอบที่ซับซ้อนมากขึ้นได้

 

บทสรุป:

การใช้ Border in Flutter เป็นวิธีที่มีประสิทธิภาพในการสร้างโครงร่างที่กำหนดเองสำหรับองค์ประกอบ UI ของคุณ การปรับแต่งความกว้าง สี และมุมของเส้นขอบ คุณสามารถสร้างอินเทอร์เฟซที่ไม่ซ้ำใครและน่าสนใจสำหรับแอปพลิเคชันของคุณได้