Еквівалент wrap_content та match_parent у трепеті?

В 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 перерахування , що має два значення, є MainAxisSize.min , який веде себе як wrap_content і MainAxisSize.max , який веде себе як match_parent .

Посилання первинної статті

Коротка відповідь полягає в тому, що батько не має розміру, поки дитина не має розміру.

Те, як працює макет у Flutter, полягає в тому, що кожен віджет забезпечує обмеження для кожного з його дітей, як-от "ти можеш бути таким широким, ти повинен бути таким високим, ти повинен бути принаймні таким широким", або будь-яким іншим (конкретно, вони отримати мінімальну ширину, максимальну ширину, мінімальну висоту та максимальну висоту). Кожна дитина бере ці обмеження, робить щось і вибирає розмір (ширину та висоту), що відповідає цим обмеженням. Потім, як тільки кожна дитина зробить свою справу, віджет може вибрати власний розмір.

Деякі віджети намагаються бути настільки великими, наскільки дозволяє батько. Деякі віджети намагаються бути такими ж маленькими, як дозволяє батько. Деякі віджети намагаються відповідати певному "натуральному" розміру (наприклад, текст, зображення).

Деякі віджети кажуть своїм дітям, що вони можуть бути будь-якого розміру, який вони хочуть. Деякі дають своїм дітям ті самі обмеження, які вони отримали від свого батька.

Насправді доступні деякі варіанти:

Ви можете використовувати SizedBox.expand, щоб ваш розмір віджетів відповідав розмірам батьків, або SizedBox (ширина: double.infinity), щоб відповідати тільки ширині або SizedBox (heigth: double.infinity), щоб відповідати лише висоті.

Якщо ви хочете поведінку wrap_content, це залежить від батьківського віджета, який ви використовуєте, наприклад, якщо ви кладете кнопку на стовпець, він буде вести себе як wrap_content, а якщо використовувати match_parent, ви можете обернути кнопку розширеним віджетом або розміром.

За допомогою ListView кнопка отримує поведінку match_parent, а для отримання поведінки wrap_content можна обернути її віджетом Flex типу Row.

Використання розширеного віджету робить дочірню рядок, стовпчик або гнучку для розширення, щоб заповнити наявний простір на головній осі (наприклад, горизонтально для рядка або вертикально для стовпця). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Використання гнучкого віджета надає дитині рядка, стовпця або гнучкості для розширення, щоб заповнити наявний простір на головній осі (наприклад, горизонтально для рядка або вертикально для стовпця), але, на відміну від розширеного, гнучка не робить вимагати від дитини заповнити наявний простір. https://docs.flutter.io/flutter/widgets/F prilagod-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,
   )