Эквивалент wrap_content и match_parent в трепете?

Ответ 1

Короткий ответ заключается в том, что родительский размер не имеет размера, пока размер дочернего элемента не будет.

Способ размещения в Flutter заключается в том, что каждый виджет предоставляет ограничения для каждого из его дочерних элементов, например, "вы можете быть настолько широким, вы должны быть такими высокими, вы должны быть, по крайней мере, такими широкими" или что угодно ( в частности, они получают минимальную ширину, максимальную ширину, минимальную высоту и максимальную высоту). Каждый ребенок принимает эти ограничения, делает что-то и выбирает размер (ширину и высоту), соответствующий этим ограничениям. Затем, как только каждый ребенок выполнит свою задачу, виджет может выбрать свой собственный размер.

Некоторые виджеты стараются быть такими же большими, как позволяет родитель. Некоторые виджеты стараются быть такими же маленькими, как позволяет родитель. Некоторые виджеты пытаются сопоставить определенный "естественный" размер (например, текст, изображения).

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

Ответ 2

Для того, чтобы получить поведение для match_parent и wrap_content мы должны использовать mainAxisSize свойство в строке виджета /Column, свойство mainAxisSize принимает MainAxisSize перечисление, имеющее два значения, является MainAxisSize.min, которая ведет себя как wrap_content и MainAxisSize.max, который ведет себя как match_parent.

Ссылка на оригинальную статью

Ответ 3

На самом деле есть несколько вариантов:

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

Если вам нужно поведение wrap_content, оно зависит от используемого вами родительского виджета, например, если вы поместите кнопку в столбец, она будет вести себя как wrap_content, а для использования ее как match_parent вы можете обернуть кнопку с помощью виджета Expanded или sizebox.

С ListView кнопка получает поведение match_parent, и чтобы получить поведение wrap_content, вы можете обернуть его с помощью виджета Flex, такого как Row.

При использовании виджета "Расширение" дочерний элемент расширяется строкой, столбцом или изгибом, чтобы заполнить доступное пространство на главной оси (например, по горизонтали для строки или по вертикали для столбца). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Использование виджета "Гибкие" дает дочернему элементу строки, столбца или Flex возможность расширения, чтобы заполнить доступное пространство на главной оси (например, по горизонтали для строки или по вертикали для столбца), но, в отличие от расширенного, гибкий не потребуйте, чтобы ребенок заполнил доступное место. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Ответ 4

Вы можете сделать с небольшим трюком: предположим, у вас есть требование: (ширина, высота)

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

Ответ 5

Простой обходной путь:

Если у контейнера есть только один дочерний элемент верхнего уровня, вы можете указать свойство выравнивания для дочернего элемента и присвоить ему любое доступное значение. это заполнит все пространство в контейнере.

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

Ответ 6

Используйте эту строку кодов внутри столбца. Для wrap_content: mainAxisSize: MainAxisSize.min Для match_parent: mainAxisSize: MainAxisSize.max

Ответ 7

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

Ответ 8

Простейший способ создать родительский элемент - это обернуть виджет в виджет "Центр" следующим образом.

child:
Center(child: Text('Bla Bla Bla'),