Эквивалент 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 (width: 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 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)

Используйте эту строку кодов внутри столбца. Для 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,
   )