我想使用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。
1条答案
按热度按时间cwtwac6a1#
你需要添加一些东西如下:
首先,定义列宽,
第二
为
onColumnResizeUpdate
添加回调并设置columnResizeMode: ColumnResizeMode.onResizeEnd,
第三次
将
columnName
添加到每个GridColumn
,名称应与您在columnWidths
Map中添加的名称相同完整代码如下:
注意:您需要长按列标题以获得可拖动的垂直线