给 Xamarin.Forms 开发者的 Flutter 指南(下)

640?wx_fmt=jpeg

如何你懂得Xamarin.Forms框架的基本原理,那么你就可以将本文档当作你开始Flutter开发的不错的起点。本文档旨在帮助Xamarin.Forms开发者

你的Android和iOS知识以及技能组合在构建Flutter时都是有价值的,因为Flutter依赖的原生系统配置都与你配置Xamarin.Forms原生项目时一样.Flutter框架与你创建一个单独的界面时也是一样的,这在多个平台中同样适用。

本文档可用做可指导手册来翻查与你需求最为相关的问题。

本系列上部分:

1.项目设置(上)

2.视图(上)

3.导航(上)

4.异步UI (上)

5.项目结构与资源(下)

6.应用程序生命周期(下)

7.布局(下)

8.手势检测和触摸事件处理(下)

9.列表视图和适配器(下)

10.文本处理(下)

11.表单录入(下)

12. Flutter插件(下)

13.主题(样式)(下)

14.数据库与本地存储(下)

15.通知(下)


五、项目结构与资源

5.1 如何储存我的图片文件?

Xamarin.Forms 没有独立于平台的存储图像的方法, 您必须放置图片在 iOS 的 xcasset 文件夹, 或 Android 的 drawable 文件夹中。

Android和iOS将资源(resources)和资产(assets)视为不同的项目,而 Flutter 应用程序只有资产(assets)。Resources/drawable-* 文件夹中的所有资源都放在一个 Flutter 的资产文件夹中。

Flutter 遵循一种与 iOS 类似的简单的基于密度(density-based)的格式。资产可能是 1.0x2.0x3.0x 或任何其他倍数。Flutter 没有 dp,但是有逻辑像素,这基本上是与设备无关像素相同。用所谓 devicePixelRatio 表示单个逻辑像素中物理像素的比例。

与 Android 的密度桶相等的是:

Android density qualifier Flutter pixel ratio
ldpi 0.75x
mdpi 1.0x
hdpi 1.5x
xhdpi 2.0x
xxhdpi 3.0x
xxxhdpi 4.0x

资产位于任意文件夹中— Flutter 没有预定义的文件夹结构。在 pubspec.yaml 文件中声明资产(带有位置),Flutter 就会得到它们。

注意,在 Flutter 1.0 beta 2 之前的版本中,Flutter 中定义的资产并不能从原生一侧访问, 反之亦然,原生资产和资源对 Flutter 无效,就像他们被放在单独的文件夹中。

在 Flutter beta 2 版本中,资产都被存储在原生的资产文件夹中,并且可以通过 Android 的资产管理器(AssetManager) 从原生一侧被访问。

在 Flutter beta 2 版本中,Flutter 仍然不能访问原生资源,也不能访问原生资产。

例如,如果要新建一个新的名为 my_icon.png 的图像资产到我们的 Flutter 项目, 并决定它应该放在一个被我们随意命名为 images 的文件夹中,你需要把基础图像(1.0x)放到 images 文件夹中, 而所有的其他变量的文件放在以与之对应的比率乘数命名的子文件夹中:

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

接下来,您需要在您的 pubspec.yaml 文件中声明这些图像:

assets:
 - images/my_icon.jpeg

之后就可以用 AssetImage 来访问你的图像了:

return new AssetImage("images/a_dot_burr.jpeg");

或者可以直接在一个 Image widget 中访问:

@override
Widget build(BuildContext context) {
  return new Image.asset("images/my_image.png");
}

更多详尽的信息可以在 在 Flutter 中添加资产和图像 中找到。

5.2 在哪里存储字符串?如何处理本地化?

与 .NET 拥有 resx 文件不同,Flutter 目前没有一个专门的字符串类资源系统。此时,最佳实践是将复制文本作为静态字段保存在类中,并从那里访问它们。举个例子:

class Strings {
  static String welcomeMessage = "Welcome To Flutter";
}

那么在你的代码中,你可以像这样访问你的字符串:

new Text(Strings.welcomeMessage)

默认情况下,Flutter 的字符串只支持美式英语。如果你需要添加其他语音的支持,可以包含 flutter_localizations 包。你可能还需要添加 Dart的 intl 包来使用 i10n 装置,例如日期、时间的格式化。

dependencies:
  # ...
  flutter_localizations:
    sdk: flutter
  intl: "^0.15.6"

使用 flutter_localizations 包时,要在应用程序的 widget 上指定 localizationsDelegates 和 supportedLocales

import 'package:flutter_localizations/flutter_localizations.dart';

new MaterialApp(
 localizationsDelegates: [
   // Add app-specific localization delegate[s] here.
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', 'US'), // English
    const Locale('he', 'IL'), // Hebrew
    // ... other locales the app supports
  ],
  // ...
)

委托包含实际的本地化值,而 supportedLocales 定义了应用程序支持哪些本地化。上面的示例使用了一个 MaterialApp,因此它为基本 widget 本地化值提供了一个 GlobalWidgetsLocalizations,为Material widget 的本地化提供了一个 MaterialWidgetsLocalizations。如果你的应用程序使用 WidgetsApp ,你就不需要后者了。请注意,这两个委托包含“默认”值,但是如果您希望它们也本地化,则需要为您自己的应用程序的可本地化副本提供一个或多个委托。

初始化后, WidgetsApp (或 MaterialApp)为您创建一个 Localizations widget,其中包含您指定的委托。设备的当前区域设置总是可以从当前上下文的 Localizations widget (以 Locale 对象的形式)或使用 Window.locale 访问。

要访问本地化的资源,请使用 Localizations.of() 方法去访问一个由给定委托提供的特定本地化类。使用 intl_translation包将可翻译的文本拷贝到 arb 文件中进行翻译,并将其导入到应用程序中与 intl 一起使用。

要了解更多关于 Flutter 国际化和本地化的细节,请查阅 国际化指南, 它有带和不带 intl 包的示例代码。

5.3 我

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值