Flutter数据网格展示插件vph_data_grid的使用

Flutter数据网格展示插件vph_data_grid的使用

特性

• 列大小调整：用户可以自定义列的宽度。
• 列尺寸调整：允许用户动态调整列宽。
• 列排序：支持对列进行排序。
• 列过滤：提供列过滤功能。
• 本地化：支持多种语言。

本地化设置

要在应用中注册新的本地化类，可以扩展DataGridLocalizations类。例如：

void main() {
    DataGridLocalizations.registerLocalization(DataGridLocalizationsVi());
    runApp(const MyApp());
}

在MaterialApp中添加本地化委托和本地化区域：

MaterialApp(
    localizationsDelegates: const [
        DataGridLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: const [
        Locale('en'),
        Locale('vi'),
    ],
    ...
)

示例代码

以下是一个完整的示例，展示了如何使用vph_data_grid插件来创建一个数据网格。

import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:vph_data_grid/vph_data_grid.dart';
import 'package:flutter/material.dart';

import 'data_grid_localizations_vi.dart';
import 'publish_apis_data_source.dart';

void main() {
  DataGridLocalizations.registerLocalization(DataGridLocalizationsVi());
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Locale> _supportedLocales = const [
    Locale('en'),
    Locale('vi'),
  ];
  late Locale _selectedLocale;
  late PublishAPIsDataSource _dataSource;

  [@override](/user/override)
  void initState() {
    super.initState();

    _selectedLocale = _supportedLocales[0];
    _dataSource = PublishAPIsDataSource();
    _dataSource.fetch(startIndex: 0, count: 10);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      localizationsDelegates: const [
        AppLocalizations.delegate,
        DataGridLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: _supportedLocales,
      locale: _selectedLocale,
      onGenerateTitle: (context) => AppLocalizations.of(context)!.appTitle,
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(AppLocalizations.of(context)!.appTitle),
            actions: [
              PopupMenuButton<Locale>(
                initialValue: _selectedLocale,
                onSelected: (value) {
                  if (value != _selectedLocale) {
                    setState(() {
                      _selectedLocale = value;
                    });
                  }
                },
                itemBuilder: (context) {
                  return const [
                    PopupMenuItem(
                      value: Locale("en"),
                      child: ListTile(
                          leading: Text("🇺🇸", style: TextStyle(fontSize: 28)),
                          title: Text("English")),
                    ),
                    PopupMenuItem(
                      value: Locale("vi"),
                      child: ListTile(
                          leading: Text("🇻🇳", style: TextStyle(fontSize: 28)),
                          title: Text("Tiếng Việt")),
                    ),
                  ];
                },
                icon: const Icon(Icons.language),
              ),
            ],
          ),
          body: DataGridTheme(
            data: const DataGridThemeData(),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Expanded(
                    child: DataGrid(
                      borderStyle: DataGridBorderStyle.all,
                      //freezeColumns: 1,
                      source: _dataSource,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}