在 Android中match_parent，wrap_content用于将小部件相对于其父级的大小自动调整为小部件包含的内容。
在 Flutter 中，默认情况下似乎所有小部件都设置为wrap_content，我将如何更改它以便我可以填充它width并填充它height的父级？
问问题
210992 次
13 回答
379
您可以使用小技巧：假设您有以下要求：（ 宽度，高度）
包装内容，包装内容：
//use this as child
Wrap(
children: <Widget>[*your_child*])
匹配父级，匹配父级：
//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],
);
于 2019-05-08T07:12:50.863 回答
208
为了获得match_parent和wrap_content的行为，我们需要在Row/Column小部件中使用mainAxisSize属性， mainAxisSize 属性采用MainAxisSize枚举，该枚举具有两个值，即 MainAxisSize.min表现为wrap_content和MainAxisSize.max 表现为match_parent。
原文链接
于 2018-11-12T13:34:30.707 回答
43
简短的回答是，在孩子有尺寸之前，父母没有尺寸。
Flutter 中布局的工作方式是每个小部件为其每个子级提供约束，例如“你可以达到这个宽度，你必须有这个高度，你必须至少有这个宽度”，或者其他任何东西（具体来说，它们获得最小宽度、最大宽度、最小高度和最大高度）。每个孩子接受这些约束，做某事，并选择与这些约束匹配的大小（宽度和高度）。然后，一旦每个孩子都完成了自己的事情，小部件就可以选择自己的大小。
一些小部件试图尽可能大到父允许的大小。一些小部件试图尽可能小到父允许的大小。一些小部件尝试匹配某个“自然”大小（例如文本、图像）。
一些小部件告诉他们的孩子他们可以是任何他们想要的大小。有些人给他们的孩子和他们从父母那里得到的同样的限制。
于 2017-02-16T02:57:49.260 回答
29
实际上有一些可用的选项：
您可以使用 SizedBox.expand 使您的小部件与父尺寸匹配，或使用 SizedBox(width: double.infinity) 仅匹配宽度或使用 SizedBox(heigth: double.infinity) 仅匹配高度。
如果您想要一个 wrap_content 行为，它取决于您正在使用的父小部件，例如，如果您将一个按钮放在列上，它的行为将类似于 wrap_content 并且要像 match_parent 一样使用它，您可以使用 Expanded 小部件或 sizedbox 包装按钮。
使用 ListView，按钮会获得 match_parent 行为，并且要获得 wrap_content 行为，您可以使用 Flex 小部件（如 Row）将其包装起来。
使用 Expanded 小部件可使 Row、Column 或 Flex 的子项展开以填充主轴中的可用空间（例如，水平地用于行或垂直地用于列）。 https://docs.flutter.io/flutter/widgets/Expanded-class.html
使用 Flexible 小部件为 Row、Column 或 Flex 的子级提供了扩展的灵活性以填充主轴中的可用空间（例如，水平的 Row 或垂直的 Column），但与 Expanded 不同的是，Flexible 不会要求孩子填满可用空间。 https://docs.flutter.io/flutter/widgets/Flexible-class.html
于 2018-03-13T16:21:25.397 回答
16
使用小部件Wrap。
对于Column类似的行为，请尝试：
return Wrap(
direction: Axis.vertical,
spacing: 10,
children: <Widget>[...],);
对于Row类似的行为，请尝试：
return Wrap(
direction: Axis.horizontal,
spacing: 10,
children: <Widget>[...],);
更多信息：Wrap（颤振小部件）
于 2019-12-29T10:43:31.067 回答
12
我使用了这个解决方案，您必须使用 MediaQuery 定义屏幕的高度和宽度：
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width
)
于 2019-11-17T23:22:55.620 回答
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
)
)
于 2018-07-09T04:33:34.540 回答
10
Stack(
children: [
Container(color:Colors.red, height:200.0, width:200.0),
Positioned.fill(
child: Container(color: Colors. yellow),
)
]
),
于 2019-07-22T06:37:52.477 回答
9
要让子元素填充其父元素，只需将其包装到 FittedBox 中
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
于 2020-06-23T15:04:00.577 回答
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
于 2020-04-17T04:23:52.220 回答
5
匹配父级
要匹配或填充父级（高度和宽度），我们可以使用附加constraintson 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);
},
),
);
}
}
于 2021-04-02T03:42:58.070 回答
4
在 Column 中使用这行代码。对于 wrap_content ：mainAxisSize: MainAxisSize.min
对于 match_parent ：mainAxisSize: MainAxisSize.max
于 2019-01-08T12:36:51.527 回答
0
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("+"),
),
),
),
])
于 2022-02-20T20:50:42.990 回答