列大小调整在Syncfusion Flutter DataGrid中不起作用?

eiee3dmh  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(169)

我想使用Flutter实现列大小调整行为,我使用的是syncfusion_flutter_datagrid: ^21.1.35包,我的flutter版本是3.7.7,dart版本是2.19.4,下面是完整的代码:

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

class TestFile extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<TestFile> {
  final List<Data> _data = [
    Data('John', 'Doe', 30),
    Data('Jane', 'Doe', 25),
    Data('Bob', 'Smith', 40),
    Data('Alice', 'Johnson', 35),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SfDataGrid Column Resizing Example')),
      body: SfDataGrid(
        source: _DataSource(data: _data),
        columnWidthMode: ColumnWidthMode.fill,
        allowColumnsResizing: true,
        columnResizeMode: ColumnResizeMode.onResize,
        columns: <GridColumn>[
          GridColumn(columnName: 'firstName', label: const Text('First Name')),
          GridColumn(columnName: 'lastName', label: const Text('Last Name')),
          GridColumn(columnName: 'age', label: const Text('Age')),
        ],
      ),
    );
  }
}

class _DataSource extends DataGridSource {
  final List<Data> data;

  _DataSource({required this.data});

  @override
  List<DataGridRow> get rows =>
      data.map((d) => DataGridRow(cells: [
        DataGridCell<String>(columnName: 'firstName', value: d.firstName),
        DataGridCell<String>(columnName: 'lastName', value: d.lastName),
        DataGridCell<int>(columnName: 'age', value: d.age),
      ])).toList();

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

class Data {
  final String firstName;
  final String lastName;
  final int age;

  Data(this.firstName, this.lastName, this.age);
}

我想在Flutter web上实现这个功能。我使用Chrome(版本107.0.5304.110(官方版本)(64位))来运行这个项目,我的操作系统是Ubuntu版本22。

cwtwac6a

cwtwac6a1#

你需要添加一些东西如下:
首先,定义列宽,

late Map<String, double> columnWidths = {
'name': double.nan,
'lastname': double.nan,
'age': double.nan
 };

第二
onColumnResizeUpdate添加回调并设置columnResizeMode: ColumnResizeMode.onResizeEnd,

onColumnResizeUpdate: (ColumnResizeUpdateDetails details) {
      setState(() {
        columnWidths[details.column.columnName] = details.width;
      });
      return true;
    },

    columnResizeMode: ColumnResizeMode.onResizeEnd,

第三次
columnName添加到每个GridColumn,名称应与您在columnWidths Map中添加的名称相同

GridColumn(
          width: columnWidths['name']!,
          columnName: 'name',
          label: const Text('First Name')),

完整代码如下:

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

class TestFile extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<TestFile> {
  final List<Data> _data = [
    Data('John Carter n Others', 'Doe', 30),
    Data('Jane', 'Doe', 25),
    Data('Bob', 'Smith', 40),
    Data('Alice', 'Johnson', 35),
  ];

  late Map<String, double> columnWidths = {
    'name': double.nan,
    'lastname': double.nan,
    'age': double.nan
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SfDataGrid Column Resizing Example')),
      body: SfDataGrid(
        source: _DataSource(data: _data),
        allowColumnsResizing: true,
        onColumnResizeUpdate: (ColumnResizeUpdateDetails details) {
          setState(() {
            columnWidths[details.column.columnName] = details.width;
          });
          return true;
        },
        columnResizeMode: ColumnResizeMode.onResizeEnd,
        columns: <GridColumn>[
          GridColumn(
              width: columnWidths['name']!,
              columnName: 'name',
              label: const Text('First Name')),
          GridColumn(
              width: columnWidths['lastname']!,
              columnName: 'lastname',
              label: const Text('Last Name')),
          GridColumn(
              width: columnWidths['age']!,
              columnName: 'age',
              label: const Text('Age')),
        ],
      ),
    );
  }
}

class _DataSource extends DataGridSource {
  final List<Data> data;

  _DataSource({required this.data});

  @override
  List<DataGridRow> get rows => data
      .map((d) => DataGridRow(cells: [
            DataGridCell<String>(columnName: 'firstName', value: d.firstName),
            DataGridCell<String>(columnName: 'lastName', value: d.lastName),
            DataGridCell<int>(columnName: 'age', value: d.age),
          ]))
      .toList();

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

class Data {
  final String firstName;
  final String lastName;
  final int age;

  Data(this.firstName, this.lastName, this.age);
}

注意:您需要长按列标题以获得可拖动的垂直线

相关问题