在 Flutter 中构建大厅平面图。什么是最好的解决方案？

Question

我想在Flutter中做一个互动大厅平面图，但是不知道如何正确实现。

要点：

• 计划应在不损失质量的情况下扩展。
• 单击时该地点的视图应略有变化

第一种选择：是做成一个大尺寸的Canvas，放到InteractiveViewer中，但是不知道能不能在tap上改变已经绘制好的部分?

第二个选项： 是将每个地方制作成带有 onTap 事件的 SVG，并将其全部放入 Stack 小部件中。然后再次在 InteractiveViewer 中。但是计划上大概有500个座位，不知道手机能不能处理这样的场景缩放？

也许还有其他解决方案？非常感谢您的建议，我对 Flutter 的经验仍然很少。

Answer 1

这可以通过 InteractiveViewer 和 GridView 来实现：

对于任何形状的地方，你都可以用二维数组来绘制，比如

  List<List<int>> triangleHall = [
    [0, 0, 1, 0, 0],
    [0, 1, 1, 1, 0],
    [1, 1, 1, 1, 1],
  ]

  List<List<int>> arcHall = [
    [0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  ]

  List<Widget> _generateHallItem(List<List<int>> hall){
    List<Widget> list = [];

    hall.map((row) {
      row.map((item) {
        item == 0 ? list.add(Container(width:5, height:5)) : list.add(Container(width:5, height:5, color: Colors.red));      
      });      
    });
    return list;
  }

  Wrap(
    children: _generateHallItem,

或

  InteractiveViewer(
    minScale: 0.8,
    maxScale: 2.0,
    child: GridView(),
  ),

Answer 2

小时候尝试InteractiveViewer 和CustomMultiChildLayout（请注意，通过AnimationController，您可以轻松地为CinemaDelegate 内部的座位设置动画）：

class CinemaHall extends StatefulWidget {
  const CinemaHall({Key? key}) : super(key: key);

  @override
  _CinemaHallState createState() => _CinemaHallState();
}

class _CinemaHallState extends State<CinemaHall> with TickerProviderStateMixin {
  late List<Offset> positions;
  late List<ValueNotifier<bool>> states;
  late AnimationController ctrl;

  @override
  void initState() {
    super.initState();
    positions = [
      ...List.generate(8, (index) => (Offset(index + 1, 0))),
      for (int r = 1; r < 7; r++)
        ...List.generate(10, (index) => (Offset(index.toDouble(), r.toDouble()))),
    ];
    states = List.generate(positions.length, (index) => ValueNotifier(false));
    ctrl = AnimationController(vsync: this, duration: const Duration(milliseconds: 1000));
    Future.delayed(const Duration(milliseconds: 2000), () => ctrl.forward());
  }

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: const Color(0xff000044),
      child: InteractiveViewer(
        minScale: 1.0,
        maxScale: 3.0,
        child: CustomMultiChildLayout(
          delegate: CinemaHallDelegate(ctrl, positions, const Size(64, 64)),
          children: List.generate(positions.length, (index) => LayoutId(
            id: index,
            child: FittedBox(
              child: ValueListenableBuilder<bool>(
                valueListenable: states[index],
                builder: (context, state, child) {
                  return TweenAnimationBuilder<double>(
                    duration: const Duration(milliseconds: 500),
                    tween: Tween(end: state? 0.8 : 0.2),
                    builder: (context, t, child) {
                      return IconButton(
                        icon: Icon(index == 43? Icons.people : Icons.person, color: Colors.white.withOpacity(t)),
                        padding: EdgeInsets.zero,
                        iconSize: 64,
                        tooltip: 'seat ${positions[index].dy.toInt() + 1}, ${positions[index].dx.toInt() + 1}',
                        onPressed: () {
                          states[index].value = !state;
                          print(index);
                        },
                      );
                    }
                  );
                }
              ),
            )
          )),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    ctrl.dispose();
  }
}

class CinemaHallDelegate extends MultiChildLayoutDelegate {
  final AnimationController ctrl;
  final List<Offset> positions;
  final Size seatSize;
  late Size cinemaHallSize;

  CinemaHallDelegate(this.ctrl, this.positions, this.seatSize) : super(relayout: ctrl) {
    double cols = positions.map((o) => o.dx).reduce(max) + 1;
    double rows = positions.map((o) => o.dy).reduce(max) + 1;
    cinemaHallSize = Size(cols * seatSize.width, rows * seatSize.height);
  }

  @override
  void performLayout(ui.Size size) {
    final matrix = sizeToRect(cinemaHallSize, Offset.zero & size);
    final seatRect = MatrixUtils.transformRect(matrix, Offset.zero & seatSize);
    final center = size.center(Offset(-seatRect.width / 2, -seatRect.height / 2));

    int childId = 0;
    final constraints = BoxConstraints.tight(Size(seatRect.width, seatRect.height));
    final t = Curves.bounceOut.transform(ctrl.value);
    for (final position in positions) {
      layoutChild(childId, constraints);
      final offset = Offset(
        seatRect.left + position.dx * seatRect.width,
        seatRect.top + position.dy * seatRect.height);
      positionChild(childId, Offset.lerp(center, offset, t)!);
      childId++;
    }
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => false;
}

Matrix4 sizeToRect(Size src, Rect dst, {BoxFit fit = BoxFit.contain, Alignment alignment = Alignment.center}) {
  FittedSizes fs = applyBoxFit(fit, src, dst.size);
  double scaleX = fs.destination.width / fs.source.width;
  double scaleY = fs.destination.height / fs.source.height;
  Size fittedSrc = Size(src.width * scaleX, src.height * scaleY);
  Rect out = alignment.inscribe(fittedSrc, dst);

  return Matrix4.identity()
    ..translate(out.left, out.top)
    ..scale(scaleX, scaleY);
}