widget开发一个iOS开发者的Flutter“历险记”

1.官方介绍

Flutter是谷歌的移动UI框架，可以在iOS和Android上快速构建高质量的原生用户界面。

官方介绍:

毫秒级热过载。修改后，您的应用程序界面将立即更新。利用丰富且完全可定制的小部件，在几分钟内构建一个本机界面。

富有表现力和灵活性的用户界面:快速发布专注于本地体验的功能。分层架构允许您完全定制，从而实现令人难以置信的快速渲染和富有表现力的灵活设计

原生性能:Flutter包含很多核心widget，如滚动、导航、图标、字体等，可以达到与iOS、Android上原生应用相同的性能。

2.安装环境

①下载FlutterSDK:

https://github.com/flutter/flutter/releases

②配置vscode编辑器:

https://flutterchina.club/get-started/editor/#vscode

附件:vs下载地址

③用③vscode命令运行flutter doctor会提示您设置flutterSDK路径(如果遇到权限问题，需要使用sudochow命令，如果遇到不存在的文件夹，需要手动创建相应的文件夹)

④建立第一个颤振程序:

创建程序:vs code->:View->；命令:启动新项目运行程序:调试->:开始调试

注意:如果遇到多个命令产生错误和cocoapods导入问题，尝试修改构建系统:在Xcode菜单栏-->:File-->；工作区设置，将构建系统修改为旧的构建系统，然后进行清理和编译。

⑤你好世界！：

void main() = >runApp(中(子:文字)(“你好，世界！”，text direction:text direction . ltr))；

Pubspec格式简介:

https://www.dartlang.org/tools/pub/pubspec

3.Widget简介

官方布局介绍:https://flutterchina.club/tutorials/layout/

链接:

https://flutterchina.club/widgets-intro/

基本小部件:

MaterialApp:这个小部件在应用程序的根创建了一些有用的小部件，包括一个导航器，它管理由字符串标识的小部件堆栈(即页面路由堆栈)。导航器可以使您的应用程序在页面之间平滑过渡。

脚手架:实现了MaterialDesign的布局Widget。这个类提供了tabbar、navigationBar、bottomSheets等等。

行、列:这些空之间的灵活布局小部件允许您在水平(行)和垂直(列)方向创建灵活的布局。其设计基于web开发中的Flexbox布局模型。

Stack:代替LinearLayout(翻译器:类似于Android中的线性布局)，Stack允许子小部件被堆叠，你可以使用possed来定位它们相对于Stack的顶部、底部、左侧和右侧的位置。Stacks是基于Web开发中的绝对定位布局模型设计的。

容器:容器允许您创建矩形可视元素。容器可以装饰为盒子装饰，如背景、边框或阴影。容器还可以对其大小应用边距、填充和约束。另外，Container可以用矩阵进行三维变换空。

当然，还有其他常用的小部件没有一一列出，如考试:填充、图像和剪辑...

https://flutterchina.club/widgets/

但有必要说:Cupertino系列Widgets是基于iOS设计语言的widget风格

4.生气

官方详细信息:

https://flutterchina.club/animations/

个人总结:

颤振动画不同于iOS动画，一个块执行一个动画

颤振动画的核心类别是:

动画控制器:控制动画的开始、暂停和结束。它不在乎我正在执行什么动画

动画:这是一个抽象类，决定了动画的数据和变化模式。您可以通过添加侦听器来监控其值的变化。初始化时，需要一个AnimationController；

开始动画制作过程:

①animationcontroller . forward()；//开始动画

②Animation.value改变，执行Animation.notifyListener()

③监控功能执行设置状态()

④子Widget根据动画的值进行布局

总结:就是根据动画的变化不断设置State()。Flutter的动画不关心Widget的布局，只提供动画的数据模型

5.界面跳转

使用导航器和路线。路线是应用程序中“屏幕”或“页面”的抽象，导航器是管理多条路线的小部件。您可以大致将一条路线映射到一个UIViewController。Navigator的工作原理与iOS中的UINavigationController非常相似。当您想要跳转到新页面或从新页面返回时，它可以推送()和弹出()。

以两种方式跳转:

△建立路由表

void main(){ RunApp(material app(home:Myapp home()，//成为名为'/'的路由

路线:& lt字符串，WidgetBuilder & gt{ '/a ':(BuildContext context)= & gt；MyPage(title: 'page A ')，'/b ':(build context context)= & gt；MyPage(title: 'page B ')，'/c ':(build context context)= & gt；我的页面(标题:“C页”)，

));

}//跳转到导航器。(上下文)的。push named('/b ')；

△直接通过小部件创建路线

Navigator.push(context，new MaterialPageRoute(

构建器:(BuildContext上下文)= >;新的FTShareHomePage主页(标题:“ShareSDK Flutter Bridge”)，

//全屏对话框:true，

));

△数据返回

//比如推送至位置选择界面地图坐标= awaitnavigator.of (context)。push named('/location ')；//用户选择了弹出导航器的位置。pop ({"lat": 43.821757，" long"/>

[ShareSDK]轻松实现功能强大的社交分享

【SMSSDK】快速整合短信验证，连接通讯录社交圈

[MobLink]打破App孤岛，实现Web与App的无缝链接