Flutter: Genişletilmiş vs Esnek

Her ikisini de kullandım Expandedve Flexibleaynı şekilde çalışıyorlar. Kaçırdığım ikisi arasında bir fark var mı?

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

Expanded sadece kısaltmasıdır Flexible

Bu şekilde genişletilmiş kullanarak:

Expanded(
  child: Foo(),
);

kesinlikle şuna eşdeğerdir:

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

Sen kullanmak isteyebilirsiniz Flexibleüzerinde Expandedsize farklı istediğinizde fitbazı duyarlı düzenleri yararlıdır.

Arasındaki fark FlexFit.tightve FlexFit.loosegevşek onun çocuk çocuk tüm kullanılabilir alanı dolduracak şekilde o sıkı güçlerin ederken maksimum büyüklüğe sahip sağlayacak olmasıdır.

Esnek altındaki widget varsayılan olarak WRAP_CONTENT'tir, ancak Fit parametresini kullanarak onu değiştirebilirsiniz.

Expanded altındaki Widget MATCH_PARENT ise bunu flex kullanarak değiştirebilirsiniz .

Expanded- Flexibleset uyumu ile

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

Sen kullanabilir Esnek içinde widget'lar yeniden boyutlandırmak için satır ve sütunların . Esas olarak, ana pencere öğeleriyle ilişkiyi korurken farklı alt bileşenlerin alanını ayarlamak için kullanılır.

Bu arada Expanded , satır ve sütunların alt öğelerine gönderilen kısıtlamaları değiştirir ; oradaki mevcut alanları doldurmaya yardımcı olur. Bu nedenle, çocuğunuzu Genişletilmiş bir pencere aracına sardığınızda, boş alanları doldurur.

Flutter'ın Resmi YouTube kanalından bu videoları sadece gelecekte bunu arayabilecek insanlara yardım etmek için sunmak ...

1. Genişletilmiş:

2. Esnek:

Expanded (), Esnek () 'den başka bir şey değildir.

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

ancak, fit :FlexFit.loosevarsayılan olarak Esnek kullanır .

FlexFit.tight = Mümkün olduğunca çok yer kaplayarak ebeveyne sıkıca sığmak istiyor.

FlexFit.loose = Kendisi için olabildiğince az yer kaplayarak ebeveyne gevşek bir şekilde uymak istiyor.

Bunun Flexibleyerine kullanırsanız tek fark , çocuğunun kendisiyle aynı veya daha küçük genişliğe sahip Expandedolmasına Flexibleizin Flexibleverirken Expanded, çocuğunu Expanded. Ancak her iki Expandedve Flexiblekendilerini boyutlandırma sırasında çocuklarının genişliğini görmezden.

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

Not : Bu, Rowçocukları boylarına orantılı olarak büyütmenin imkansız olduğu anlamına gelir . Satır ya tam alt öğenin genişliğini kullanır Expandedya da veya kullandığınızda tamamen yok sayar Flexible.