เทียบเท่ากับ wrap_content และ match_parent ใน flutter?

ใน Android match_parentและwrap_contentใช้เพื่อปรับขนาดวิดเจ็ตโดยอัตโนมัติโดยสัมพันธ์กับพาเรนต์กับเนื้อหาที่วิดเจ็ตมี

ใน Flutter ดูเหมือนว่าโดยค่าเริ่มต้นวิดเจ็ตทั้งหมดถูกตั้งค่าเป็นwrap_contentฉันจะเปลี่ยนวิดเจ็ตเพื่อเติมเต็มwidthและheightของพาเรนต์ได้อย่างไร

คุณสามารถทำได้ด้วยเคล็ดลับเล็ก ๆ น้อย ๆ : สมมติว่าคุณมีข้อกำหนดของ: (กว้าง, สูง)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

เพื่อให้ได้รับพฤติกรรมmatch_parentและwrap_contentเราจำเป็นต้องใช้mainAxisSizeคุณสมบัติในแถว / คอลัมน์เครื่องมือที่mainAxisSize คุณสมบัติใช้เวลาMainAxisSize enum มีสองค่าซึ่งเป็น MainAxisSize.minซึ่งทำงานเป็นwrap_contentและMainAxisSize.max ซึ่งทำงานเป็นmatch_parent

ลิงก์ของบทความต้นฉบับ

คำตอบสั้น ๆ คือพ่อแม่ไม่มีขนาดจนกว่าลูกจะมีขนาด

วิธีการทำงานของเลย์เอาต์ใน Flutter คือแต่ละวิดเจ็ตมีข้อ จำกัด ให้กับลูก ๆ แต่ละตัวเช่น "คุณกว้างได้ขนาดนี้คุณต้องสูงขนาดนี้คุณต้องกว้างอย่างน้อยขนาดนี้" หรืออะไรก็ตาม (โดยเฉพาะอย่างยิ่ง รับความกว้างขั้นต่ำความกว้างสูงสุดความสูงต่ำสุดและความสูงสูงสุด) เด็กแต่ละคนรับข้อ จำกัด เหล่านั้นทำบางสิ่งและเลือกขนาด (ความกว้างและความสูง) ที่ตรงกับข้อ จำกัด เหล่านั้น จากนั้นเมื่อเด็กแต่ละคนทำเสร็จแล้ววิดเจ็ตสามารถเลือกขนาดของตัวเองได้

บางวิดเจ็ตพยายามให้ใหญ่เท่าที่พาเรนต์อนุญาต วิดเจ็ตบางตัวพยายามให้มีขนาดเล็กที่สุดเท่าที่พาเรนต์อนุญาต วิดเจ็ตบางตัวพยายามจับคู่ขนาด "ธรรมชาติ" ที่แน่นอน (เช่นข้อความรูปภาพ)

วิดเจ็ตบางตัวบอกเด็ก ๆ ว่าสามารถมีขนาดใดก็ได้ที่ต้องการ บางคนให้ข้อ จำกัด เดียวกับที่พวกเขาได้รับจากพ่อแม่ของพวกเขา

มีตัวเลือกบางอย่างให้เลือก:

คุณสามารถใช้ SizedBox.expand เพื่อทำให้วิดเจ็ตของคุณตรงกับมิติข้อมูลผู้ปกครองหรือ SizedBox (width: double.infinity) เพื่อจับคู่เฉพาะความกว้างหรือ SizedBox (heigth: double.infinity) เพื่อจับคู่เฉพาะความสูงเท่านั้น

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

ด้วย ListView ปุ่มจะได้รับพฤติกรรม match_parent และเพื่อให้ได้พฤติกรรม wrap_content คุณสามารถรวมกับวิดเจ็ต Flex เช่น Row

การใช้วิดเจ็ตแบบขยายจะทำให้ลูกของ Row, Column หรือ Flex ขยายเพื่อเติมเต็มพื้นที่ว่างในแกนหลัก (เช่นแนวนอนสำหรับแถวหรือแนวตั้งสำหรับคอลัมน์) https://docs.flutter.io/flutter/widgets/Expanded-class.html

การใช้วิดเจ็ตแบบยืดหยุ่นช่วยให้ลูกของแถวคอลัมน์หรือยืดหยุ่นยืดหยุ่นในการขยายเพื่อเติมเต็มพื้นที่ว่างในแกนหลัก (เช่นในแนวนอนสำหรับแถวหรือแนวตั้งสำหรับคอลัมน์) แต่ไม่เหมือนกับการขยายความยืดหยุ่นไม่ได้ ต้องการให้เด็กเติมเต็มพื้นที่ว่าง https://docs.flutter.io/flutter/widgets/Flexible-class.html

วิธีแก้ปัญหาง่ายๆ:

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

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

อีกวิธีหนึ่ง:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

ฉันใช้วิธีนี้คุณต้องกำหนดความสูงและความกว้างของหน้าจอโดยใช้ MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Wrapใช้เครื่องมือ

สำหรับColumnพฤติกรรมที่ชอบลอง:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

สำหรับRowพฤติกรรมที่ชอบลอง:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

สำหรับข้อมูลเพิ่มเติม: Wrap (Flutter Widget)

ใช้โค้ดบรรทัดนี้ภายในคอลัมน์ สำหรับ wrap_content: mainAxisSize: MainAxisSize.min สำหรับ match_parent:mainAxisSize: MainAxisSize.max

มีวิธีที่ง่ายและเรียบร้อยในการทำเช่นนี้

ใช้FractionallySizedBoxวิดเจ็ต

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

วิดเจ็ตนี้ยังมีประโยชน์มากเมื่อคุณต้องการปรับขนาดลูกของคุณให้มีขนาดเศษส่วนของผู้ปกครอง

ตัวอย่าง:

หากคุณต้องการให้เด็กครอบครองความกว้าง 50% ของพาเรนต์ให้ระบุwidthFactorเป็น0.5

หากต้องการให้ลูกกรอกข้อมูลพ่อแม่ให้ห่อไว้ใน FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )