将子元素的高度设置为等于Wrap Widget(Flutter)中包含的其他最高元素 [英] Set height of child elements equal to highest other element that are contained by Wrap Widget (Flutter)
问题描述
我需要使框对齐，如下图所示.我使用Wrap Widget将我的物品按两个元素连续包装.但正如我所见，Wrap小部件没有crossAxisAlignment的Stretch属性.
I need to have box alignment like on image below. I use Wrap Widget to wrap my items by two elements in a row. But as i see Wrap widget don't have stretch property for the crossAxisAlignment.
我使用另一种方法来构建cardItem，以简化我的代码，并将其重新用于我的四张卡. 也许您知道其他一些小部件可以帮助您完成此任务.
I use another method to build cardItem, to simplify my code, and re-use it for my four cards. Maybe you know some other Widgets to help to do it.
有人可以帮我吗.请在下面查看我的代码:
Can someone help me with it. Please see my code below:
class Transfers extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transfers'),
),
body: Center(
child: Wrap(
spacing: 10,
runSpacing: 10,
children: <Widget>[
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Text",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
],
),
),
);
}
Widget _buildTransferItem(
String transferIcon, String transferTitle, BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 0.5 - 20,
height: ,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(140, 140, 140, 0.5),
blurRadius: 6.0,
)
],
),
padding: EdgeInsets.symmetric(
vertical: screenAwareSize(20.0, context),
horizontal: screenAwareSize(20.0, context),
),
child: Column(
children: <Widget>[
Image.asset(
transferIcon,
width: screenAwareSize(72.0, context),
height: screenAwareSize(39.0, context),
),
SizedBox(height: screenAwareSize(7.0, context)),
Text(
transferTitle,
style: TextStyle(
fontSize: screenAwareSize(14, context),
fontWeight: FontWeight.w300,
),
textAlign: TextAlign.center,
)
],
),
);
}
}
推荐答案
您需要的是InstrinsicHeight小部件.
这是一个示例，该示例如何解决连续任意给定数量的卡片中的问题.如您所见，_generateRows(List<String> labels, int numPerRow)函数获取一组纸牌标签和连续若干张纸牌作为输入参数并生成布局:
What you need is InstrinsicHeight widget.
Here is an example of how to solve your problem for any given number of cards in row. As you can see the _generateRows(List<String> labels, int numPerRow) function gets a collection of card labels and a number of cards in a row as input parameters and generates the layout:
List<Widget> _generateRows(List<String> labels, int numPerRow) {
Widget _buildTransferItem(String transferTitle, int numPerRow) {
return Builder(
builder: (context) {
return Container(
width: MediaQuery.of(context).size.width / numPerRow - 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(140, 140, 140, 0.5),
blurRadius: 6.0,
)
],
),
padding: EdgeInsets.symmetric(
vertical: 20,
horizontal: 20,
),
child: Column(
children: <Widget>[
Icon(
Icons.info,
size: 48,
),
SizedBox(height: 7),
Text(
transferTitle,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w300,
),
textAlign: TextAlign.center,
)
],
),
);
},
);
}
List<Widget> result = [];
while (labels.length > 0) {
List<String> tuple = labels.take(numPerRow).toList();
for(int i = 0; i< tuple.length; i++){
if (labels.length > 0) labels.removeAt(0);
}
Widget item = IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: tuple.map((s) => _buildTransferItem(s, numPerRow)).toList(),
),
);
result.add(item);
}
return result
.expand((item) => [
item,
SizedBox(
height: 20,
),
])
.toList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transfers'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _generateRows(
["Some text of this box", "Text", "Some Text of this box", "Some Rather Long Text of this box", "Cool, yeah?", "Last"],
3,
),
),
),
);
}
IntrinsicHeight 小部件考虑了孩子的内在尺寸对于大多数容器小部件(如Row等)而言，这将是定数.但是在复杂的情况下，它具有O(N ^ 2)的性能保证，您可以在API文档中阅读. 以下是每行纸牌数为2和3的情况的屏幕截图.请注意，此参数仅传递一次，不会在任何地方进行硬编码.
The IntrinsicHeight widget takes into consideration intrinsic dimensions of the child which for most container widgets like Row, etc. will be definite numbers. But it comes with performance warranty of O(N^2) in complex cases as you may read in the API docs. Here are screenshots of cases when number of cards per row are 2 and 3. Please note that this parameter is passed just once and is not hardcoded anywhere.
如果有奇数个项目，它将居最后一个项目的中心:
If there's an odd number of items it will center last item:
这篇关于将子元素的高度设置为等于Wrap Widget(Flutter)中包含的其他最高元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
