flutter - DataTable 列宽问题
问题描述
我正在尝试构建一个完整的宽度DataTable
,Flutter
左侧有一个固定宽度的列,另外两列应该将剩余的列分开。
但是,即使左侧标题文本被截断,中间和右侧列也不会占用剩余宽度,如下所示:
当文本太宽而无法在单行中显示时,我还想将文本包装在一个单元格中,但Wrap
不能按预期工作。
我该如何解决我的问题?
这是代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(children: [
Expanded(
child: Container(
constraints: BoxConstraints.expand(width: double.infinity),
child: SingleChildScrollView(
child: DataTable(
headingRowHeight: 32,
dataRowHeight: 24,
columns: [
DataColumn(
label: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 20,
minWidth: 20,
),
child: Text('Short column'),
),
),
DataColumn(label: Text('Long column')),
DataColumn(label: Text('Long column')),
],
rows: [
DataRow(
cells: [
DataCell(
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 20,
minWidth: 20,
),
child: Text('1'),
),
),
DataCell(
Wrap(
children: [
Text(
"""Some long content i would like to be wrapped when column width is not
enought to fully display it"""),
],
),
),
DataCell(Text('Some more text')),
],
),
DataRow(
cells: [
DataCell(Container(
color: Colors.pink,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 20,
minWidth: 20,
),
child: Text('2'),
),
)),
DataCell(
Wrap(
children: [
Container(
color: Colors.yellow,
child: Text(
"""Some long content i would like to be wrapped when column width is not
enought to fully display it""")),
],
),
),
DataCell(Text('Some more text')),
],
)
]),
),
),
),
]),
),
);
}
}
编辑
感谢@awaik 的回答,但在您的示例中,表格没有占据整个设备宽度,它仍然在中间有一个大屏幕,这不是我想要的。
此外,行高是恒定的,如果内容需要更高的高度,它不会增加。
有什么可以做的吗?
解决方案
DataTable 有一些默认值:
DataTable({
Key key,
@required this.columns,
this.sortColumnIndex,
this.sortAscending = true,
this.onSelectAll,
this.dataRowHeight = kMinInteractiveDimension,
this.headingRowHeight = 56.0,
this.horizontalMargin = 24.0,
this.columnSpacing = 56.0,
在删除了一些小部件的固定示例下方。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: DataTable(
horizontalMargin: 6.0,
columnSpacing: 6.0,
headingRowHeight: 32.0,
dataRowHeight: 100.0,
columns: [
DataColumn(
label: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 20,
minWidth: 20,
),
child: Text('Short column'),
),
),
DataColumn(label: Text('Long column')),
DataColumn(label: Text('Three')),
],
rows: [
DataRow(
cells: [
DataCell(
Text('1'),
),
DataCell(
Container(
child: Text(
'Some long content i would like to be wrapped ',
),
),
),
DataCell(Text('Some more text')),
],
),
DataRow(
cells: [
DataCell(Container(
color: Colors.pink,
child: Text('2'),
)),
DataCell(
Container(
height: 500,
color: Colors.yellow,
child: Text(
'Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it 555',
),
),
placeholder: false),
DataCell(Text('Some more text')),
],
),
],
),
),
),
);
}
}
编辑
- 向上的代码已更新。
- 表格不是全宽的,因为我们使用了带有树“””的多行字符串。如果我们使用常规字符串,则行为是正常的。
行高在构造函数中设置,不能动态更改。
孩子:DataTable(水平边距:6.0,columnSpacing:6.0,headingRowHeight:32.0,dataRowHeight:100.0,
最后,我个人的观点 - 创建自己的小部件而不是使用它更容易DataTable
推荐阅读
- facebook-graph-api - 如何识别我的 Java restfb 调用中的错误以发布到我的个人 Facebook 提要?
- python - spacy - 模式匹配
- google-apps-script - 打开新标签后如何触发我的 Google App 脚本?
- string - 将具有空元素的字符串向量转换为连接的字符串向量
- c++ - 哪种数据结构最适合这个问题
- python - 拒绝角色连接到某个语音通道 [discord.py]
- java - webflux 构造错误的 URL 值
- python - 即使在使用基本教程时,Matplotlib 动画也会显示空白图
- ubuntu-18.04 - mkvirtualenv 错误:ModuleNotFoundError:没有名为“distutils.sysconfig”的模块(Ubuntu 18.04)
- javascript - 如何从正则表达式中排除括号中的内容