DataTable列宽问题
DataTable列宽问题
提问于 2020-05-09 14:54:12
我试图在Flutter中构建一个全宽度的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的回答，但在您的示例中，表并没有采用完全的设备宽度，而是保持在中间，有一个大屏幕，这不是我想要的。
此外，行高是恒定的，如果内容需要更多的高度，它不会增加。
有什么可以做的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-17 18:25:54
我发现普通的Table允许我做我想做的事情:我可以使用FixedColumnWidth作为特定的列，而FlexColumnWidth用于其他列，以便占用剩余的空间。
此外，正确地包装文本并增加行高以适应内容，例如在下面的图像中，屏幕宽度较小，屏幕宽度较大：
这是密码：
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(
child: SingleChildScrollView(
child: Table(
border: TableBorder.all(width: 1),
columnWidths: {
0: FixedColumnWidth(20),
},
defaultColumnWidth: FlexColumnWidth(),
children: [
TableRow(children: [
Text('Short column'),
Text('Long column'),
Text('Long column')
]),
TableRow(
children: [
Text('1'),
Text(
'Some long content i would like to be wrapped when column width is not enought to fully display it'),
Container(
child: Text('Some more text'),
)
],
)
],
),
),
),
),
]),
),
);
}
}Stack Overflow用户
发布于 2020-05-12 03:30:53
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( horizontalMargin: 6.0，columnSpacing: 6.0，headingRowHeight: 32.0，dataRowHeight: 100.0，
最后，我个人的观点--使用这个DataTable创建您自己的小部件更容易。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61698700
复制相关文章
相似问题
腾讯云开发者
