Border naudojimo vadovas Flutter

Programuojant Flutter Border naudojimas yra esminė dalis kuriant gerai apibrėžtus UI elementų kontūrus. Kraštinė leidžia sukurti tinkintus elementų, pvz., vaizdų, konteinerių ir mygtukų, kontūrus. Šiame straipsnyje išnagrinėsime, kaip naudoti kraštinę, kad sukurtumėte programos elementų kontūrus Flutter.

Pagrindinė siena

Galite naudoti Border klasę norėdami sukurti kraštinę konkrečiam widget. Toliau pateikiamas stačiakampio kraštinės kūrimo pavyzdys:

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  
 ),  
)  

Sienos iš skirtingų pusių

Taip pat galite tinkinti kiekvienos pusės kraštinę 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  
   ),  
 ),  
)  

Krašto pritaikymas naudojant Radius

BorderRadius Norėdami suapvalinti kraštinės kampus, galite naudoti:

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  
 ),  
)  

Derinama su BoxDecoration

Galite derinti naudojimą Border su ir BoxDecoration sukurti sudėtingesnius kraštinių efektus ir formas.

 

Išvada:

„Border“ naudojimas Flutter yra veiksmingas būdas sukurti tinkintus NS elementų kontūrus. Tinkindami kraštinės plotį, spalvą ir kampus, galite sukurti unikalias ir patrauklias sąsajas savo programai.