[我正在尝试在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')),
],
)
]),
),
),
),
]),
),
);
}
}
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: 0,
columnSpacing: 0,
headingRowHeight: 32,
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 when column width is not
enought to fully display it""",
),
),
),
DataCell(Text('Some more text')),
],
),
DataRow(
cells: [
DataCell(Container(
color: Colors.pink,
child: Text('2'),
)),
DataCell(
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')),
],
),
],
),
),
),
);
}
}
结果看起来像这样