我是一个初学者在扑动移动开发。我目前使用一个包在颤振叫syncfusion_flutter_datagrid SFDataPager我有一个问题,这是用于分页,不是工作和SFDataGrid仍然滚动而不是分为页,虽然pageCount工作和有2页(我目前有15个项数据表),因为它不仅计算,但rowsPerPages不是因为数据表格仍有15项工作,仍可滚动。我不知道我的代码中是否有任何缺失，特别是在DataGridSource类中，因为SFDataGrid和SFDataPager都连接到DataGridSource。
下面是我在视图类中的小部件:
AppDataGrid(
dtrHistoryData: _controller.historyData.value,
columns: _controller.columns,
),
SizedBox(
height: dataPagerHeight,
width: double.maxFinite,
// color: Colors.white,
child: Center(
child: SfDataPager(
pageCount: ((_controller.historyData.value.timeData
?.length ??
1) /
10)
.ceilToDouble(),
delegate: DTRHistoryDataGridSource(
dtrHistoryData: _controller.historyData.value),
direction: Axis.horizontal,
),
),
),
这是SFDataGrid (AppDataGrid):
import 'package:flutter/material.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import '../../data/table/history_table2_data.dart';
class AppDataGrid extends StatelessWidget {
final DTRHistoryData dtrHistoryData;
final List<GridColumn> columns;
const AppDataGrid({
super.key,
required this.dtrHistoryData,
required this.columns,
});
@override
Widget build(BuildContext context) {
return Expanded(
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: transparent,
elevation: 0,
child: SfDataGridTheme(
data: SfDataGridThemeData(
headerColor: secondaryColor,
),
child: SfDataGrid(
rowsPerPage: 11,
verticalScrollPhysics: const ClampingScrollPhysics(),
horizontalScrollPhysics: const ClampingScrollPhysics(),
headerGridLinesVisibility: GridLinesVisibility.none,
gridLinesVisibility: GridLinesVisibility.horizontal,
source: DTRHistoryDataGridSource(
dtrHistoryData: dtrHistoryData,
),
columns: columns,
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/global/constants/styles.dart';
import 'package:puncher_app/app/global/widgets/app_text.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
class DTRHistoryDataGridSource extends DataGridSource {
late List<DataGridRow> _dtrHistoryDataGridRows;
late DTRHistoryData _dtrHistoryData = DTRHistoryData();
DTRHistoryDataGridSource({required DTRHistoryData dtrHistoryData}) {
_dtrHistoryData = dtrHistoryData;
buildDataGridRows();
}
void buildDataGridRows() {
final dateFormat = DateFormat('hh:mm a');
_dtrHistoryDataGridRows = _dtrHistoryData.timeData
?.map<DataGridRow>(
(timeData) => DataGridRow(
cells: [
DataGridCell<String>(
columnName: 'Date',
value: timeData.date,
),
DataGridCell<String>(
columnName: 'Time In',
value: timeData.timeIn?.isNotEmpty == true
? dateFormat.format(
DateTime.parse(timeData.timeIn!),
)
: '--',
),
DataGridCell<String>(
columnName: 'Time Out',
value: timeData.timeOut?.isNotEmpty == true
? dateFormat.format(
DateTime.parse(timeData.timeOut!),
)
: '--',
),
DataGridCell<String>(
columnName: 'Duration',
value: timeData.duration != null
? formatDuration(timeData.duration!)
: '--',
)
],
),
)
.toList() ??
[];
}
String formatDuration(String duration) {
final parts = duration.split(' ');
final hours = parts[0];
final minutes = parts[2];
return '${hours}h${minutes}m';
}
@override
List<DataGridRow> get rows => _dtrHistoryDataGridRows;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: Alignment.center,
// padding: const EdgeInsets.all(16.0),
child: AppText(
text: dataGridCell.value.toString(),
textColor: secondaryColor,
style: kRegTextBlack,
alignment: TextAlign.center,
));
}).toList());
}
@override
Object getValue(int rowIndex, String columnName) {
final TimeData timeData = _dtrHistoryData.timeData![rowIndex];
switch (columnName) {
case 'Date':
return timeData.date!;
case 'Time In':
return timeData.timeIn!;
case 'Time Out':
return timeData.timeOut!;
case 'Duration':
return timeData.duration!;
default:
return '';
}
}
}
为了确保DataGrid和DataPager组件的正常功能，避免创建SfDataGrid.source非常重要。和SfDataPager.delegate分开。相反，请为DTRHistoryDataGridSource创建一个实例，并将其分配给两个SfDataGrid。source和SfDataPager.delegate属性。为了方便起见，我在下面附上了一个代码片段和示例来演示这种方法。
代码片段:
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = [];
@override
void initState() {
super.initState();
_employees = populateData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Demo Sample'),
),
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
child: SfDataGrid(
rowsPerPage: 11,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: getColumns)),
SizedBox(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
pageCount: (_employees.length / 10).ceilToDouble(),
delegate: _employeeDataSource,
direction: Axis.horizontal,
),
)
],
);
},
),
);
}
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: 'Syncfusion DataGrid Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
MyHomePageState createState() => MyHomePageState();
}
List<Employee> paginatedDataSource = [];
class MyHomePageState extends State<MyHomePage> {
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = [];
@override
void initState() {
super.initState();
_employees = populateData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Demo Sample'),
),
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
child: SfDataGrid(
rowsPerPage: 11,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: getColumns)),
SizedBox(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
pageCount: (_employees.length / 10).ceilToDouble(),
delegate: _employeeDataSource,
direction: Axis.horizontal,
),
)
],
);
},
),
);
}
List<GridColumn> get getColumns {
return <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'designation',
width: 110,
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'salary',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
];
}
}
List<Employee> populateData() {
return [
Employee(10001, 'Jack', 'Manager', 150000),
Employee(10002, 'Perry', 'Project Lead', 80000),
Employee(10003, 'James', 'Developer', 55000),
Employee(10004, 'Michael', 'Designer', 39000),
Employee(10005, 'Roland Mendel', 'Developer', 45000),
Employee(10006, 'Sven', 'UI Designer', 36000),
Employee(10007, 'Williams', 'Developer', 44000),
Employee(10008, 'Adams', 'Developer', 43000),
Employee(10009, 'Edwards', 'QA Testing', 43000),
Employee(10010, 'Grimes', 'Developer', 43000),
Employee(10011, 'Maria Andres', 'Developer', 41000),
Employee(10012, 'Thomas Hardy', 'Developer', 40000),
Employee(10013, 'Hanna Moos', 'Sales Associate', 350000),
Employee(10014, 'Elizabeth', 'Developer', 41000),
Employee(10015, 'Patrick Simpson', 'Administrator', 33000)
];
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
buildDataGridRows(employees);
}
List<DataGridRow> _employeeData = [];
@override
List<DataGridRow> get rows => _employeeData;
void buildDataGridRows(List<Employee> employees) {
_employeeData = employees
.map<DataGridRow>((e) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: e.id),
DataGridCell<String>(columnName: 'name', value: e.name),
DataGridCell<String>(
columnName: 'designation', value: e.designation),
DataGridCell<int>(columnName: 'salary', value: e.salary),
]))
.toList();
}
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((e) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(e.value.toString()),
);
}).toList());
}
}
class Employee {
Employee(this.id, this.name, this.designation, this.salary);
final int id;
final String name;
final String designation;
final int salary;
}