ฉันใช้ Flutter และฉันต้องการเพิ่มเส้นขอบให้กับวิดเจ็ต (ในกรณีนี้คือวิดเจ็ตข้อความ)

ฉันลอง TextStyle และ Text แต่ฉันไม่เห็นวิธีเพิ่มเส้นขอบ

คุณสามารถเพิ่มTextFieldเป็นchildไปContainerที่มีBoxDecorationกับborderทรัพย์สิน:

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

นี่คือคำตอบที่ขยาย A DecoratedBoxคือสิ่งที่คุณต้องเพิ่มเส้นขอบ แต่ฉันใช้Containerเพื่อความสะดวกในการเพิ่มระยะขอบและช่องว่างภายใน

นี่คือการตั้งค่าทั่วไป

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

ที่BoxDecorationเป็น

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

ความกว้างชายแดน

เหล่านี้มีความกว้างชายแดน1, 3และ10ตามลำดับ

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

สีเส้นขอบ

เหล่านี้มีสีเส้นขอบของ

• Colors.red
• Colors.blue
• Colors.green

รหัส

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

ขอบด้านข้าง

เหล่านี้มีด้านชายแดนของ

• ซ้าย (3.0), ด้านบน (3.0)
• ด้านล่าง (13.0)
• ซ้าย (สีน้ำเงิน [100], 15.0), ด้านบน (สีน้ำเงิน [300], 10.0), ขวา (สีน้ำเงิน [500], 5.0), ด้านล่าง (สีน้ำเงิน [800], 3.0)

รหัส

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

รัศมีชายแดน

เหล่านี้มีรัศมีชายแดน5, 10และ30ตามลำดับ

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

กำลังเกิดขึ้น

DecoratedBox/ BoxDecorationยืดหยุ่นมาก อ่านFlutter - BoxDecoration สูตรโกงสำหรับแนวคิดเพิ่มเติมมากมาย

ตามที่ระบุไว้ในเอกสารประกอบการกระพือชอบองค์ประกอบมากกว่าพารามิเตอร์ ส่วนใหญ่สิ่งที่คุณกำลังมองหาไม่ใช่ทรัพย์สิน แต่เป็นเสื้อคลุม (และบางครั้งก็เป็นผู้ช่วย / "ผู้สร้าง")

สำหรับเส้นขอบสิ่งที่คุณต้องการคือDecoratedBoxซึ่งมีdecorationคุณสมบัติที่กำหนดเส้นขอบ แต่ยังมีภาพพื้นหลังหรือเงา

หรืออีกทางหนึ่งเช่น @Aziza Containerกล่าวว่าคุณสามารถใช้ ซึ่งเป็นส่วนผสมของDecoratedBox, SizedBoxและไม่กี่เครื่องมือที่มีประโยชน์อื่น ๆ

วิธีที่ดีที่สุดคือใช้ BoxDecoration ()

ความได้เปรียบ

• คุณสามารถกำหนดขอบเขตของวิดเจ็ต
• คุณสามารถกำหนดเส้นขอบสีหรือความกว้าง
• คุณสามารถตั้งค่ามุมโค้งมนของเส้นขอบ
• คุณสามารถเพิ่มเงาของวิดเจ็ต

ข้อเสียเปรียบ

• BoxDecorationใช้กับContainerวิดเจ็ตเท่านั้นดังนั้นคุณจึงต้องการห่อวิดเจ็ตของคุณContainer()
  
  

ตัวอย่าง

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

การใช้ BoxDecoration () เป็นวิธีที่ดีที่สุดในการแสดงเส้นขอบ

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

คุณสามารถดูรูปแบบเต็มได้ที่นี่

คุณสามารถใช้ Container เพื่อบรรจุวิดเจ็ตของคุณ:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

ใช้ภาชนะที่มี Boxdercoration

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );