flutter中的wrap_content和match_parent相当于？

Question

在Android match_parent中，wrap_content用于相对于其父级自动调整小部件的大小，以及小部件包含的内容。

在Flutter中，默认情况下，所有窗口小部件都设置为wrap_content，我如何更改它以便我可以将其width和height填充到其父窗口？

Answer 1

  

为了获得 match_parent 和 wrap_content 的行为，我们需要   使用行/列小部件中的 mainAxisSize 属性， mainAxisSize   属性采用具有两个值的 MainAxisSize 枚举，即    MainAxisSize.min 的行为类似于 wrap_content 和 MainAxisSize.max   表现为 match_parent 。

Link的原始文章

Answer 2

简短的回答是父母在孩子有大小之前没有大小。

Flutter中布局的工作方式是每个小部件都为每个小部件提供约束，例如＆＃34;你可以达到这个范围，你必须这么高，你必须至少要宽这个＃34 ;或者其他（具体来说，它们得到最小宽度，最大宽度，最小高度和最大高度）。每个孩子都会接受这些约束，做一些事情，并选择与这些约束匹配的大小（宽度和高度）。然后，一旦每个孩子完成了它的事情，小部件就可以选择自己的大小。

有些小部件试图像父级允许的那样大。有些小部件试图像父级允许的那样小。一些小部件试图匹配某些＆＃34;自然＆＃34;尺寸（例如文字，图像）。

有些小部件告诉他们的孩子他们可以是他们想要的任何尺寸。有些人给他们的孩子提供与他们的父母相同的限制。

Answer 3

实际上有一些选择：

您可以使用SizedBox.expand使您的窗口小部件与父项维度匹配，或使用SizedBox（width：double.infinity）仅匹配宽度或SizedBox（heigth：double.infinity）以仅匹配高度。

如果你想要一个wrap_content行为，它取决于你正在使用的父窗口小部件，例如，如果你在列上放置一个按钮，它的行为就像wrap_content一样，并且像match_parent一样使用它，你可以用一个Expanded小部件包裹按钮或者一个sizebox。

使用ListView按钮获取match_parent行为并获得wrap_content行为，您可以使用像Row这样的Flex小部件来包装它。

使用Expanded小部件可以生成Row，Column或Flex的子级 展开以填充主轴中的可用空间（例如，水平方向） 列的一行或垂直）。 https://docs.flutter.io/flutter/widgets/Expanded-class.html

使用Flexible小部件可以为Row，Column或Flex的子级提供扩展的灵活性，以填充主轴中的可用空间（例如，水平为行或垂直为列），但与Expanded不同，灵活不需要孩子填补可用空间。 https://docs.flutter.io/flutter/widgets/Flexible-class.html

Answer 4

一个简单的解决方法：

如果一个容器只有一个顶级子级，则可以为该子级指定对齐属性，并为其提供任何可用值。它将填充容器中的所有空间。

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

Answer 5

要让孩子填补其父母，只需将其包装到FittedBox中

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

Answer 6

使用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

Answer 7

您可以使用小技巧： 假设您有以下要求： （（宽度，高度）

Wrap_content，Wrap_content：

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

配对父母，

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

比赛父母，比赛内容：

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

包装内容，匹配的父母：

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Answer 8

我使用了此解决方案，您必须使用MediaQuery定义屏幕的高度和宽度：

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Answer 9

匹配父级

要匹配或填充父级（高度和宽度），我们可以在 constraints 上使用额外的 Container：

Container(
  constraints: BoxConstraints.expand(), // ← this guy
  child: Text('Center > Container > Text')
)

在 Flutter 中，constraints 是您可以填充的空间（或者必须填充，如果“严格”约束）。

限制是给予...实际上不是，强加是父母。

默认情况下，Container 将包装其内容 (child:) 并将其自身调整到其子级，除非被覆盖（或严格约束不允许）。

使用 constraints: 参数，我们可以提供 Container 附加 约束来覆盖默认的 Container 约束行为（例如包装内容）。

使用 Container(constraints: BoxConstraints.something) 不会覆盖传入/父约束；它只是允许我们在允许的情况下覆盖默认行为，例如包装内容。

---

代码示例 - BoxConstraints

这是一个复制/粘贴代码示例，显示了我们可以将各种 constraints 应用于具有“松散”传入/父母约束（由 Container 提供）的 Center 的效果。

import 'package:flutter/material.dart';

class MatchParentPage extends StatefulWidget {
  @override
  _MatchParentPageState createState() => _MatchParentPageState();
}

class _MatchParentPageState extends State<MatchParentPage> {
  BoxConstraints constraints;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Match Parent'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded( // shares space constraint evenly with other Expanded
            child: Center( // ← fills tight parent constraint & loosens ↓ child constraint ↓
              child: Container( // got loose constraint from Center... 
                  constraints: constraints, // can apply many additional constraints
                  color: Colors.lightBlueAccent.withOpacity(.3),
                  child: Text('Center > Container > Text')),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orangeAccent,
                child: Wrap(
                    children: [
                      _button('default', null),
                      _button('*expand()', BoxConstraints.expand()),
                      _button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),
                      _button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),
                      _button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),
                      _button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),
                      _button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),
                      _button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),
                      _button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),
                      _button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),
                    ])
            ),
          )
        ],
      ),
    );
  }

  Widget _button(String label, BoxConstraints _constraints) {
    bool _active = _constraints == constraints;
    return Padding(
      padding: const EdgeInsets.only(top:8, left: 8),
      child: RaisedButton(
        color: _active ? Colors.cyanAccent : null,
        child: Text(label),
        onPressed: () {
          setState(() => constraints = _constraints);
        },
      ),
    );
  }
}

Answer 10

在“列”中使用此行代码。 对于wrap_content：mainAxisSize: MainAxisSize.min 对于match_parent：mainAxisSize: MainAxisSize.max

Answer 11

使用窗口小部件 Wrap 。

对于 Column 这样的行为，请尝试：

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

对于 Row 这样的行为，请尝试：

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

有关更多信息：Wrap (Flutter Widget)

Answer 12

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

Answer 13

最简单的方法是将小部件像这样包装到中心小部件中

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