如何在抖动中使用暗模式和不同分辨率的资产图像?

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

我在抖动项目中使用的图像分辨率如here所述。现在,我想为黑暗模式主题添加自定义图像。我在pubspec.yaml中的资产声明如下所示:

flutter:
  uses-material-design: true
  assets:
    - assets/images/img_menu.png
    - ...

我的资产结构:

  .../pubspec.yaml
  .../assets/images/img_menu.png
  .../assets/images/0.75x/img_menu.png
  .../assets/images/1.5x/img_menu.png
  .../assets/images/2.0x/img_menu.png
  .../assets/images/3.0x/img_menu.png
  .../assets/images/4.0x/img_menu.png

我以这种方式在项目中加载图像:

Image.asset('assets/images/img_menu.png')

我知道对于简单的一种彩色图像,我可以像这样改变其颜色:

Image.asset('assets/images/img_menu.png', 
                      color: Theme.of(context).brightness == Brightness.light
                      ? Colors.black
                      : Colors.white,)

但是我的大多数图像都比较复杂,因此我必须为其加载自定义资产。

正如描述的here,添加暗模式资产后,我可以不做任何更改就离开pubspec。我为黑暗模式尝试了不同的资产结构,但是它们都不起作用。

1:

  .../pubspec.yaml
  .../assets/images/img_menu.png
  .../assets/images/dark/img_menu.png
  .../assets/images/0.75x/img_menu.png
  .../assets/images/0.75x/dark/img_menu.png
  .../assets/images/1.5x/img_menu.png
  .../assets/images/1.5x/dark/img_menu.png
  .../assets/images/2.0x/img_menu.png
  .../assets/images/2.0x/dark/img_menu.png
  .../assets/images/3.0x/img_menu.png
  .../assets/images/3.0x/dark/img_menu.png
  .../assets/images/4.0x/img_menu.png
  .../assets/images/4.0x/dark/img_menu.png

2:

  .../pubspec.yaml
  .../assets/images/img_menu.png
  .../assets/images/0.75x/img_menu.png
  .../assets/images/1.5x/img_menu.png
  .../assets/images/2.0x/img_menu.png
  .../assets/images/3.0x/img_menu.png
  .../assets/images/4.0x/img_menu.png
  .../assets/images/dark/img_menu.png
  .../assets/images/dark/0.75x/img_menu.png
  .../assets/images/dark/1.5x/img_menu.png
  .../assets/images/dark/2.0x/img_menu.png
  .../assets/images/dark/3.0x/img_menu.png
  .../assets/images/dark/4.0x/img_menu.png

3:

  .../pubspec.yaml
  .../assets/images/img_menu.png
  .../assets/images/0.75x/img_menu.png
  .../assets/images/1.5x/img_menu.png
  .../assets/images/2.0x/img_menu.png
  .../assets/images/3.0x/img_menu.png
  .../assets/images/4.0x/img_menu.png
  .../assets/dark/images/img_menu.png
  .../assets/dark/images/0.75x/img_menu.png
  .../assets/dark/images/1.5x/img_menu.png
  .../assets/dark/images/2.0x/img_menu.png
  .../assets/dark/images/3.0x/img_menu.png
  .../assets/dark/images/4.0x/img_menu.png

单个图像的解决方案是这样加载它:

Image.asset(Theme.of(context).brightness == Brightness.light 
                      ? 'assets/images/img_menu.png'
                      : 'assets/images/dark/img_menu.png',)

但这不是整个项目的便捷解决方案。

奇怪的是,在2个版本的应用中,会同时加载深色图像:浅色和深色主题(已在iPhone和Android上测试。)>

所以问题是:暗模式和可识别分辨率的图像资产的文件结构应该是什么样?

我在扑动项目中使用具有不同分辨率的图像,如此处所述。现在,我想为黑暗模式主题添加自定义图像。我在pubspec.yaml中的资产声明如下所示:...

image flutter assets ios-darkmode android-dark-theme
1个回答
0
投票

到目前为止,目前唯一受支持的变体是缩放(设备像素比率),而不是暗模式。

© www.soinside.com 2019 - 2024. All rights reserved.