flutter例子,flutter笔记

Flutter之国际化多语言

在说flutter国际化前,不得不提到,在uni-app中支持的Vue-i18n,两者有相似之处,也有差异的地方。

创新互联公司是一家专注网站建设、网络营销策划、小程序设计、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十年以来,已经为上1000家公路钻孔机各业的企业公司提供互联网服务。现在,服务的上1000家客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。

本篇借鉴了三篇热门帖子

Flutter中的国际化:如何写一个多语言的App

Flutter国际化完整例子

Internationalization - Make an Flutter application multi-lingual

只记录根据手机系统语言自动转换app语言

引入后,保存会自动加入安装此依赖

我们新建一个和"/lib"同级别的文件夹"/locale",然后在这个文件夹中新建两个文件,分别为"i18n_en.json" 和" i18n_zh.json"。再在"/lib"文件夹下创建和"main.dart"同级的"translation.dart"和"application.dart"。

  文件夹树现在是这个样子的:

MyApplication

  |

  +- android

  +- build

  +- images

  +- ios

  +- lib

   |

   +-main.dart

   +-translation.dart

   +-application.dart

  +- locale

   |

   +- i18n_en.json

   +- i18n_zh.json

  +- test

在pubspec.yaml继续加入json,引入静态资源

补充:如果需要强制转换的话(我自己没有用到)

Flutter局部刷新方法

Flutter中Widget分为StatefulWidget和StatelessWidget,分别为动态视图和静态视图,视图的更新需要调用StatefulWidget的setState方法,这会遍历调用子Widget的build方法。当一个主页面比较复杂时,会包含多个widget,如果直接调用setState,会遍历所有子Widget的build,这是非常不必要的性能开销,有没有单独刷新指定Widget的方式呢?这个时候就要用到GlobalKey了。

一个StatefulWidget包含一个Button,一个Text,通过点击Button调用主Widget的setState方法,刷新Text,示例如下:

同样一个StatefulWidget包含一个多个Text和Button,点击Button我们只需要刷新指定的Text,通过GlobalKey的方式,实现如下:

主Widget,包含一个需要更新的TextWidget和一个不需要更新的Text

需要单独更新的Widget

传递事件的Button

这样点击Button就只会更新指定的TextWidget了,效果如下:

这只是一个简单的例子,在实际开发中为了页面刷新的高效率,模块化封装非常重要。很多情况下都只需要局部刷新,而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握

flutter 页面的生命周期(转)

转自

在 Flutter 中,有两类常用的 Widget:

在开发过程中,我们经常需要继承它们两来实现自己的 Widget。

一个 StatelessWidget 是不能被改变的,比如: Icon 、 Text 等。

如果你的控件一旦显示,就不需要再做任何的变更,那么你应该使用 StatelessWidget 。

实现一个自己的 StatelessWidget 很简单。

当你看到下面这个例子?时,你就知道它有多简单了。

看,只要在 build() 中返回你的视图就可以了。

一个 StatefulWidget 是有状态的,可变的。

它可以改变自己的外观,以响应用户的操作或者数据的变化。

比如: CheckBox 、 Switch ..

我们之所以能够改变一个 StatefulWidget ,是因为它有一个设置状态的函数:

调用这个函数后,就会触发 StatefulWidget 的视图树重建。

因此,当我们需要一个可交互的,即能根据用户操作或数据变化而改变视图的 Widget 时,那就得用上 StatelessWidget 了。

现在,来创建一个自定义的 StatefulWidget:

从上面的例子中可以看到, StatefulWidget 会要求提供一个含有视图树的 State 。

既然 State 能够控制一个视图的状态,那它肯定会有一系列的生命周期。

上图就是 State 的生命周期图。

离不开DART的Flutter(dart篇)

hello world例子

在终端打印字符串‘Hello World!’

计算斐波那契数列

一个简单的类

计算两点距离

异步并发示例

使用了Isolate

1.面向对象

对于面向对象这个概念,相信了解Java的同学对这个概念一定不会陌生。

例如:我们有个Person Object他有很多特征和行为。

这些都是这个Person Object的属性。

也就是因为有了这些特征,行为等等才决定了这个人是谁。

那么回到Dart当中,所有的都是对象,那么在就可以可以跟进对象的属性的特征,方法等等来进行编程。

之所以我们在这里又特别强调了一下面向对象的概念,是因为这个概念在Dart语言当中,至关重要!

2.最重要的几个概念

3.Dart的部分特性

4.Dart的内置库

包名

描述

dart:asynv

异步编程,提供Future,Stream类

dart:collection

集合

dart:convert

不同类型的字符编码解码

dart:core

Dart语言核心功能,内置类型

dart:html

网页开发用到的库

dart:io

文件读写,IO相关

dart:math

数字常量以及函数,随机算法等

dart:svg

事件和动画矢量图支持

综上述所说要想学Flutter,先学Dart!关于Flutter下篇我会讲到。为什么离不开dart!

有关更多面经、核心技术笔记;自己也是从事Android开发5年有余了;整理了一些Android开发技术核心笔记和面经题纲, 如有需要的同学请私信我回复“核心笔记”或“面试”领取!

flutter 表单Form使用示例

flutter提供一套表单校验框架Form,可以通过Form框架一步校验所有表单,非常方便,比较常用的用法是Form+TextFormField。

Form继承StatefulWidget,有一个widget 类型的child参数,证明Form是一个容器。

Form里还有一个validate方法,如下

一般通过GlobalKey来访问Form中validate方法,Form的validate方法用来校验所有Form里的FormField表单,validate方法返回值是bool类型,返回true表示所有表单校验成功;返回false表示有校验失败的表单;

TextFormField继承FormField,FormField后面源码分析会讲,所有Form可统一校验的表单都必须继承FormField,可以通过FormField自定义各种各样可校验表单,TextFormField只是FormField自定义表单中的一种。

表单校验必须实现的方法为validator,定义如下:

每个表单的校验规则都在validator里实现,通过返回值来判断是否校验成功。

1、用Form包在所有需要校验的表单最外层,如下:

2、将GlobalKey传给Form,用于调用Form里方法,如下:

3、将TextFormField传给Form容器,如下:

4、实现对应TextFormField的校验规则 ,如下:

5、最后调用Form校验所有表单方法validate,如下:


文章标题:flutter例子,flutter笔记
URL标题:http://scyanting.com/article/dsejjds.html