Flutter入门三部曲(1) - 基础认识
image.png
为什么选择Flutter
- 高开发效率。Hot road
- 跨平台运行
- 对比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<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
同时点击按钮，界面会发生同步。
总结
- 熟悉了Flutter的项目配置
- 对大体的界面书写有了一定的认知
下一遍，我们将具体更多学习Flutter中Widget的知识
