版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/M075097/article/details/79639377
Flutter框架下 Demo实现及入门知识了解
1.参考官方Demo构建一个布局稍微复杂一些页面，Demo实现了一个书籍列表（数据为本地mock数据），点击收藏图标之后，收藏图标更改为已收藏，然后点击右上角按钮，导航到下一个页面展示已收藏的书籍，效果如下：
代码地址：https://github.com/M075097/flutter_fdemo
2.该Demo中涉及到如下使用（具体在代码中已做相关注释）
- 2.1 脚手架Scaffold使用
- 2.2 ListView组件的使用
- 2.3 控件组合布局
- 2.4 能够触发交互操作的组件使用
- 2.5 导航到下一页使用
- 2.6 动态交互实现
- 2.7 图片Image控件加载网络图片使用
3.相关基本知识了解
3.1 首先在Flutter框架中中主要有两种大类型的Widget即：StatelessWidget和StatefulWidget
3.1.1 StatelessWidget：没有状态的组件，也即是静态组件，内容不能动态修改，初始化之后组件内容不在更改，该类型组件只需复写build方法返回相关自定义的组件内容即可
3.1.2 StatefulWidget : 有状态的组件，该组件需要覆写createState()方法 返回一个Sate类型的对象，并且需要在该State对象中复写其build()方法，自定义组件主要在该方法中实现根据不同的数据进行相应的交互及渲染逻辑，达到动态交互的效果。
3.2 控件组合，在Flutter框架中布局文件没有像在Android里面使用XML，而是直接在代码中使用各种Layout+各种组件代码实现布局，这使得复杂布局在Flutter中显得过于复杂，且不直观，在后期修改时势必增加难度。
所有组件布局时都需要考虑当前该组件大小是收缩（shrink）还是处于扩张（expand）状态,例：假如使用的一个组件默认为shrink的则该组件大小会根据子widget的大小自动收缩，此时再使用其相关的align属性则不会起效
3.2.1 控件主要有，对应详细属性可以参照：https://flutter.io/widgets/layout/
- 1.Container：一个可以设置位置，大小的控件
- 2.Row：使子Widget横向排列的组件，默认子Widget竖直居中
- 3.Column：使子Widget纵向排列的组件，默认子Widget横向居中
- 4.Image：用来显示图片的组件，可以设置大小，也可以直接从网络加载图片
- 5.Text：字符显示组件
- 6.Icon :图标显示组件
- 7.RaisedButton：按钮组件
- 8.Scaffold ：脚手架，实现了Material Design 风格视图,提供了APIs用来实现抽屉效果（drawers），快捷导航（snack bars），以及底部导航（bottom sheets）
- 9.Appbar:Material Design风格的头部应用栏，能够直接添加对应动作按钮Button
- 10.Padding:可以使子Widget根据给出的padding显示
- 11.Center:可以使子Widget在其中居中显示
- 12.Align：可以使子Widget按照设置的对齐方式，并且根据子View的大小调整自己的大小。
- 13.SizedBox:指定大小的Widget，强制子Widget使用这个指定大小
- 14.ListView:类似Android中的ListView
- 15.Expanded：自动扩张widget，会自动扩张到剩余空间大小
- 16.GestureDetector：该widget可以拦截相关的手势及操作事件，一般用来包装需要有交互动作的widget
3.3 Dart数据类型如下
- int：整形
- double：双精度
- String：字符串
- bool ： 布尔类型
- []:数组
- Map：字典集合
3.4 Dart变量声明
可以使用
*var
*const
*final
声明变量方法如下：
final String a = "adad"; // OK
final String a1;//错误 final 类型的变量必须赋值。
const String a2; //错误 const 类型的变量必须赋值
String b = "adad";//OK
String b1;//OK
var d;//OK,var 声明可变变量，可以不赋值
var d1 = "aaaa";//OK,var 声明可变变量，也可以赋值
//var String = "";//错误写法,Dart没有关键字保留，此时String 被认为是一个普通变量，
e = "adas";//错误,此时e没有被生命过
3.5 Dart常用逻辑控制
3.5.1 if…else
if(){
...
}else if(){
...
}else{
...
}
3.5.2 while循环
while(true){
...
}
3.5.3 for循环
//-----------
for(var i = 1;i<=3;i++){
...
}
//-----------
var listData = ["obj"，"obj1"，"obj2"，"obj3"];
for（o in listData）{
...
}