英文:
How can i replicate exactly this alignment in flutter?
问题
我有一列包含了多行，在这些行中，我希望所有行中的第二项与其他列的第二项对齐。
这张图片将更清晰地展示我想要实现的效果。
如果你看到这张图片，你会注意到所有行中的第二项都有一个明确的起点。
这是我能够实现的效果。
这并不完全相同，因为每一行都有不同的值，就像在我的代码中所看到的一样。
Padding(
padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
child: Column(
children: [
Row(
children: [
Text(
'标题',
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(
'数量',
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(
'描述',
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),
),
],
),
)
谢谢。
英文:
i Have a Column that contains rows, in the rows, i want the second items in the all rows to be aligned as same with other second items in the row of other columns.
This picture will give a clearer view of what i want to achieve.
If you see this image you will notice how all second items in the all the rows have a definite start.
This is what i could achieve.
which is not exactly same because i had different values for each rows. as seen in my code below
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),
),
],
),)
Thank you.
答案1
得分: 1
你可能在找Table组件。
Table(
border: const TableBorder(
horizontalInside: BorderSide(
color: Colors.black45,
),
),
defaultColumnWidth: const IntrinsicColumnWidth(),
children: const [
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('标题'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Asoebi礼服'),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('数量'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text('12'),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('描述'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.'),
),
],
),
],
);
你可以具体指定horizontalInside边框以绘制分隔线。通过提供IntrinsicColumnWidth()，你告诉列占据其最大单元格的大小。如果你希望此行为在列之间有所不同，还可以设置columnWidths并为每列提供不同类型的宽度。
英文:
You might be looking for a Table widget.
Table(
border: const TableBorder(
horizontalInside: BorderSide(
color: Colors.black45,
),
),
defaultColumnWidth: const IntrinsicColumnWidth(),
children: const [
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Title'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Asoebi Gown'),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Quantity'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text('12'),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Description'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.'),
),
],
),
],
);
You can specifically specify the horizontalInside borders to draw the dividers. By providing a IntrinsicColumnWidth(), you tell the column to take up the size of its largest cell. If you want this behavior to be different across columns, you can also set the columnWidths and provide a different type of width for each column.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论