如何通过单击获得颤动中可访问的网格元素？

Question

有没有人可以帮助我？

我目前正在进行一个项目，我想通过使用 flutter 可视化寻路算法（我想稍后将其用作应用程序）。

我的问题：我有一个 gridPaper，它的格式完全符合我的需要……但是我怎样才能通过单击它们来访问其中的单个元素？我想在开始节点和结束节点之间创建一个 'wall' 以使寻路算法更难。（如果这有意义的话）但首先我还需要创建一个开始-结束端节点。这是我目前所拥有的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Path Finder';
  final Color gridColor = Colors.lightBlue[100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: GridPaper(
        child: Container(),
        color: Colors.lightBlue[100],
        interval: 20,
        divisions: 1,
        subdivisions: 1,
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Startpunkt'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Ziel'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

LG罗布森

Answer 1

由于您的 GridPaper 定义为 intervals of 20，因此使用 onTapDown 的 details 的 localPosition 将非常容易一个GestureDetector提供的回调总体上GridPaper:

完整源代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Path Finder';
  final Color gridColor = Colors.lightBlue[100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends HookWidget {
  final double cellSize = 20.0;
  final String title;

  MyHomePage({
    Key key,
    this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _activated = useState<List<Offset>>([]);

    void _toggle(Offset offset) {
      if (!_activated.value.remove(offset)) _activated.value.add(offset);
      _activated.value = [..._activated.value];
    }

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: GestureDetector(
        onTapDown: (details) => _toggle(details.localPosition ~/ cellSize),
        child: GridPaper(
          child: Stack(
            children: [
              Container(color: Colors.white),
              ..._activated.value.map((offset) {
                print('OFFSET: $offset');
                return Positioned(
                  left: offset.dx * cellSize,
                  top: offset.dy * cellSize,
                  width: cellSize,
                  height: cellSize,
                  child: ColoredBox(color: Colors.green.shade200),
                );
              }).toList(),
            ],
          ),
          color: Colors.lightBlue[100],
          interval: cellSize,
          divisions: 1,
          subdivisions: 1,
        ),
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Startpunkt'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Ziel'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

如何通过单击获得颤动中可访问的网格元素？

how to get a grid element accessible in flutter by clicking on it?

grid

button

flutter

flutter-layout

完整源代码