FlutterでGridViewをページ分割する方法

2年 ago
光, 明
1 minute

Flutterでは、PaginatedDataTableウィジェットを利用することでGridViewのページネーションを実現可能。PaginatedDataTableはDataTableとPaginatedDataTableSourceを組み合わせてページネーションとデータソースを処理する。

以下に、GridViewでページングを行うシンプルな例を示します。

  1. ページネーション
  2. pubspec.yaml
dependencies:
flutter:
sdk: flutter
paginated_data_table: ^1.0.0
  1. ネイティブの日本語で文を言い換えます。1つのオプションのみが必要です: package:paginated_data_table/paginated_data_table.dart
  2. ネイティブの日本語で段落を言い換えてください。オプションは1つだけで十分です: package:paginated_data_table/paginated_data_table_source.dart
import 'package:flutter/material.dart';
import 'package:paginated_data_table/paginated_data_table.dart';
import 'package:paginated_data_table/paginated_data_table_source.dart';
  1. MyDataTableSource
  2. ページング可能なデータテーブルソース
class MyDataTableSource extends PaginatedDataTableSource {
final List<dynamic> data;
MyDataTableSource(this.data);
@override
DataRow? getRow(int index) {
if (index >= data.length) {
return null;
}
final item = data[index];
return DataRow.byIndex(
index: index,
cells: [
DataCell(Text(item['name'])),
DataCell(Text(item['age'].toString())),
DataCell(Text(item['gender'])),
],
);
}
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => data.length;
@override
int get selectedRowCount => 0;
}
  1. 作る
  2. ページネーション付きデータテーブル
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Paginated GridView Demo'),
),
body: PaginatedDataTable(
header: Text('Students'),
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('Age')),
DataColumn(label: Text('Gender')),
],
source: MyDataTableSource(data), // 传递自定义的数据源
rowsPerPage: 10, // 每页显示的行数
),
);
}

これにより、GridView でページャーを操作できます。また、独自のニーズに合わせてデータソースクラスとページャーウィジェットを最適化してカスタマイズできます。

bannerAds