Flutter DataTable截断文本

mlnl4t2r  于 2023-10-22  发布在  Flutter
关注(0)|答案(3)|浏览(168)

我正在编写一个flutter应用程序,并试图插入一个DataTable。我有问题的文本得到截断虽然没有溢出到一个新的一行。它会做2行,但不是3在我的设备上。我尝试在扩展的小部件中添加文本,但这不起作用,并引发“ParentDataWidget的使用不正确”。有什么方法可以让很长的文本跨越3,4,或5+行?下面是代码。

  1. import 'package:flutter/material.dart';
  2. class ClaimTypeTable extends StatelessWidget {
  3. @override
  4. Widget build(BuildContext context) {
  5. return Container(
  6. child: new DataTableWidgetExtract(),
  7. );
  8. }
  9. }
  10. class DataTableWidgetExtract extends StatelessWidget {
  11. const DataTableWidgetExtract({
  12. Key key,
  13. }) : super(key: key);
  14. @override
  15. Widget build(BuildContext context) {
  16. return DataTable(
  17. columnSpacing: 10.0,
  18. horizontalMargin: 5,
  19. columns: <DataColumn>[
  20. DataColumn(label: Text('Type')),
  21. DataColumn(label: Text('Description',)),
  22. ],
  23. rows: claimTypesList
  24. .map(
  25. (itemRow) => DataRow(
  26. cells: [
  27. DataCell(Text(itemRow.shortName),
  28. showEditIcon: false, placeholder: false, onTap: () {
  29. print('We tapped it - ${itemRow.shortName}');
  30. }),
  31. DataCell(
  32. Padding(
  33. padding: const EdgeInsets.all(8.0),
  34. child: Text(itemRow.description,),
  35. ),
  36. showEditIcon: false,
  37. placeholder: false,
  38. ),
  39. ],
  40. ),
  41. )
  42. .toList(),
  43. );
  44. }
  45. }
  46. class ClaimType {
  47. String shortName;
  48. String description;
  49. ClaimType({
  50. this.shortName,
  51. this.description,
  52. });
  53. }
  54. var claimTypesList = <ClaimType>[
  55. ClaimType(
  56. shortName: 'Fire',
  57. description:
  58. 'There was a fire. The fire department may or may not have been called, but shit got burnt up.',
  59. ),
  60. ClaimType(
  61. shortName: 'Water',
  62. description:
  63. 'Water damage. Examples of typical water damage include: burst pipe, broken water heater, or faulty toilet.',
  64. ),
  65. ClaimType(
  66. shortName: 'Wind',
  67. description:
  68. 'There is non-hurricane wind damage to your residence. If it is related to a hurricane, please select Hurricane as the claim type instead. This one is really long and gets truncated.',
  69. ),
  70. ClaimType(
  71. shortName: 'Crime',
  72. description:
  73. 'Vandalism, theft, or other criminal behavior that resulted in a loss.'),
  74. ];

这是它的样子:

cgvd09ve

cgvd09ve1#

三到四件事适用-
1.在DataCell小部件中,您需要使用ConstrainedBox。在ConstrainedBox中,指定maxWidthminWidth以覆盖高度。
1.在Datacell小部件的子部件中,如果文本小部件给予溢出:TextOverflow .visible,softWrap:真的,
1.在DataTable小部件中给予dataRowHeight属性。

qybjjes1

qybjjes12#

数据表很难处理。我只是结束了使用带有分隔符的列表视图。

4si2a6ki

4si2a6ki3#

这就是我在右边一栏中所做的,右边一栏有很长的文字。如果maxRows允许,该行现在将显示所有文本。我使用媒体查询将右列maxWidth设置为屏幕宽度的75%。

  1. final dataTable = DataTable(
  2. dataRowMaxHeight: double.infinity,
  3. horizontalMargin: 6,
  4. columns: const [
  5. ------------
  6. DataCell(
  7. ConstrainedBox(
  8. constraints: BoxConstraints(
  9. maxWidth: rightColumnMaxWidth, maxHeight: double.infinity),
  10. child: Text(

相关问题