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.0x2.0x3.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由 LimitedBoxConstrainedBoxAlignPaddingDecoratedBox、 和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的知识


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号