如何将gridPaper中一个容器的颜色更改为flutter中的另一种颜色？

Question

我目前正在开发一个寻路可视化应用程序，我对使用一种全新的编程语言（至少对我而言）有点不知所措。

但我认为这是尽快学习它的最佳方式。

解决我的问题：

我有一个带有容器小部件的 gridPaper。每次我点击一个容器时，它都会将颜色从白色变为黑色。

到目前为止一切都很好......

对于我的寻路算法，我需要一个“开始”和“结束”容器（显然是我的算法开始搜索终点的容器）。 那些我想用绿色（开始）和红色（结束）着色。 如果我打开设置小部件以单击“开始”，它将“var = int”更改为 2，然后转到 switch case 功能。 从那里如果它得到一个 1，它应该打印一个黑色容器，如果它得到一个 2，它应该将容器填充为绿色。 但随后它开始用绿色填充每个容器，因为它通过了完整的偏移量......

对解决我的问题有什么想法吗？

代码：

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;
  var block = 1;
  GlobalKey _key = GlobalKey();

  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: gridContainerMap(_activated),
          ),
          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('Einstellungen'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Startpunkt'),
              onTap: () {
                // Update the state of the app
                // ...
                block = 2;
                // 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);
              },
            ),
            ListTile(
              title: Text('Pathfinding-Algorithm'),
              onTap: () {
                // Update the state of the app
                // ...

                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }

  List<Widget> gridContainerMap(ValueNotifier<List<Offset>> _activated) {
    switch (block) {
      case 1:
        return [
          Container(color: Colors.white),
          ..._activated.value.map((offset) {
            print('OFFSET: $offset');
            return coloringWallContainer(offset);
          }).toList(),
        ];
        break;

      case 2:
        return [
          Container(color: Colors.white),
          ..._activated.value.map((offset) {
            print('OFFSET: $offset');
            return coloringStartContainer(offset);
          }).toList(),
        ];
        break;

      default:
    }
  }

  Positioned coloringWallContainer(Offset offset) {
    return Positioned(
      left: offset.dx * cellSize,
      top: offset.dy * cellSize,
      width: cellSize,
      height: cellSize,
      child: ColoredBox(color: Colors.black),
    );
  }

  Positioned coloringStartContainer(Offset offset) {
    block = 1;
    return Positioned(
      left: offset.dx * cellSize,
      top: offset.dy * cellSize,
      width: cellSize,
      height: cellSize,
      child: ColoredBox(color: Colors.green),
    );
  }
}

最好的问候 罗布森

Answer 1

啊，没关系，我只需要知道从下一个网格元素获取偏移量的位置... 之后就比较容易了。