成都网站建设设计

将想法与焦点和您一起共享

flutter中文ui,Flutter中文文档

Flutter是一个什么框架

Flutter是一个移动应用程序的软件开发工具包(SDK),具有以下特征:

创新互联建站主要业务有网站营销策划、成都网站设计、成都网站建设、微信公众号开发、小程序设计、H5响应式网站、程序开发等业务。一次合作终身朋友,是我们奉行的宗旨;我们不仅仅把客户当客户,还把客户视为我们的合作伙伴,在开展业务的过程中,公司还积累了丰富的行业经验、营销型网站资源和合作伙伴关系资源,并逐渐建立起规范的客户服务和保障体系。 

跨平台应用的框架,没有使用WebView或者系统平台自带的控件,使用自身的高性能渲染引擎自绘

简化版的浏览器,最大限度在android和ios上统一UI,包括业务逻辑和用户体验

开发语言使用dart,结合C, C++, 和Skia(2D渲染引擎)构建

支持hot reload,包含着完整的控件和工具链

一切皆控件,控件是每个Flutter应用程序的基本构建块,与分离视图、控制器、布局和其他属性的框架不同,Flutter具有一致的统一对象模型:控件。一个控件可以定义:结构元素(比如按钮或菜单)、风格元素(比如字体或颜色方案)、布局的方面(比如填充)、一些业务逻辑等

组合大于继承,控件本身通常由许多小型、单用途的控件组成,结合起来产生强大的效果,类的层次结构是扁平的,以最大化可能的组合数量

强化版的WebView,框架仅提供一个View层,大部分功能要依赖原生

目前只能够运行大部分Dart代码(不能引入dart:mirrors或dart:html库)

Flutter 上字体的另类玩法:FontFeature

在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于 Text 的一个属性: FontFeature , 事实上相较于 Flutter ,本篇内容可能和前端或者设计关系更密切 。

什么是 FontFeature ? 简单来说就是影响字体形状的一个属性 ,在前端的对应领域里应该是 font-feature-settings ,它有别于 FontFamily ,是用于指定字体内字的形状的一个参数。

我们知道 Flutter 默认在 Android 上使用的是 Roboto 字体,而在 iOS 上使用的是 SF 字体,但是其实 Roboto 字体也是分很多类型的,比如你去查阅手机的 system/fonts 目录,就会发现很多带有 Roboto 字样的字体库存在。

所以 Roboto 之类的字体库是一个很大的字体集,不同的 font-weight 其实对应着不同的 ttf ,例如默认情况下的 Roboto 是不支持 font-weight 为 600 的配置 :

所以如下图所示,如果我们设置了 w400 - w700 的 weight ,可以很明显看到中间的 500 和 600 其实是一样的粗细,所以在 设置 weight 或者设计 UI 时,就需要考虑不同平台上的 weight 是否支持想要的效果 。

回归到 FontFeature 上,那 Roboto 自己默认支持多少种 features 呢? 答案是 26 种,它们的编码如下所示,运行后效果也如下图所示,从日常使用上看,这 26 种 Feature 基本满足开发的大部分需求。

而 iOS 上的 SF pro 默认支持 39 种 Features , 它们的编码如下所示,运行后效果也如下图所示,可以看到 SF pro 支持的 Features 更多。

所以可以看到,并不是所有字体支持的 Features 都是一样的,比如 iOS 上支持 sups 上标显示和 subs 下标显示,但是 Android 上的 Roboto 并不支持,甚至很多第三方字体其实并不支持 Features 。

有趣的是,在 Flutter Web 有一个渲染文本时会变模糊的问题 #58159 ,这个问题目前官方还没有修复,但是你可以通过给 Text 设置任意 FontFeatures 来解决这个问题。

最后,如果对 FontFeature 还感兴趣的朋友,可以通过一下资料深入了解,如果你还有什么关于字体上的问题,欢迎留言讨论。

基于网友的问题再补充一下拓展知识,毕竟这方面内容也不多 。

事实上在 dart 里就可以看到对应 FontWeight 约定俗称用的是字体集里的什么字体:

所以如果对于默认字体有疑问,可以在你的手机字体找找是否有对应的字体, 比如虽然我们说 roboto 没有 600 ,但是如果是 roboto mono 字体集是有 600 的 fontweight ,甚至还有 600 斜体: 。

