如何使 TableCell 高度扩展以适应内容高度?
这是我所期望的(在 Photoshop 中编辑):
这就是我得到的(应用内打印屏幕):
正如我所说,仅当长字符串位于第二个Text
(值所在的位置)小部件中时,预期的行为才有效。这是我的代码:
class MyDialog extends StatelessWidget {
final _boxBorder = BoxDecoration(border: Border.all());
final _boxPadding = EdgeInsets.symmetric(horizontal: 8, vertical: 4);
final _itemSpacer = SizedBox.shrink();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(15),
child: Column(
mainAxisSize: MainAxisSize.min,
children: _buildTableItems(context)
)
)
)
);
}
List<Widget> _buildTableItems(BuildContext context) {
final verticalSpacer = SizedBox(height: 16);
final labelStyle = Theme.of(context).textTheme.caption!.copyWith(
fontSize: 12
);
final valueStyle = TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500
);
return [
_buildDualColumn(
context: context,
labels: ['MY LABEL', 'DATE'],
values: ['A REALY LONG VALUE, MY FRIEND', '01/01/1821'],
labelStyle: labelStyle,
valueStyle: valueStyle,
columnWidths: {
0: FlexColumnWidth(1.1),
2: FlexColumnWidth(0.9)
}
),
verticalSpacer,
_buildDualColumn(
context: context,
labels: ['MY LABEL', '2ND LABEL'],
values: ['VALUE', 'HELLO --'],
labelStyle: labelStyle,
valueStyle: valueStyle
),
]
}
Table _buildDualColumn({
required BuildContext context,
List<String>? labels,
List<String>? values,
List<Widget>? content,
TextStyle? labelStyle,
TextStyle? valueStyle,
Map<int, TableColumnWidth>? columnWidths
}) {
// Horizontal gap between the cells (16px).
final colWidths = <int, TableColumnWidth> {
1: FixedColumnWidth(16),
};
if (columnWidths != null) {
if (columnWidths.containsKey(0)) {
colWidths[0] = columnWidths[0]!;
}
if (columnWidths.containsKey(2)) {
colWidths[2] = columnWidths[2]!;
}
}
return Table(
columnWidths: colWidths,
children: [
TableRow(
children: [
TableCell(
child: Container(
decoration: _boxBorder,
padding: _boxPadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: content ?? [
Text(labels![0], style: labelStyle),
Text(values![0], style: valueStyle)
],
),
),
),
_itemSpacer,
TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Container(
decoration: _boxBorder,
padding: _boxPadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(labels![1], style: labelStyle),
Text(values![1], style: valueStyle)
],
),
),
)
]
)
],
);
}
}
如果值字符串很长时表格单元格会扩展,为什么标签字符串也很长时不扩展?