Flutter入门三部曲(1) - 基础认识

image.png

为什么选择Flutter

1. 高开发效率。Hot road
2. 跨平台运行
3. 对比RN，Weex 更加流畅
   
   

   image.png
   
   看到整体的架构图，它是由dart完成上层的framework，然后由通过skia来完成图形的绘制。

环境搭建和安装

环境搭建可以直接参照文档来进行。
值得注意的是，在国内，设置环境变量会安装的更快

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

或者使用交大(Shanghai Jiaotong University Linux User Group
)的地址

export PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
export FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/

创建项目

flutter create flutter_start

文件目录

生成了文件目录如下。快速认识一下

项目目录.png

这里面需要关注的目录如下：

- android //生成的android目录。里面是根据脚本生成的android项目
- ios //同上，ios项目
- lib //这个目录下面是运行的代码
  - main.dart //代码文件
- test //测试文件
 - widget_test.dart //测试代码
- pubspec.yaml //项目的配置文件

配置文件pubspec.yaml

顾名思义。通过这个文件来配置相关的依赖。
在配置文件中，我们可以配置第三方库。和使用的图片资源

#这里是配置项目的名字和说明
name: flutter_start
description: A new Flutter project.

# 配置项目依赖
dependencies:
  flutter:
    sdk: flutter

  #这里是加入了ios的图标。默认情况下，ios手机上，使用ios的图标
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

#项目的具体配置
flutter:
  # 将MaterialDesign的图标和字体使用并打包
  uses-material-design: true

  # 可以通过下面的方式，定义Assets内的文件
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
 
  # 像下面这样定义字体文件。每组字体文件都需要一个Family 
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

• 第三方库
  这里可以不断加入自己的第三方依赖。第三方依赖可以通过github上找到，也可以通过dartlang.org这个成熟的生态内，找到想要的插件

• 不同尺寸的图片资源

参考官方文档
Adding Assets and Images in Flutter
Where do I store my resolution-dependent image files?

Flutter遵循简单的基于密度的格式，如iOS。assets可能是1.0x， 2.0x，3.0x，或任何其他乘数。虽然Flutter中没有dp的概念。但是同样使用的是逻辑像素，它们与设备无关的像素基本相同。MediaQuery中的 devicePixelRatio 表示单个逻辑像素中的物理像素的比率。

Android density qualifier	Flutter pixel ratio
ldpi	0.75x
mdpi	1.0x
hdpi	1.5x
xhdpi	2.0x
xxhdpi	3.0x
xxxhdpi	4.0x

放置的项目如下图

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

之后，它会自动拷贝到对应的android或者ios的项目文件夹中。

基础的控件及界面

基础认识

首先，还是先来一个感性的认识。

Flutter中几乎所有的都是Widget。

Flutter具有一致的统一对象模型：widget。而且Flutter 遵循Simple is fast的原则，每个Widget都是用户界面一部分的不可变声明。(这意味着每次改变都会重建widget）

可以通过告诉框架使用另一个widget替换层次结构中的widget来响应事件，例如用户交互，替换后框架会比较新的和旧的widget，并高效地更新用户界面。

组合 > 集成

Widget本身通常由许多更小的、单一用途widget组成，这些widget结合起来产生强大的效果。例如，Container是一个常用的widget， 由多个widget组成，这些widget负责布局、绘制、定位和调整大小。具体来说，Container由 LimitedBox、 ConstrainedBox、 Align、 Padding、 DecoratedBox、 和Transform组成。 您可以用各种方式组合这些以及其他简单的widget，而不是继承容器。

类层次结构很浅且很宽，可以最大限度地增加可能的组合数量。

image.png

构建widget

您可以通过实现widget的build返回widget树（或层次结构）来定义widget的独特特征 。 这棵树更具体地表示了用户界面的widget层次。

更多关于这部分的知识后面继续介绍。

界面编写

这边文章我们对这部分，先浏览一遍。

其实Flutter界面的书写的体验，很像web前端。只是没有用css而已。
建议优先看一下这边文章
Flutter for Web (HTML/CSS) Developers

自动生成的main.dart

import 'package:flutter/material.dart';
//定义一个Main方法。Main方法中用简单RunApp就可以执行我们定义的Widget
void main() => runApp(new MyApp());
/*
Flutter写成的都是UI主键。主要分 StatelessWidget 和 StageWidge
整体的入口可以写成 StatelessWidget
*/
class MyApp extends StatelessWidget {
  //这个Widget就是我们App的最基层的Widget了
  //传入BuildContext给我们使用。
  @override
  Widget build(BuildContext context) {
//这样就可以直接使用Flutter为我们封装好的MaterialApp这个主题的了.从源码可以看到这个是个StatefulWidget
    //[home], [routes], [onGenerateRoute], or [builder] 这个主题下的这些方法不能都为空！！
    return new MaterialApp(
      title: 'Flutter Demo',
      //定义主题
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//statefulWidget ，因为Widget都是无状态的，所以如果需要有状态的话，`state`这个类来进行维持
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

//flutter中状态的持有类
class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    //这点和小程序很类似。调用setState进行状态同步和刷新。如果不调用这个方法，只是改变值，界面不会发生变化
    setState(() {
      _counter++;
    });
  }

  //state中的`build`方法，会自动在`setState`方法后调用。
  @override
  Widget build(BuildContext context) {
  //Scaffold可以理解程相当于一个html 它的body就是主要的内容。
    //同时它其实是满足MD的。所以它还能提供对应的组件
    //比如 AppBar .Drawer floatingButton等等
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      //这里可以初步的看到，如果想要布局居中显示，可以先包裹一层`Center`
      body: new Center(
       //因为是竖直的布局，所以再次包裹一层Column
        child: new Column(
          //使用这个属性，让居中竖直排列
          mainAxisAlignment: MainAxisAlignment.center,
         //children中传入其他组件
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

运行后的界面如下

flutter.gif

同时点击按钮，界面会发生同步。

总结

• 熟悉了Flutter的项目配置
• 对大体的界面书写有了一定的认知

下一遍，我们将具体更多学习Flutter中Widget的知识