flutter中的wrap_content和match_parent相当于？

Question

在Android中match_parent,wrap_content用于相对于其父级自动调整窗口小部件的大小.

在Flutter中,默认情况下似乎所有小部件都设置为wrap_content,我如何更改它以便我可以填充它width和height它的父节点？

Answer 1

为了获得match_parent和wrap_content的行为,我们需要在Row/Column小部件中使用mainAxisSize属性,mainAxisSize 属性采用具有两个值的MainAxisSize枚举, MainAxisSize.min的行为为wrap_content,MainAxisSize.max的 行为为match_parent.

原始文章的链接

Answer 2

您可以使用小技巧：假设您有以下要求： （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],
);

Answer 3

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

Flutter中布局的工作方式是每个小部件都为每个小孩提供约束,例如"你可以达到这个范围,你必须这么高,你必须至少这么宽",或者其他什么(特别是,他们获得最小宽度,最大宽度,最小高度和最大高度).每个孩子都会接受这些约束,做一些事情,并选择与这些约束匹配的大小(宽度和高度).然后,一旦每个孩子完成了它的事情,小部件就可以选择自己的大小.

有些小部件试图像父级允许的那样大.有些小部件试图像父级允许的那样小.一些小部件尝试匹配某个"自然"大小(例如文本,图像).

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

Answer 4

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

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

使用"扩展"窗口小部件可以扩展行,列或Flex的子项以填充主轴中的可用空间(例如,水平为行或垂直为列). https://docs.flutter.io/flutter/widgets/Expanded-class.html

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

Answer 5

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

Answer 6

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

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

Answer 7

使用小部件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 8

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

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

Answer 9

MATCH_PARENT

FractionallySizedBox(
            widthFactor: 1.0, // width w.r.t to parent
            heightFactor: 1.0, // height w.r.t to parent

            child: ElevatedButton(
              onPressed: () {},
              child: Text("+"),
            ),
          )

或者

Container(
            height: double.infinity,
            width: double.infinity,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

或者

Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

或者

Container(
          constraints: BoxConstraints.expand(),
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

包装内容

Wrap(children: [
          Container(
            child: ElevatedButton(
              onPressed: () {},
              child: Text("+"),
            ),
          ),
        ])

或者

Container(
          constraints: BoxConstraints.tightFor(),
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

Match_parent，Wrap_content：

Row(
            children: [
          Expanded(
            child: Container(
              child: ElevatedButton(
                onPressed: () {},
                child: Text("+"),
              ),
            ),
          ),
        ])

Wrap_content，Match_parent：

Column(
            children: [
          Expanded(
            child: Container(
              child: ElevatedButton(
                onPressed: () {},
                child: Text("+"),
              ),
            ),
          ),
        ])

Answer 10

一个简单的解决方法：

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

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 11

在 Column 中使用这行代码。对于wrap_content：mainAxisSize: MainAxisSize.min 对于match_parent：mainAxisSize: MainAxisSize.max

Answer 12

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

匹配家长

\n

为了匹配或填充父级（高度和宽度），我们可以使用 extra constraintson Container：

\n

Container(\n  constraints: BoxConstraints.expand(), // \xe2\x86\x90 this guy\n  child: Text('Center > Container > Text')\n)\n

\n

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

\n

限制是被给予的……不，实际上是父母强加的。

\n

默认情况下，除非被覆盖（或严格约束不允许），否则Container会将其内容 ( ) 和大小本身包装到其子级。child:

\n

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

\n

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

\n\n

代码示例 -BoxConstraints

\n

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

\n

import 'package:flutter/material.dart';\n\nclass MatchParentPage extends StatefulWidget {\n  @override\n  _MatchParentPageState createState() => _MatchParentPageState();\n}\n\nclass _MatchParentPageState extends State<MatchParentPage> {\n  BoxConstraints constraints;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Match Parent'),\n      ),\n      body: Column(\n        mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n        children: [\n          Expanded( // shares space constraint evenly with other Expanded\n            child: Center( // \xe2\x86\x90 fills tight parent constraint & loosens \xe2\x86\x93 child constraint \xe2\x86\x93\n              child: Container( // got loose constraint from Center... \n                  constraints: constraints, // can apply many additional constraints\n                  color: Colors.lightBlueAccent.withOpacity(.3),\n                  child: Text('Center > Container > Text')),\n            ),\n          ),\n          Expanded(\n            child: Container(\n              color: Colors.orangeAccent,\n                child: Wrap(\n                    children: [\n                      _button('default', null),\n                      _button('*expand()', BoxConstraints.expand()),\n                      _button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),\n                      _button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),\n                      _button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),\n                      _button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),\n                      _button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),\n                      _button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),\n                      _button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),\n                      _button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),\n                    ])\n            ),\n          )\n        ],\n      ),\n    );\n  }\n\n  Widget _button(String label, BoxConstraints _constraints) {\n    bool _active = _constraints == constraints;\n    return Padding(\n      padding: const EdgeInsets.only(top:8, left: 8),\n      child: RaisedButton(\n        color: _active ? Colors.cyanAccent : null,\n        child: Text(label),\n        onPressed: () {\n          setState(() => constraints = _constraints);\n        },\n      ),\n    );\n  }\n}\n

\n