0

如何使 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)
                  ],
                ),
              ),
            )
          ]
        )
      ],
    );
  }
}

如果值字符串很长时表格单元格会扩展,为什么标签字符串也很长时不扩展?

4

0 回答 0