i具有包含行的列,在行中,我希望所有行中的第二项与其他列的行中的其他第二项对齐。
这幅图将使我更清楚地看到我想达到的目标。
如果你看到这个图像,你会注意到所有行中的所有第二个项目都有一个明确的开始。
这就是我能做到的。
这并不完全相同,因为我对每一行都有不同的值。如下面的代码所示
Padding(
padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
child: Column(
children: [
Row(
children: [
Text(
'Title',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E),
),
),
SizedBox(width: 55),
Text(
'Asoebi Gown',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff596780),
),
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Color(0xff34495E).withOpacity(0.2),
),
SizedBox(
height: 15,
),
Row(
children: [
Text(
'Quantity',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E),
),
),
Expanded(
child: FractionallySizedBox(
widthFactor: 0.8,
child: Text(
'12',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff596780),
),
),
),
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Color(0xff34495E).withOpacity(0.2),
),
SizedBox(
height: 15,
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Description',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E),
),
),
Expanded(
child: FractionallySizedBox(
widthFactor: 0.9,
child: Text(
'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff596780),
),
),
),
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Color(0xff34495E).withOpacity(0.2),
),
],
),)
谢谢你。
1条答案
按热度按时间dba5bblo1#
您可能正在寻找Table小部件。
您可以专门指定
horizontalInside
边框来绘制分隔线。通过提供IntrinsicColumnWidth()
,您可以告诉列使用其最大单元格的大小。如果希望此行为在各列之间有所不同,您还可以设置columnWidths
并为每列提供不同类型的宽度。