Flutter: ขยายและยืดหยุ่น

ฉันใช้ทั้งสองExpandedและFlexibleวิดเจ็ตและดูเหมือนว่าจะใช้งานได้เหมือนกัน มีความแตกต่างระหว่างสองสิ่งที่ฉันพลาดหรือไม่?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded เป็นเพียงการจดชวเลข Flexible

การใช้ขยายด้วยวิธีนี้:

Expanded(
  child: Foo(),
);

เทียบเท่าอย่างเคร่งครัดกับ:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

คุณอาจต้องการที่จะใช้Flexibleมากกว่าExpandedเมื่อคุณต้องการที่แตกต่างกันfitที่มีประโยชน์ในรูปแบบที่ตอบสนองต่อบาง

ความแตกต่างระหว่างFlexFit.tightและFlexFit.looseคือการหลวมจะทำให้ลูกมีขนาดสูงสุดในขณะที่บังคับให้เด็กคนนั้นเต็มพื้นที่ที่มี

วิดเจ็ตภายใต้ความยืดหยุ่นเป็นค่าเริ่มต้นWRAP_CONTENTแม้ว่าคุณจะสามารถเปลี่ยนได้โดยใช้พารามิเตอร์ Fit

Widget ภายใต้การขยายตัวเป็นMATCH_PARENTคุณสามารถเปลี่ยนได้โดยใช้ดิ้น

Expanded- เข้าFlexibleกับชุด

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

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

ในขณะเดียวกันการขยายการเปลี่ยนแปลงข้อ จำกัด ที่ส่งไปยังเด็กของแถวและคอลัมน์ ; ช่วยเติมเต็มช่องว่างตรงนั้น ดังนั้นเมื่อคุณรวมลูกของคุณไว้ในวิดเจ็ตที่ขยายออกมันจะเติมช่องว่างให้เต็ม

ให้วิดีโอเหล่านี้จากช่อง YouTube อย่างเป็นทางการของ Flutterเพื่อช่วยเหลือผู้คนที่อาจมองหาสิ่งนี้ในอนาคต ...

1. ขยาย:

2. ยืดหยุ่น:

Expanded () ไม่มีอะไรมากไปกว่า Flexible () ด้วย

Flexible (fit: FlexFit.tight) = Expanded()

แต่การใช้งานที่ยืดหยุ่นfit :FlexFit.looseโดยค่าเริ่มต้น

FlexFit.tight = ต้องการให้พอดีกับผู้ปกครองโดยใช้พื้นที่ให้มากที่สุด

FlexFit.loose = ต้องการให้พอดีกับผู้ปกครองโดยใช้พื้นที่น้อยที่สุดสำหรับตัวเอง

ข้อแตกต่างเพียงอย่างเดียวถ้าคุณใช้FlexibleแทนExpandedคือFlexibleปล่อยให้ลูกมีความกว้างเท่ากันหรือเล็กกว่าFlexibleตัวมันเองในขณะที่Expandedบังคับให้ลูกมีความกว้างเท่ากันExpandedทุกประการของ. แต่ทั้งสองExpandedและFlexibleไม่สนใจความกว้างของเด็กเมื่อปรับขนาดตัวเอง

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

หมายเหตุ : หมายความว่าไม่สามารถขยายRowเด็กได้ตามสัดส่วนของขนาด แถวทั้งการใช้ความกว้างของเด็กที่แน่นอนหรือละเว้นมันสมบูรณ์เมื่อคุณใช้หรือExpandedFlexible