另外注意这是 Flutter 而不是原生,具体实现调用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下对应的 setFontFamilies 相关逻辑,当然默认字体库指定在 typography.dart 下就看到,例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' :

另外如果你在 Mac 的 Web 上使用 Flutter Web,可以看到指定的是 .AppleSystemUIFont ,而对于 .AppleSystemUIFont 它其实不算是一种字体,而是苹果上字体的一种集合别称:

[图片上传失败...(image-40f5ce-1648368234737)]

还有,如果你去看 Flutter 默认自带的 cupertino/context_menu_action.dart ,就可以看到一个有趣的情况:

当然,前面我们说了那么多,主要是针对英文的情况下,而在中文下还是有差异的 ,之前的文章也介绍过:

例如,在苹果上的简体中文其实会是 PingFang SC 字体,对应还有 PingFang TC 和 PingFang HK 的繁体集,而关于这个问题在 Flutter 上之前还出现过比较有意思的 bug :

当然后续的 #16709 修复了这个问题 ,而在以前的文章我也讲过,当时我遇到了 “Flutter 在 iOS 系统上,系统语言是韩文时,在和中文一起出现会导致字体显示异常" 的问题 :

解决方法也很简单,就是给 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了,这是因为韩文在苹果手机上使用的应该是 Apple SD Gothic Neo 这样的超集字体库,【广】这个字符在这个字体集上是不存在的,所以就变成了中文的【广】;

所以可以看到,字体相关是一个平时很少会深入接触的东西,但是一旦涉及多语言和绘制,就很容易碰到问题的领域 。

Flutter-UI

Tip:显示文本,有些样式属性和android的textView类似,例如对齐、大小、颜色等

Tip:Material库提供了很多按钮,例如ElevatedButton、TextButton、OutlinedButton等,这些都是直接或者间接对ButtonStyleButton

的包装定制,所以大多数属性和ButtonStyleButton一样。另外所有的MaterialButton都有两个共同特征:1、按下时会有水波动画 2、都有一个onPress回调方法,若不提供回调方法,则按钮时禁止状态,不响应用户点击

Tip:使用Image来加载并显示图片,Image的数据源可以是asset、文件、内存或者网络。ImageProvider是一个抽象类,主要定义了图片数据获取的接口load( ),从不同的数据源中获取数据。如AssetImage可以加载本地图片资源,NetworkImage可以加载网络图片。

flutter 多语言配置--中文

上一篇讲到如果解决ios长按输入框报错的问题,但是最终没有达到我们的要求,因为我们想实现中文的提示,那么本篇文章讲讲如何来实现多语言配置;

1.首先在pubspec.yaml的dependencies下加入这个

flutter_localizations:

sdk: flutter

如图:

2.然后在MaterialApp设置一下localizationsDelegates如图:

3.写一个类继承一下CupertinoLocalizations,在项目中 我这个类名叫ChineseCupertinoLocalizations(没错,就是localizationsDelegates中的第三个),如图:

上次提到报错的原因就是因为cutButtonLabel,copyButtonLabel,pasteButtonLabel,selectAllButtonLabel 这几个按钮没有实现,所以继承CupertinoLocalizations一定要为这几个按钮赋值,这里是那种语言,那么,赋值就对应那种语言,同时要注意locale.languageCode也要填写,如果你是中文,那么locale.languageCode =='zh';

4.在ios工程中,在项目的info设置语言环境

添加 Localization native development region---china

添加一个Localizations 为array类型的,并且设置值为 Chinese (simplified)

效果图:( 注意:请把手机环境调试成中文的语言环境 )

Android 

ios 效果图

我公司用flutter做了一个《柚品生活》的app,感兴趣的朋友可以去看看,Android和ios都已经上架了

最后附上GitHub项目地址 GitHub - hxxsocket/flutter_lg_demo: flutter多语言配置之中文

Flutter跨平台框架(Dart语言)

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。(-中文网;-英文网)

Flutter是一种趋势,势必会取代RN,成为最主流的跨平台开发框架,基于Dart语言。ios开发必须Mac电脑。android开发window、linux、Mac均可。


本文题目:flutter中文ui,Flutter中文文档
分享链接:http://chengdu.cdxwcx.cn/article/dsdehdc.html