Flutter学习

     1：Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，因此有必要学习下flutter，下面记录下最近学习知识点：
    1：flutter使用的语言是dart语言，运行的入口是lib目录下的main.dart中的main方法，main方法中的runApp中传入的对象就是程序中要执行的，具体对象需要继承对应的组件，这里有两种组件可以继承，如下：
   StatelessWidget：无状态的组件
   StatefulWidget：有状态的组件
   （1）继承第一种无状态组件，需要实现对应的build方法，如下：

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primaryColor: Colors.blue),
      home:
      Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: ImagePickerDemo()
      ),
    );

      说明下，该方法返回的对象是Widget，都是通过MaterialApp创建，以前的样式需要加new（new MaterialApp），现在已经去掉，由这里可以看到，其实dart其实也是一种面向对象语音（个人理解），学过java或者其他面向对象语言的朋友应该就
    比较容易理解这个创建了，另外这里需要了解dart语言里面各个组件的属性和用法，例如这里的title，theme，home，Scaffold属性，当然dart不止这些属性。
    
    （2）继承第二种有状态的组件，需要实现如下方法：

     @override
  State<StatefulWidget> createState() {
    return _AnimatedListSimpleState();
  }
}

class _AnimatedListSimpleState extends State<ItemControl> {
...
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('AnimatedList'),
            actions: <Widget>[
              IconButton(onPressed: _insert,
                icon: Icon(Icons.add_circle),
                tooltip: 'insert a new item',),
              IconButton(onPressed: _remove,
                icon: Icon(Icons.remove),
                tooltip: 'remove the selected item',)
            ],),
          body: Padding(padding: const EdgeInsets.all(16.0),
            child: AnimatedList(
              key: _listKey,
              initialItemCount: _list.length,
              itemBuilder: _buildItem,
            ),),
        )
    );
    ...

  布局的创建（android是在layout中直接创建xml的布局，而flutter是在代码中直接编辑创建）：

  @override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar( //创建appbar
      title: new Text("Sample App"), //设置app的标题
    ),
    body: new Center(   //创建主体内容
      child: new MaterialButton(  //在布局中央设置子控件为material类型的按钮
        onPressed: () {},   //设置该按钮的点击事件
        child: new Text('Hello'), //设置该按钮的标题
        padding: new EdgeInsets.only(left: 10.0, right: 10.0), 设置该按钮左右的padding
      ),
    ),
  );
}

部分控件（Widget）如下：
Container：容器，可以设置子控件padding等属性
Column：竖直一排的容器
Row：横向一排的容器
ListView：类似android的ListView，也是竖直方向的列表Widget
GridView：类似android的GridView，也是横向方向的列表Widget
Stack：就是FrameLayout，帧布局，以左上角为起始点，按照子控件的先后顺序，直接覆盖上去，后来居上

添加第三方依赖：（在pubspec.yaml中添加，类似build.grade中dependencies），如下：

dependencies:
  flutter:
  sdk: flutter
  cupertino_icons: ^1.0.2    #基础框架
  english_words: ^3.1.0      #英文框架
  image_picker: ^0.6.7+21   #图片选择框架
  dio: ^2.1.7    #网络框架
  path_provider: ^1.6.11  provider框架

其中编译的时候如果这里有报错就可能是框架首字母没有对齐flutter问题，本人遇到过首字母没有对齐报错问题

引入外部图片：（也是在pubspec.yaml中添加），如下：
assets:
     - images/mv.jpg

     以上初步记录了本人学习到flutter知识，其实还有很多的知识点没有列出，比如交互，动画，手势事件，异步，网络以及数据的加载等，这里只是简单记录下，希望后面有时间再补充完整，上面有什么记录存在问题的，欢迎各位大神指出，本人将非常乐意修改。