Flutter楼层平面构建插件floor_plan_builder的使用

Floor Plan Builder 是一个用于 Flutter 的软件包，允许你创建具有可自定义桌子的交互式楼层平面图。它提供了一种简单的方式来可视化和与各种空间中的桌子布局进行互动。

功能

• 创建具有多个桌子的楼层平面图
• 支持不同的桌子形状（圆形、矩形）
• 楼层平面图支持交互式拖拽和缩放
• 可自定义的桌子属性（名称、座位容量、可用性）
• 响应式设计，适应不同屏幕尺寸
• 轻松集成到现有的 Flutter 项目中

安装

在你的项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  floor_plan_builder: ^0.1.0

然后运行 flutter pub get 来安装该库。

使用示例

以下是一个完整的示例，展示了如何使用 floor_plan_builder 插件来创建一个包含不同形状桌子的楼层平面图。

import 'package:flutter/material.dart';
import 'package:floor_plan_builder/floor_plan_builder.dart';
import 'package:floor_plan_builder/models/table_model.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 存储已选择的桌子
  List<TableModel> selectedTables = [];

  // 处理桌子点击事件
  void _onTableTap(TableModel table) {
    setState(() {
      if (selectedTables.contains(table)) {
        selectedTables.remove(table); // 如果已经选择了这张桌子，则取消选择
      } else {
        selectedTables.add(table); // 否则，选择这张桌子
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义桌子数据
    final tablesJson = [
      {
        "id": 1,
        "shape": "round-4", // 圆形桌子，可容纳4人
        "x": 543.046875,
        "y": 33,
        "name": "Table 1",
        "seatingCapacity": "4",
        "availability": "available"
      },
      {
        "id": 2,
        "shape": "rectangle-2", // 矩形桌子，可容纳2人
        "x": 350.046875,
        "y": 133,
        "name": "Table 2",
        "seatingCapacity": "2",
        "availability": "not-available"
      },
      {
        "id": 3,
        "shape": "rectangle-8", // 矩形桌子，可容纳8人
        "x": 263.046875,
        "y": 358,
        "name": "Table 3",
        "seatingCapacity": "8",
        "availability": "available"
      },
      {
        "id": 4,
        "shape": "rectangle-6", // 矩形桌子，可容纳6人
        "x": 151.0390625,
        "y": 53,
        "name": "Table 4",
        "seatingCapacity": "6",
        "availability": "available"
      }
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('楼层平面图')), // 设置应用栏标题
        body: Column(
          children: [
            // 创建楼层平面图
            FloorPlanBuilder(
              tablesJson: tablesJson, // 提供桌子数据
              onTableTap: _onTableTap, // 设置桌子点击事件处理器
              height: 350, // 设置高度
            ),
            Expanded(
              child: ListView(
                children: selectedTables
                    .map((table) => ListTile(
                          title: Text(table.name), // 显示桌子名称
                          subtitle: Text(
                              '座位容量: ${table.seatingCapacity}'), // 显示座位容量
                        ))
                    .toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}