如何在复选框图像的中心显示勾号

问题描述 投票:0回答:1

我想在图像内的中心显示 tic 图标,但它在复选框的中心没有正确显示

                            GestureDetector(
                              onTap: () {
                                taskController.toggleTaskSelection(
                                  index,
                                  !taskController.isTaskSelected[index],
                                );
                              },
                              child: Container(
                          
                                child: Stack(
                                  alignment: Alignment.center, // Center the items within the Stack
                                  children: [
                                    Image.asset(
                                      Theme.of(context).brightness == Brightness.light
                                          ? 'assets/images/lightbox.png' // Light theme image
                                          : 'assets/images/darknox.png', // Dark theme image
                                      height: 70,
                                      width: 70,
                                      fit: BoxFit.cover,
                                    ),
                                    Align(
                                      alignment: Alignment.center,
                                      child: Icon(
                                        Icons.check,
                                        color: taskController.isTaskSelected[index]
                                            ? (Theme.of(context).brightness == Brightness.light
                                            ? Colors.black : Colors.white) : Colors.transparent,
                                        size: 22,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),

我确实尝试过用列来包裹,删除堆栈,但图像仍然显示在屏幕底部,我希望它显示在复选框图像的中心,我希望抽动会显示在我的复选框图像的中心不使用复选框图标,因为我想为应用程序提供拟态效果,所以我使用了该图像,但勾选图标未显示在中心,并且在深色和浅色主题中不断更改其位置

flutter dart
1个回答
0
投票

删除不必要的对齐小部件,堆栈对齐属性负责居中并将图像适合更改为

fit: BoxFit.contain
以确保整个图像在不裁剪的情况下可见。

GestureDetector(
  onTap: () {
    taskController.toggleTaskSelection(
      index,
      !taskController.isTaskSelected[index],
    );
  },
  child: Container(
    width: 70,
    height: 70,
    child: Stack(
      alignment: Alignment.center,
      children: [
        Image.asset(
          Theme.of(context).brightness == Brightness.light
              ? 'assets/images/lightbox.png'
              : 'assets/images/darknox.png',
          width: 70,
          height: 70,
          fit: BoxFit.contain,
        ),
        if (taskController.isTaskSelected[index])
          Icon(
            Icons.check,
            color: Theme.of(context).brightness == Brightness.light
                ? Colors.black
                : Colors.white,
            size: 22,
          ),
      ],
    ),
  ),
)
© www.soinside.com 2019 - 2024. All rights reserved.