Flutter网格布局插件 apptive_grid_grid_builder 的使用

apptive_grid_grid_builder 是一个用于基于网格数据构建Widget的Flutter插件。本文将详细介绍如何在你的Flutter项目中使用该插件，并提供一个完整的示例。

插件信息

• Pub Package
• 评分和受欢迎度

主要功能

该插件允许你通过ApptiveGrid提供的API轻松地从网格数据中构建UI组件。

使用方法

1. 初始化ApptiveGrid

为了使用任何ApptiveGrid的功能，必须用一个ApptiveGrid Widget包装你的应用程序：

import 'package:apptive_grid_core/apptive_grid_core.dart';

void main() {
  runApp(
    ApptiveGrid(
      options: ApptiveGridOptions(
        authenticationOptions: ApptiveGridAuthenticationOptions(
          autoAuthenticate: true,
        ),
      ),
      child: MyApp(),
    ),
  );
}

2. 使用ApptiveGridGridBuilder

接下来，在需要展示网格数据的地方添加ApptiveGridGridBuilder：

body: ApptiveGridGridBuilder(
  uri: Uri.parse('LINK_TO_GRID'),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Center(child: Text('Error: ${snapshot.error}'));
    } else if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    } else {
      return ListView.builder(
        itemCount: snapshot.data!.rows?.length ?? 0,
        itemBuilder: (context, index) {
          final row = snapshot.data!.rows![index];
          return ListTile(
            title: Text(row.entries[1].data.schemaValue),
            subtitle: Text(row.entries[0].data.value.toString()),
          );
        },
      );
    }
  },
),

认证

自动认证

你可以设置autoAuthenticate为true来自动触发认证过程：

authenticationOptions: ApptiveGridAuthenticationOptions(
  autoAuthenticate: true,
),

API Key认证

如果你希望通过API Key进行认证，可以在ApptiveGridAuthenticationOptions中添加ApptiveGridApiKey：

authenticationOptions: ApptiveGridAuthenticationOptions(
  autoAuthenticate: true,
  apiKey: ApptiveGridApiKey(
    authKey: 'YOUR_AUTH_KEY',
    password: 'YOUR_AUTH_KEY_PASSWORD',
  ),
),

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中集成并使用apptive_grid_grid_builder插件：

// ignore_for_file: public_member_api_docs

import 'package:apptive_grid_grid_builder/apptive_grid_grid_builder.dart';
import 'package:flutter/material.dart';

void main() async {
  await enableWebAuth(const ApptiveGridOptions());
  runApp(
    ApptiveGrid(
      options: const ApptiveGridOptions(
        environment: ApptiveGridEnvironment.alpha,
        authenticationOptions: ApptiveGridAuthenticationOptions(
          autoAuthenticate: true,
          apiKey: ApptiveGridApiKey(
            authKey: 'YOUR_AUTH_KEY',
            password: 'YOUR_AUTH_KEY_PASSWORD',
          ),
        ),
      ),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ApptiveGrid Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  const _MyHomePage();

  [@override](/user/override)
  State<_MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  final GlobalKey<ApptiveGridGridBuilderState> _builderKey = GlobalKey();

  List<ApptiveGridSorting>? _sorting;

  SortOrder _order = SortOrder.asc;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Grid Builder'),
        actions: [
          IconButton(
            onPressed: () {
              late final SortOrder newOrder;
              if (_order == SortOrder.asc) {
                newOrder = SortOrder.desc;
              } else {
                newOrder = SortOrder.asc;
              }
              setState(() {
                if (_sorting != null) {
                  _sorting = [_sorting!.first.copyWith(order: newOrder)];
                  _order = newOrder;
                }
              });
            },
            icon: Icon(
              _order == SortOrder.asc ? Icons.arrow_drop_up : Icons.arrow_drop_down,
            ),
          ),
        ],
      ),
      body: ApptiveGridGridBuilder(
        key: _builderKey,
        uri: Uri.parse('/api/users/USER_ID/spaces/SPACE_ID/grids/GRID_ID'),
        sorting: _sorting,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          } else {
            if (_sorting == null) {
              WidgetsBinding.instance.addPostFrameCallback((_) {
                late final ApptiveGridSorting newSorting;
                if (snapshot.data!.fields?.first.type == DataType.geolocation) {
                  newSorting = DistanceApptiveGridSorting(
                    fieldId: snapshot.data!.fields!.first.id,
                    order: _order,
                    location: const Geolocation(latitude: 50.938757, longitude: 6.954399),
                  );
                } else {
                  newSorting = ApptiveGridSorting(fieldId: snapshot.data!.fields!.first.id, order: _order);
                }
                setState(() {
                  _sorting = [newSorting];
                });
              });
            }
            return RefreshIndicator(
              onRefresh: () => _builderKey.currentState?.reload() ?? Future.value(),
              child: ListView.separated(
                itemCount: snapshot.data!.rows?.length ?? 0,
                separatorBuilder: (context, index) => const Divider(),
                itemBuilder: (context, index) {
                  final row = snapshot.data!.rows![index];
                  return ListTile(
                    title: Text(row.entries[1].data.schemaValue),
                    subtitle: Text(row.entries[0].data.value.toString()),
                  );
                },
              ),
            );
          }
        },
      ),
    );
  }
}