flutter开发初体验

flutter目前最火的混合开发技术，作为苦逼的移动开发人员了解下总是没有错的，针对最近自己的学习，进行相关总结，希望在座的看官，看完此文后，能对flutter移动开发有个大概的了解，希望能给你开发flutter带来个大体的认知，由于学习接触时间不过，如有讲错的地方，请在评论区指出，谢谢；

注：经过多重比较，个人觉得AS是比较适合flutter移动开发的，集成方便，插件支持多，不亏是google大佬的亲儿子，安卓开发人员过渡也比较方便；

1 flutter项目结构

在正式进入前，首先给大家整体介绍下，项目结构，以及IDE的基本使用，由于篇幅有限，本文暂时不对dart语言进行过多介绍，有空的小伙伴可以点击连接进行自行查看 Dart;
不同平台开发环境搭建也可以参考连接，本文用的mac平台下的as开发flutter；

1.1 flutter项目结构介绍

项目结构

程序入口lib/main.dart

在移动开发中，我们往往都会有app程序入口这一设定，例如安卓的application注册，而flutter亦是如此，由于flutter开发中，全部采用的是widget来替代传统的activity（页面）这一设定，如果是安卓开发人员，我觉得将widget理解为fragment（碎片）更合理些，在main这个页面中，我们可以指定自己的初始wiget，以及全局路由的注册，示例如下：

程序入口指定，也可以指定为别的widget；

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

class MyApp extends StatelessWidget {

  static  GlobalKey navigatorState = new GlobalKey();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    //初始化下本地数据
    Global.init();
    return Store.init(
        context: context,
        child: MaterialApp(
          title: '零壹酒店',
          navigatorKey: navigatorState,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(titleName: "首页"),
          routes: routers,
        ));
  }
}
/// 路由器
Map routers = {
  "home": (context) {
    return new HomePage();
  },
};

程序环境搭建文件 pubspec.yaml

该文件的作用在于环境搭建，其实有点类似于安卓开发的gradle文件一样，对于第三方依赖，sdk配置等都在该文件注册，有一点需要注意的是，图片资源等文件的注册也要在该文件声明，否则会引用无效，不能正常加载出来；

version: 1.0.0+1

environment:
  sdk: ">=2.2.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  event_bus: ^1.0.1
  dio: ^3.0.8
  crypto: ^2.0.6
  json_serializable: ^2.0.0 # 解析
  build_runner: ^1.1.2 # 解析
  transformer_page_view: ^0.1.6
  flutter_webview_plugin: ^0.3.0
  device_info: ^0.2.0
  provider: ^3.0.1+1
  shared_preferences: ^0.4.2
  flutter_color_plugin: ^0.0.2
  fluttertoast: ^3.1.0
  flustars: ^0.3.2
#  fluttie: ^0.3.0
  #lottie使用控件
#  banner_view: "^1.2.0"
#  admob_flutter: ^1.0.0-beta.5 #滑轮banner

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/star.json
    - assets/emoji_shock.json
    - images/icon_action_check_in.png
    - images/icon_action_hotel.png
    - images/icon_action_mine.png
    - images/icon_user.png

程序主业务lib
原生态项目结构ios/android
资源文件目录 images/res/assets

1.2 AS基本调试

对于绝大部分开发而言，应用调试也是入门的一步，由于AS也是基于IntellJ开发，大部分功能都是通用，对于大部分开发者的使用门槛还是比较低的，不过我在开发中，发现，对于ios设备调试时候，AS貌似不能很好适配，经常性不能再ios设备进行正常的debug，也可能是我本人的用法错误导致，故而接下来的调试都以安卓设备表现为主。

从左往右的功能对应：

应用调试

调试设备选择
调试应用选择
启动项目run
项目debug

由于开发中可能要面对各种调试功能的使用，每个功能点的使用又千变万化，想要深入了解的话，可以参考功能调试

1.3 Open DevTools使用

由于写到了应用调试该功能，个人在开发中，感觉Open DevTools（简称DTS）在开发中确实能给我们的调试带来很大的便利，由于是flutter开发，as自带的profile并不能给我们记录应用的内存，网络，view绘制等数据的获取，而DTS的出现，正好可以取代以往开发中profile的位置。
由于篇幅关系，具体的使用案例可以参考DevTools

2 什么是widget，如何正确使用理解他：

在文章开篇的时候，我有提过，在flutter开发里面，可谓一切界面皆是widget，对于安卓开发人员，可以理解为增强版fragment（碎片），基本所有的和界面相关的实现都在当中实现。

2.1StatelessWidget StatefulWidget 两者的区别：

说到widget就必须聊到今天一个很重要的主题，StatelessWidget, StatefulWidget，因为大部分界面的实现都需要通过集成他们来实现界面显示。

StatelessWidget

没有状态的Widget，一般对于静态界面，不需要绑定数据的界面使用，简单的实现build方法即可。

class DemoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(child: Text("I am 。。。。。demo"),);
  }
}

StatefulWidget

其实就是绑定了数据的widget，通过单独的state来进行数据管理，当数据发生变化的时候，与其进行数据绑定的widget就会进行相关的数据刷新，达到动态将View和model数据绑定的一种模式。

class DemoStatePage extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return DemoStatePageState();
  }
}

class DemoStatePageState extends State {
  String msg = "i am  demo";

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:GestureDetector(
        onTap:(){
          setState(() {
            msg="i amnot demo";
          });
        },

        child:
      Text(
        msg,
        style: CurrentTextStyle.getNormalWhiteTextStyle(),
      ), ),

    );
  }
}

3 常用wiget使用：

Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

针对于flutter布局而言，个人感觉最大的区别在于布局实现的不习惯，安卓开发中，提供大量parentLayout来控制子布局的大小，相对位置等属性，flutter开发中更多的采用前端知识，主轴，副轴概念来控制具体子widget的布局实现，因此对于Row和Column使用极为重要。

3.1 Row Column 两者的使用：

如果有看过Row和Column的源码的话，你们就会发现，其实两者都是继承Flex去实现的，可以看出，Flex的构造函数就比Row和Column的多了一个参数。Row跟Column的区别，正是这个direction参数的不同。当为Axis.horizontal的时候，则是Row，当为Axis.vertical的时候，则是Column。
由于篇幅限制，属性的使用接受可以参考

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List children = const [],
})

在使用Row和Column的时候我们，经常会有困惑，什么是主轴（main axis），什么是交叉轴（ cross axis），通过下图，我们就可以清楚的了解到。

row和column

注：有前端用flex开发使用的经验的同学，完全可以参考flex属性使用。

3.2 其他常用layout使用:

3.2.1 Expand ，Positioned:

Expand：合理的使用flex属性，可以控制widget之间的权重比例；
Positioned：绝对布局，利用RTBL来决定widget在屏幕显示的位置空间；

flutter开发体验总结

flutter开发初体验

1 flutter项目结构

1.1 flutter项目结构介绍

1.2 AS基本调试

1.3 Open DevTools使用

2 什么是widget，如何正确使用理解他：

2.1StatelessWidget StatefulWidget 两者的区别：

3 常用wiget使用：

3.1 Row Column 两者的使用：

3.2 其他常用layout使用:

3.2.1 Expand ，Positioned:

3.如何构建自己的应用布局

3.1 布局搭建：

3.1.1 选择自己的layout 父布局(row,column的选择)：

3.1.2 绑定初始化数据：

4 常用第三方工具

你可能感兴趣的:(flutter开发体验总结)