Flutter'daki wrap_content ve match_parent eşdeğeri?

Android'de match_parentve wrap_contentwidget'ları, widget'ın içerdiği içeriğe göre üst öğelerine göre otomatik olarak yeniden boyutlandırmak için kullanılır.

Flutter yılında tüm widget'ları ayarlanır varsayılan olarak görünüyor wrap_contentben onun doldurabilir böyle olduğunu nasıl değiştireceği, widthve heightüst kuruluşunun buna?

Küçük Numara ile yapabilirsiniz: Diyelim ki şunlara ihtiyacınız var: (Genişlik, Yükseklik)

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

Sipariş için davranışı elde etmek olarak match_parent ve wrap_content biz kullanmaya gerek mainAxisSize tesisle Row / Sütun widget'ı, mainAxisSize mülkiyet alır MainAxisSize olan iki değeri haiz enum MainAxisSize.min hangi davranacağını wrap_content ve MainAxisSize.max olarak davranacağını match_parent .

Bağlantı orijinal Maddenin

Kısa cevap, çocuk bedene sahip olana kadar ebeveynin bedeninin olmamasıdır.

Flutter'da mizanpajın çalışma şekli, her bir parçacığın çocuklarının her birine kısıtlamalar sağlamasıdır. minimum genişlik, maksimum genişlik, minimum yükseklik ve maksimum yükseklik elde edin). Her çocuk bu kısıtlamaları alır, bir şeyler yapar ve bu kısıtlamalara uyan bir boyut (genişlik ve yükseklik) seçer. Ardından, her çocuk işini yaptığında, pencere öğesi kendi boyutunu seçebilir.

Bazı aletler ebeveynin izin verdiği kadar büyük olmaya çalışır. Bazı widget'lar ebeveynin izin verdiği kadar küçük olmaya çalışır. Bazı widget'lar belirli bir "doğal" boyutla eşleşmeye çalışır (örneğin metin, resimler).

Bazı aletler çocuklarına istedikleri boyutta olabileceklerini söyler. Bazıları çocuklarına ebeveynlerinden aldıkları kısıtlamaları verir.

Aslında bazı seçenekler mevcut:

Widget'ınızın üst boyutlarla eşleşmesini sağlamak için SizedBox.expand'i veya yalnızca genişliği eşleştirmek için SizedBox'ı (genişlik: double.infinity) veya yalnızca yüksekliği eşleştirmek için SizedBox'ı (yükseklik: double.infinity) kullanabilirsiniz.

Bir wrap_content davranışı istiyorsanız, bu, kullandığınız ana widget'a bağlıdır; örneğin, bir sütuna bir düğme koyarsanız, bu, wrap_content gibi davranır ve bunu match_parent gibi kullanmak için, bir Genişletilmiş widget veya boyutlu bir kutu ile düğmeyi sarabilirsiniz.

ListView ile düğme bir match_parent davranışı alır ve bir wrap_content davranışı elde etmek için onu Row gibi bir Flex widget'ı ile sarmalayabilirsiniz.

Genişletilmiş bir widget kullanmak, bir Satır, Sütun veya Flex'in alt öğesinin ana eksendeki kullanılabilir alanı dolduracak şekilde genişlemesini sağlar (örneğin, bir Satır için yatay veya bir Sütun için dikey olarak). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Esnek bir widget kullanmak, bir Satır, Sütun veya Esnek öğesinin alt öğesinin ana eksendeki kullanılabilir alanı dolduracak şekilde genişleme esnekliği sağlar (örneğin, bir Satır için yatay veya bir Sütun için dikey olarak), ancak Genişletilmiş'in aksine Esnek bunu yapmaz çocuğun mevcut alanı doldurmasını istemek. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Basit bir çözüm:

Bir konteynerin yalnızca bir üst düzey alt öğesi varsa, alt öğe için hizalama özelliğini belirleyebilir ve ona herhangi bir kullanılabilir değer verebilirsiniz. kaptaki tüm alanı doldurur.

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

Diğer yol:

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

Bu çözümü kullandım, MediaQuery kullanarak ekranınızın yüksekliğini ve genişliğini tanımlamalısınız:

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

Widget'ı kullanın Wrap.

İçin Columnbenzeri davranış denemede:

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

İçin Rowbenzeri davranış denemede:

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

Daha fazla bilgi için: Wrap (Flutter Widget)

Sütun içindeki bu kod satırını kullanın. Wrap_content için: mainAxisSize: MainAxisSize.min match_parent için:mainAxisSize: MainAxisSize.max

Bunu yapmanın aslında çok kolay ve düzgün bir yolu var.

FractionallySizedBoxWidget'ı kullanın .

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

Bu pencere öğesi, çocuğunuzu ebeveyninin boyutunun küçük bir bölümünde boyutlandırmak istediğinizde de çok kullanışlıdır.

Misal:

Çocuğun ebeveyninin% 50 genişliğini kaplamasını istiyorsanız, aşağıdaki widthFactorgibi sağlayın0.5

Bir alt öğenin üstünü doldurmasını sağlamak için, onu bir FittedBox içine sarmanız yeterlidir.

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