flutter 顶部具有多个草稿元素的图像

r7knjye2 于 2023-02-25 发布在 Flutter

关注(0)|答案(1)|浏览(125)

我正在尝试用flutter生成下面的UI。这个想法是在一个图像的顶部覆盖像素，可以通过刮擦来移除并显示隐藏的图像。这些像素在下面的图像中是红色/蓝色/紫色，并且在示例中覆盖了蝴蝶的图像。

我偶然发现了这个package，它允许划痕功能。然而，划痕区域似乎覆盖了整个图像，并且不能着色。之前我试图手动操作，通过在图像顶部绘制这些彩色方块，当单击时图像会消失。这听起来很简单，但不容易在flutter中实现。
此外，我生成了一个随机数矩阵，我将使用它来着色像素。当试图在Stack中循环矩阵时，它给了我一个错误消息：The element type 'Set<Set<Text>>' can't be assigned to the list type 'Widget'.此处提供详细信息。

Widget paintPixels() {
  return Container(
      child: Stack(children: <Widget>[
        Image(
          width: 350,
          height: 300,
          image: AssetImage('lib/assets/images/orange_butterfly_image.png'),
        ),
        Column(
          children: <Widget>[
            for (int i = 0; i < 9; i++)
              {
                for (int j = 0; j < 9; j++) {Text("Hello" + i)}
              }
          ],
        )
      ]));

对如何处理这个问题有什么建议吗？

flutter

来源：https://stackoverflow.com/questions/75527939/image-with-multiple-scratcher-elements-on-top-of-it

1条答案

按热度按时间

6uxekuva1#

我能够使用嵌套循环来绘制图像顶部的像素框。没有必要使用scratcher。代码解决方案如下所示：

Widget paintPixelsOnReward() {
    int size = 9;
    List<List<num>> matrix = getAlmostRandomMatrix(size);
    return Container(
        padding: const EdgeInsets.all(8.0),
        child: Stack(children: <Widget>[
          const Image(
            width: 360,
            height: 315,
            image: AssetImage('lib/assets/images/orange_butterfly_image.png'),
          ),
          Column(children: [
            for (int i = 0; i < size; i++)
              Row(
                children: [
                  for (int j = 0; j < size; j++) ...[
                    LayoutBuilder(
                      builder: (context, constraints) {
                        return Align(
                          alignment: Alignment.topLeft,
                          child: Container(
                              width: 40,
                              height: 35,
                              decoration: BoxDecoration(
                                  // color: Colors.transparent, // color should be transparent if the pixel has been revealed
                                  color: (matrix[i][j] == 0
                                      ? Theme.of(context).colorScheme.secondary
                                      : (matrix[i][j] == 1
                                          ? Theme.of(context)
                                              .colorScheme
                                              .primary
                                          : Theme.of(context)
                                              .colorScheme
                                              .error)),
                                  // Red border with the width is equal to 5
                                  border: Border.all(
                                      width: 1, color: Colors.white))),
                        );
                      },
                    ),
                  ]
                ],
              )
          ]),
        ]));
  }

赞(0）回复(0）举报 2023-02-25

我来回答

flutter 顶部具有多个草稿元素的图像

1条答案

相关问题

热门标签

最新问答