我需要如下输出
下面是我的代码
Widget _buildShoppingItem() {
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text("ABCD"),
)
],
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: FadeInImage.assetNetwork(
alignment: Alignment.topCenter,
placeholder: "https://picsum.photos/100",
image: "https://picsum.photos/100",
fit: BoxFit.none,
),
),
),
Expanded(
flex: 4,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Container(child: Text("Grade:")),
Container(child: Text("Sashimi")),
],
),
Row(
children: <Widget>[
Container(child: Text("Spec:")),
Container(child: Text("Skinless Boneless, Full Loins")),
],
),
Row(
children: <Widget>[
Container(child: Text("Size:")),
Container(child: Text("2-4 kG")),
],
),
Row(
children: <Widget>[
Spacer(flex: 4,)
],
)
],
),
),
)
],
),
)
],
);
}
这给了我以下 UI
如您所见,代码没有提供我期望的用户界面。我得到的用户界面没有正确对齐。 等级、规范 和所有内容都对齐到底部,而不是顶部。我注意到当图像变大时,这些内容会进一步下降。
我该如何解决这个问题?
最佳答案
在 Rows
之间使用 SizeBox
您可以根据需要增加此大小
Widget _buildShoppingItem() {
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text("ABCD"),
)
],
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: FadeInImage.assetNetwork(
alignment: Alignment.topCenter,
placeholder: "https://picsum.photos/100",
image: "https://picsum.photos/100",
fit: BoxFit.none,
),
),
),
Expanded(
flex: 4,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Container(child: Text("Grade:")),
Container(child: Text("Sashimi")),
],
),
SizedBox(height: 5.0),
Row(
children: <Widget>[
Container(child: Text("Spec:")),
Container(child: Text("Skinless Boneless, Full Loins")),
],
),
SizedBox(height: 5.0),
Row(
children: <Widget>[
Container(child: Text("Size:")),
Container(child: Text("2-4 kG")),
],
),
Row(
children: <Widget>[
Spacer(flex: 4,)
],
)
],
),
),
)
],
),
)
],
);
}
Note: Here your Parent widget is Column that's why we are using
SizeBox(height:5)
if we are using Row then we will using like thisSizeBox(width:5)
关于android - Flutter:在彼此相邻的两列中显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59859894/