iOS转向Flutter学习日记

1，flutter的安装和创建

这个可以去掘金专栏或flutter中文网这里不再赘述，附网址：掘金：https://juejin.im/post/5b631d326fb9a04fce524db2#heading-1，flutter中文网：https://flutterchina.club/

2，关于开发语言，Dart语言还是挺好学的，光看文档的语法大概也能知道怎么用如能抽出时间去学Dart进度更快。

3，最常见的Widget 类似于Viewcontroller和NSObject和UIView的结合体，它包含了已经做好的视图样式，包括带导航栏的控制器Scaffold，带tabbar的控制器Tabbar等。还有显示文本的控件叫Text 显示图片的Image等等，它又包含了动画绘制，手势交互，滚动的listView，事件的处理等框架的集成，可以说涵盖了OC里的Foundation很多功能和UIKit的很多功能，所以说它是上述3个的结合体，凡创建视图产生交互等等的处理的类都属于Widget，

4，创建类的时候分状态可变和不可变类型，通常用简写即可创建，创建statefulClass的时候直接敲stf 创建stateless的时候直接敲stl回车即可，之后补写类名

5，main.dart文件是程序入口，相当于main.m，进入根视图方法如下：

void main() => runApp(MyApp());

MyApp就是一个控制器的类名，这句话让APP启动之后进入MyApp的视图里。

6，进入主页，我这里让MyApp值当成一个中转站，目的是进入HomePageViewController，这里叫做homePage，homepage里加载一个列表，就是tableview，里面有很多个cell cell上下一段文字，加载一张网络图片，就这么一个需求：

import 'package:flutter/material.dart';
import 'package:testdemo/homepage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return new MaterialApp(home: HomePage(),);}
}

当然之前已经创建好了homepage.dart文件，是空的，下面来写这个类

7，进入homepage，敲stf创建一个class 名为HomePage：

class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return ;}
}

创建好之后return后面需要你返回一个组件，给这个页面使用更新state，因为我们需要一个导航栏，一个view，所以我使用了scaffold和一个listView

class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return new Scaffold(backgroundColor: Colors.blue,appBar: AppBar(title: Text("98765"),),body: new ListView.builder(itemBuilder: (context,index){return new PageItem();},itemCount: 20,),);}
}

scaffold在new之后的（）里是赋值它的各个属性，具体有什么属性需要Ctrl+左键点进去看，一个视图正常当然有背景色，宽高，间距等等这些属性，作为已经封装完成给我们直接用的scaffold更多了几个导航的属性，可以看到叫做appbar的就是了。body就是这个视图的显示部分，我们初始化一个listview放进来，调用两个属性itemBuilder和itemCount,熟悉tableview的同学都知道，这就是tableviewdelegate的两个方法，cellforrow和numberofcell，是不，而itembuiler里面返回的pageItem就是每一个自定义的cell了

8，具体的pageItem：

class PageItem extends StatefulWidget {@override_PageItemState createState() => _PageItemState();
}class _PageItemState extends State<PageItem> {@overrideWidget build(BuildContext context) {return Container(///卡片包装child: new Card(///增加点击效果child: new FlatButton(onPressed: (){print("点击了哦");},child: new Padding(padding: new EdgeInsets.only(left: 0.0, top: 10.0, right: 10.0, bottom: 10.0),child: new Column(mainAxisSize: MainAxisSize.min,children: <Widget>[///文本描述new Container(child: new Text("这是一点描述",style: TextStyle(color: Colors.blue,fontSize: 14.0,),///最长三行，超过 ... 显示maxLines: 3,overflow: TextOverflow.ellipsis,), margin: new EdgeInsets.only(top: 6.0, bottom: 2.0),alignment: Alignment.topLeft),new Padding(padding: EdgeInsets.all(10.0)),///三个平均分配的横向图标文字new Row(children: <Widget>[new Icon(Icons.star,size: 16,color: Colors.grey,),new Image(image: NetworkImage("https://yiqi-shenyang-test.oss-cn-beijing.aliyuncs.com/uploads/images/20191014/a6ead9d011a87ec96f32ad152173ebcf.jpg"),height: 70,fit: BoxFit.fitWidth,filterQuality: FilterQuality.high,alignment: Alignment.center,),],),],),))),);}
}

上面的代码就是向item内填充各个视图的代码，视图就是一个一个的图层堆上去的，这种的代码虽然量大但是比较容易理解。

这样你可以直接点IDE的⚡️图标直接运行了，效果如图：

话说使用flutter最方便的就是省了重新编译运行的时间，不用重新跑一遍代码。对于iOS来说省了十几秒，对于安卓来说可是飞起来了。

9：各控件的初始化，方法很多，属性也不尽一致，只是自己写例子时候一一用到并且为了加深印象而写的，方法记录如下（发现新的更方便的随时更改）：https://blog.csdn.net/qq_27633421/article/details/103295385

10.余下的还有很多很多，刚刚入门flutter，网络请求，异步处理，模型转json，动画，音视频，像iOS原生的推送，地图，还有iOS上用的很习惯的布局masonry和rac啦等等，都要慢慢的发现并尝试移植到flutter中去。

...未完待续

其他文章请查看个人博客：http://zhangqq166.cn/

iOS转向Flutter学习日记相关推荐

Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
Flutter学习日记之使用路由进行页面切换
本文地址:https://blog.csdn.net/qq_40785165/article/details/116900126,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 你多学 ...
Flutter学习日记之Slidable实现侧滑菜单
本文地址:https://blog.csdn.net/qq_40785165/article/details/120298992,转载需附上此链接敏而好学,不耻下问. 大家好,我是小黑,一个还没秃头 ...
iOS程序猿的flutter学习之路
日常学习Flutter开发的积累推荐一些平时自己学习Flutter开发当中接触到的优秀文章 -------------------------基础知识 ----------------------- ...
Flutter 3 发布了(文末推荐一个免费的在线Flutter学习教程)
翻译自 Tim Sneath[1] 2022年5月12日的文章 <Introducing Flutter 3>[2] 作者 :Tim Sneath 翻译 :沙漠尽头的狼(谷歌翻译加持) 链 ...
Flutter学习之Dart语法特性
一.前言第一天把Flutter环境搭建了,并简单实现第运行第一个Flutter项目,感觉很不错,一些基本操作和原生体验差不多.用Flutter框架写过App项目的开发者都知道,Flutter是一个使 ...
flutter scrollview_简单易上手的Flutter学习指南App,2020一起来玩转Flutter吧~
Flutter是谷歌的移动UI框架,可以快速在iOS.Android.Web和PC上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和 ...
Flutter 学习
Flutter 学习参照:https://book.flutterchina.club/ 参照:https://flutter.cn/docs/development/platform-integr ...
Flutter学习-多子布局Widget
Flutter学习-多子布局Widget 1. Flex 2. Row组件 2.1 Row组件介绍 2.2 属性解析 2.2.1 mainAxisSize 2.2.2 mainAxisAlignmen ...
Flutter学习（一）
目录 Flutter学习(一) Flutter学习(二)-FlutterGo学习概念参考:Flutter 开发文档在 Flutter 中,几乎所有都是 widget,包括对齐 (alignmen ...

iOS转向Flutter学习日记

iOS转向Flutter学习日记相关推荐

最新文章

热门文章