Flutter Syncfusion DataGrid columnWidthMode：ColumnWidthMode.lastColumnFill，单行无法正常工作

Question

Flutter Syncfusion DataGrid 中单行的

ColumnWidthMode.lastColumnFill

问题

我遇到了 Syncfusion Flutter 包中的

SfDataGrid

的问题，特别是在使用

ColumnWidthMode.lastColumnFill

设置时。当网格中只有一行时就会出现问题。

对于多行，网格的行为符合预期：列根据单元格中的文本调整其宽度，最后一列正确填充剩余空间。但是，当只有一行时，

lastColumnFill

模式似乎无法正常工作。列宽没有根据单元格中的文本内容进行调整，导致对齐和间距不正确的问题。

以下是该行为的摘要：

• 多行：网格列根据行调整宽度 单元格的内容，最后一列填充剩余宽度 正如预期的那样。
• 单行： 列宽不根据 文本内容，最后一列不填满剩余空间 正确。

如果有任何有关如何解决此问题或是否有任何已知解决方法的建议，我将不胜感激。有没有人遇到过类似的问题，或者有没有人有建议来确保 ColumnWidthMode.lastColumnFill 即使在单行情况下也能正常工作？

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SfDataGrid Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DataGridScreen(),
    );
  }
}

class DataGridScreen extends StatelessWidget {
  final List<Employee> _employees = [
    Employee(
      id: 1,
      name: 'Employee Employee Employee Employee Employee Employee',
      designation: 'Developer Developer Developer Developer Developer',
    ),
  ];

  final List<Employee> _employees2 = List.generate(
    10,
    (index) => Employee(
      id: index + 1,
      name:
          'Employee Employee Employee Employee Employee Employee ${index + 1}',
      designation: index % 2 == 0
          ? 'Developer Developer Developer Developer Developer'
          : 'Designer Designer Designer Designer Designer',
    ),
  );

  DataGridScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SfDataGrid with lastColumnFill'),
      ),
      body: Column(
        children: [
          SfDataGrid(
            source: EmployeeDataSource(employees: _employees),
            columnWidthMode: ColumnWidthMode.lastColumnFill,
            columns: <GridColumn>[
              GridColumn(
                columnName: 'id',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              GridColumn(
                columnName: 'name',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'Name',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              GridColumn(
                columnName: 'designation',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 5),
          SfDataGrid(
            source: EmployeeDataSource(employees: _employees2),
            columnWidthMode: ColumnWidthMode.lastColumnFill,
            columns: <GridColumn>[
              GridColumn(
                columnName: 'id',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              GridColumn(
                columnName: 'name',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'Name',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              GridColumn(
                columnName: 'designation',
                label: Container(
                  padding: const EdgeInsets.all(8),
                  alignment: Alignment.center,
                  child: const Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class Employee {
  Employee({required this.id, required this.name, required this.designation});

  final int id;
  final String name;
  final String designation;
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employees}) {
    dataGridRows = employees.map<DataGridRow>((employee) {
      return DataGridRow(cells: [
        DataGridCell<int>(columnName: 'id', value: employee.id),
        DataGridCell<String>(columnName: 'name', value: employee.name),
        DataGridCell<String>(
            columnName: 'designation', value: employee.designation),
      ]);
    }).toList();
  }

  List<DataGridRow> dataGridRows = [];

  @override
  List<DataGridRow> get rows => dataGridRows;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
      cells: row.getCells().map<Widget>((dataGridCell) {
        return Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: Text(dataGridCell.value.toString()),
        );
      }).toList(),
    );
  }
}

Answer 1

上述问题已在最新版本中解决。请将SfDataGrid更新至版本26.2.10。