【发布时间】:2020-04-13 15:58:56
【问题描述】:
我在我的颤振项目中使用具有不同分辨率的图像,如 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 上测试)。
所以问题是:暗模式和分辨率感知图像资产的文件结构应该是什么样的?
【问题讨论】:
标签: image flutter assets ios-darkmode android-dark-theme