赵走x博客 - 开发者的网上家园

Flutter入门：1、基础知识

资源编号:75701 Flutter入门精品推荐热度：101

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

>下一篇文章

# 为什么选择Flutter

1. 高开发效率。Hot Reload
2. 跨平台运行
3. 对比RN，Weex 更加流畅
    
    ![image.png](https://user-gold-cdn.xitu.io/2018/8/7/16514767fdd82029?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)
    
    看到整体的架构图，它是由`dart`完成上层的framework，然后由通过skia来完成图形的绘制。

# 环境搭建和安装

环境搭建可以直接参照[文档](https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2Fget-started%2Finstall%2F)来进行。 值得注意的是，在国内，设置环境变量会安装的更快

```
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](https://user-gold-cdn.xitu.io/2018/8/7/16514767febf3e4b?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

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

```
- 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](https://link.juejin.im?target=https%3A%2F%2Fpub.dartlang.org%2F)这个成熟的生态内，找到想要的插件
    
* 不同尺寸的图片资源

> 参考官方文档 [Adding Assets and Images in Flutter](https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2Fassets-and-images%2F%23from-packages) [Where do I store my resolution-dependent image files?](https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2Fflutter-for-android%2F%23where-do-i-store-my-resolution-dependent-image-files)

Flutter遵循简单的基于密度的格式，如iOS。`assets`可能是`1.0x`， `2.0x`，`3.0x`，或任何其他乘数。虽然`Flutter`中没有`dp`的概念。但是同样使用的是逻辑像素，它们与设备无关的像素基本相同。`MediaQuery`中的 [`devicePixelRatio`](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fdart-ui%2FWindow%2FdevicePixelRatio.html) 表示单个逻辑像素中的物理像素的比率。

| 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](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter%2Fblob%2Fmaster%2Fpackages%2Fflutter%2Flib%2Fsrc%2Fwidgets%2Fcontainer.dart)是一个常用的widget， 由多个widget组成，这些widget负责布局、绘制、定位和调整大小。具体来说，Container由 [LimitedBox](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FLimitedBox-class.html)、 [ConstrainedBox](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FConstrainedBox-class.html)、 [Align](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FAlign-class.html)、 [Padding](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FPadding-class.html)、 [DecoratedBox](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FDecoratedBox-class.html)、 和[Transform](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FTransform-class.html)组成。 您可以用各种方式组合这些以及其他简单的widget，而不是继承容器。

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

![image.png](https://user-gold-cdn.xitu.io/2018/8/7/1651476800794faf?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

##### 构建widget

您可以通过实现widget的[build](https://link.juejin.im?target=https%3A%2F%2Fdocs.flutter.io%2Fflutter%2Fwidgets%2FStatelessWidget%2Fbuild.html)返回widget树（或层次结构）来定义widget的独特特征 。 这棵树更具体地表示了用户界面的widget层次。

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

#### 界面编写

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

> 其实Flutter界面的书写的体验，很像web前端。只是没有用css而已。 建议优先看一下这边文章 [Flutter for Web (HTML/CSS) Developers](https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2Fweb-analogs%2F)

##### 自动生成的`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<MyHomePage> {
  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: <Widget>[
            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](https://user-gold-cdn.xitu.io/2018/8/7/16514767ffd7f224?imageslim)

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

### 总结

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

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