如何在Flutter中更改DataTable的列宽?

ubbxdtey  于 2023-03-24  发布在  Flutter
关注(0)|答案(5)|浏览(483)

我的Flutter应用程序中有一个DataTable。问题是填充数据时,列的宽度是自动设置的,而且它太大了。我如何手动设置列宽?我试图在“Widget build”中更改宽度参数,但它更改了整个表的宽度,但不是所需的列。

4jb9z9bj

4jb9z9bj1#

columnSpacing属性添加到DataTable。默认情况下,该属性设置为56.0。

columnSpacing: 30.0
cedebl8k

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')))
              ])
        ]
      ),
    );
fbcarpbf

fbcarpbf3#

在数据库中使用 columnSpacing,然后设置1,这需要列文本的长度

columnSpacing: 0,
xggvc2p6

xggvc2p64#

比按照接受的答案使用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

gojuced7

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'),
                )))
      ],
    );
  })
]);

相关问题