我的Flutter应用程序中有一个DataTable。问题是填充数据时,列的宽度是自动设置的,而且它太大了。我如何手动设置列宽?我试图在“Widget build”中更改宽度参数,但它更改了整个表的宽度,但不是所需的列。
4jb9z9bj1#
将columnSpacing属性添加到DataTable。默认情况下,该属性设置为56.0。
columnSpacing
columnSpacing: 30.0
cedebl8k2#
@Smith,你的意思是你不能这样做?如果你能分享一些代码......
Widget build(BuildContext context) { return Scaffold( body: DataTable( columns: [DataColumn(label: Text('label'))], rows: [ DataRow(cells: [DataCell( Container( width: 200, //SET width child: Text('text'))) ]) ] ), );
fbcarpbf3#
在数据库中使用 columnSpacing,然后设置1,这需要列文本的长度
columnSpacing: 0,
xggvc2p64#
比按照接受的答案使用Container更好,使用ConstrainedBox,这样单元格的大小只会在内容等于或超过约束宽度时增加。
Container
ConstrainedBox
import 'package:flutter/material.dart'; void main() async { runApp( MaterialApp( home: Scaffold( body: Card( child: DataTable(columns: [ DataColumn( label: Text( 'short text column'.toUpperCase(), style: TextStyle(fontWeight: FontWeight.bold), )), DataColumn( label: Text( 'long text column'.toUpperCase(), style: TextStyle(fontWeight: FontWeight.bold), )), ], rows: [ DataRow(cells: [ DataCell(Text('short text')), DataCell(ConstrainedBox( constraints: BoxConstraints(maxWidth: 250), //SET max width child: Text('very long text blah blah blah blah blah blah', overflow: TextOverflow.ellipsis))), ]), DataRow(cells: [ DataCell(Text('short text')), DataCell(ConstrainedBox( constraints: BoxConstraints(maxWidth: 250), //SET max width child: Text('very long text blah blah blah blah blah blah', overflow: TextOverflow.ellipsis))), ]) ]), ), ), ), ); }
查看Dartpad example
gojuced75#
除了Reginaldo Costa的答案之外,我还添加了LayoutBuilder来获取约束,并将其与SizedBox一起使用,以根据宽度约束动态调整宽度。在开发Flutter web时可能会很有用。这里我设置了一个列的宽度为90%,另一个列的宽度为10%。
return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ LayoutBuilder(builder: (context, constraints) { return PaginatedDataTable( rowsPerPage: 5, source: dataSource, showFirstLastButtons: true, columnSpacing: 50, horizontalMargin: 0, columns: [ DataColumn( label: SizedBox( // 130 is the amount of space consumed by horizontal Paddings and Margins width: (constraints.maxWidth - 130) * 0.9, child: const Padding( padding: EdgeInsets.fromLTRB(15, 8, 8, 8), child: Text('Username'), ))), DataColumn( label: SizedBox( width: (constraints.maxWidth - 130) * 0.1, child: const Padding( padding: EdgeInsets.fromLTRB(15, 8, 8, 8), child: Text('Actions'), ))) ], ); }) ]);
5条答案
按热度按时间4jb9z9bj1#
将
columnSpacing
属性添加到DataTable。默认情况下,该属性设置为56.0。cedebl8k2#
@Smith,你的意思是你不能这样做?如果你能分享一些代码......
fbcarpbf3#
在数据库中使用 columnSpacing,然后设置1,这需要列文本的长度
xggvc2p64#
比按照接受的答案使用
Container
更好,使用ConstrainedBox
,这样单元格的大小只会在内容等于或超过约束宽度时增加。查看Dartpad example
gojuced75#
除了Reginaldo Costa的答案之外,我还添加了LayoutBuilder来获取约束,并将其与SizedBox一起使用,以根据宽度约束动态调整宽度。
在开发Flutter web时可能会很有用。这里我设置了一个列的宽度为90%,另一个列的宽度为10%。