Flutter开发基础知识

时间  2020-01-02
标签 flutter 开发 基础 知识 繁體版
原文   原文链接

做为时下最留下的大前端跨平台开发框架，不少的公司和同窗都开始了Flutter学习和应用，关于Flutter的基础知识，能够参考下面的两篇文章。 Flutter环境搭建 Flutter 基础知识点总结前端

接下来，咱们将介绍一些Flutter应用开发中一些基本的知识。android

Flutter基础知识

建立Flutter项目

在Flutter开发中，建立一个Flutter 项目一般有如下两种方式：ios

  • 使用flutter create命令，确保Flutter SDK配置了环境变量。
  • 使用安装了Flutter和Dart插件的IDE，如Android Studio和IntelliJ IDEA。

命令行方式建立Flutter的命令以下：json

flutter create <projectname>
复制代码

若是使用IDE建立Flutter项目，能够依次选择【File】->【New】->【New Flutter Project...】，以下图所示： bash

在这里插入图片描述

运行项目

在Flutter开发中，运行Flutter项目主要有两种方式，一种是命令方式，一种是IDE的方式。 命令方式运行Flutter以下所示：app

flutter run -d 'iPhone X'
flutter run -d emulator-5554
复制代码

其中，-d后面跟的是具体的设备名称，能够是Android或iOS模拟器的名字，也能够一台已经链接到电脑上的Android或iOS的设备。 相比命令方式，咱们更推荐使用IDE图形化工具的方式，首先选择要运行的设备，而后选择main.dart入口文件，而后点击【运行】按钮便可运行Flutter项目，以下图： 框架

在这里插入图片描述
除了上面的命令外，Flutter开发中常见的命令还有： 

flutter emulator             //查看本地模拟器
flutter emulators --create --name xyz        //建立一个模拟器
flutter emulators --launch <emulator id>       //启动模拟器
flutter build apk;           //打包Android应用
flutter build apk –release;
flutter install;              //安装应用
flutter build ios;            //打包IOS应用
flutter build ios –release;
flutter clean;               //清理从新编译项目
flutter upgrade;            //升级Flutter SDK和依赖包
flutter channel;            //查看Flutter官方分支列表和当前项目使用的Flutter分支
flutter channel <分支名>;   //切换分支
复制代码

除此以外，咱们还能够点击 热重载按钮 (带有闪电⚡️图标的按钮)来开启热重载方法，以下图： less

在这里插入图片描述

Flutter调试

Flutter提供了各类各样的工具和功能来帮助开发者调试Flutter应用程序，若是你使用的是VsCode做为开发工具，那么能够参考下面的调试技巧：async

断点调试

在 Flutter 进行断点调试很是简单，只须要在 Vscode 上打上一个断点，按 F5 就会停在断点处。经过左边的调试栏，观察断点处的变量以及栈堆状况。 ide

在这里插入图片描述

debugger调试

debugger代码调试只能运行在开发阶段，debugger调试是Flutter提供的debugger API ，和JavaScript的console相似。例如：

import 'dart:developer';

void someFunction(double offset) {
    debugger(when: offset > 30.0, message: 'offset 大于 30 时，中断');
    // ...
}
复制代码

那么，当 offset 这个变量的值大于 30.0 时中断运行，并输出 message 的内容。

rendering 调试

rendering 调试即开启布局线调试，当打开 rendering 时会在界面上看到一些布局线，以便于修复布局效果。要开启rendering调试，须要在代码中添加debugPaintSizeEnabled。例如：

import 'package:flutter/rendering.dart';

void main() {
    debugPaintSizeEnabled = !true;
    runApp(new MyApp());
}
复制代码

而后，从新运行项目便可看得效果。

日志调试

日志调试是软件开发中的一种很常见的调试方式，能够方便开发者查看程序运行的日志信息，如今流行的IDE几乎都集成了日志模块。 Android Studio和Vscode 里的控制台/调试控制台均可以看到。

固然，为了方便，咱们也能够本身定义一个Debug类用于代码调试，例如：

class Debug {
    static log(String tag, String text) {
        print('[$tag] $text');
    }
    static info(String tag, String text) {
        print('[$tag] $text');
    }
    static success(String tag, String text) {
        print('[$tag] $text');
    }
    static error(String tag, String text) {
        print('[$tag] $text');
    }
}
复制代码

真机调试

在Android 真机上运行Flutter程序，须要先开启开发者选项，开启的步骤以下：

  • 打开【开发者选项】和【 USB 调试】。
  • 使用 USB 将手机链接电脑，若手机出现提示，受权电脑访问手机。
  • 在命令执行 flutter devices 确认链接电脑的设备。
  • 而后使用 flutter run 命令运行 app。
  • 在手机上开启 USB 调试模式。

在这里插入图片描述

Hello Word

和不少的程序同样，Flutter程序也有一个启动页面，新建项目时系统默认的启动页面是main.dart，那么咱们能够修改main.dart的代码。例如：

import 'package:flutter/material.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

复制代码

而后，运行上面的代码，能够看到以下的效果：

在这里插入图片描述

Flutter 项目结构

打开新建懂得Flutter工程，项目结构以下图所示：

在这里插入图片描述
能够发现，一个完整的Flutter项目目录结构以下： 

┬
└ projectname
  ┬
  ├ android      - Android部分的工程文件
  ├ build        - 项目的构建输出目录
  ├ ios          - iOS部分的工程文件
  ├ lib          - 项目中的Dart源文件
    ┬
    └ src        - 包含其余源文件
    └ main.dart  - 自动生成的项目入口文件，相似RN的index.js文件
  ├ test         - 测试相关文件
  └ pubspec.yaml - 项目依赖配置文件相似于RN的 package.json
复制代码

其中，对于开发者来讲，比较重要的有如下几个文件：

  • android：android平台相关代码；
  • ios：ios平台相关代码；
  • lib：flutter相关代码，也是Flutter项目源码存放的地方；
  • test：存放测试代码；
  • pubspec.yaml：配置文件，通常存放一些第三方的依赖。

入口函数

咱们知道，每一个应用程序都有一个入口函数，Flutter项目的入口函数就是main.dart文件的main函数。

void main() => runApp(MyApp()); 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
    );
  }
}

复制代码

在上面的代码中，返回了一个MaterialApp widget，MaterialApp能够理解为是UI的风格，MaterialApp是Android使用的风格，iOS则可使用CupertinoApp风格。

Flutter主题

除了MaterialApp样式外，咱们还可使用全局主题或使用Theme来定义应用程序局部的颜色和字体样式。

全局主题

建立应用主题的方法是将ThemeData提供给MaterialApp构造函数，若是没有提供主题，Flutter将建立一个默认主题，全局主题的使用示例以下：

new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        primaryColor: Colors.cyan[600]
      ),
    );
复制代码

局部主题

除了全局主题外，Flutter还支持建立特有的主题（局部主题）。具体使用时，数据实例化一个ThemeData并将其传递给Theme对象便可，以下所示：

new Theme(data: new ThemeData(accentColor: Colors.yellow), child: null),
复制代码

固然，还能够扩展父主题，扩展父主题时无须覆盖全部的主题属性，能够经过使用copyWith方法来实现，例如：

floatingActionButton: new Theme(
        data: Theme.of(context).copyWith(accentColor: Colors.amber),
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
复制代码

Flutter Widget

无状态组件和有状态组件

Flutter将组件分为无状态和有状态两种。其中，无状态组件(StatelessWidget)是不可变的，这意味着它们的属性不能改变，全部的值都是最终的。有状态组件(StatefulWidget)持有状态可能在Widget生命周期中发生变化。

再平时开发中，使用得最多的应该就是有状态组件，要实现一个StatefulWidget至少须要两个类：

  • 一个StatefulWidget类，StatefulWidget类自己是不变的；
  • 一个State类，在Widget生命周期中始终存在。

例如，官方给出的示例就使用了有状态组件。

建立可重用组件

组件通常是在设计和实现阶段由一些类或者模块组成的群组。每一个组件完成一个独立的功能, 而且都有一个和其它组件的良好接口。可重用组件是指经过对以往组件进行局部修改或者不修改就能够组成新的软件，可重用组件是可重用软件的基础。

在Flutter开发中，建立可重用组件的方式有不少，最简单就是经过参数的方式，建立一个能够重用的组件，例如：

// Flutter
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required 
     this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: this.onPress,
          ),
        ],
      )
    );
  }
}

复制代码

而后，在使用的时候，按照参数传入相应的值便可。

...
// Usage
CustomCard(
  index: index,
  onPress: () { 
    print('Card $index');
  },
)
    ...
复制代码

资源管理

再原生应用开发过程当中，Android和iOS都有特定的资源管理文件。虽然Android将resources 和 assets 区别对待，但在Flutter中它们都会被做为assets处理， 全部存在于Android上res / drawable- *文件夹中的资源都放在Flutter的assets文件夹中。

与Android相似，iOS 一样将 images 和 assets 做为不一样的东西，而 Flutter 中只有 assets。被放到 iOS 中 Images.xcasset 文件夹下的资源在 Flutter 中被放到了 assets 文件夹中。

在Flutter开发中，assets 是资源文件的统一称呼，能够用来表示任意类型的文件，而不只仅是图片。例如，你能够把 json 文件放置到 my-assets 文件夹中，将图片放到image文件中。

若是要访问 my-assets的文件，可使用 AssetBundle 来访问它，以下所示：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}
复制代码

在原生Android开发中，咱们将不一样分辨率的图片放到不一样的图片文件夹下，以下所示：

  • mipmap-ldpi 0.75x
  • mipmap-mdpi 1.0x
  • mipmap-hdpi 1.5x
  • mipmap-xhdpi 2.0x
  • mipmap-xxhdpi 3.0x
  • mipmap-xxxhdpi 4.0x

iOS 的图片则有1.0x，2.0x和3.0x之分，不一样分辨率的手机会自动加载对应分辨率的图片。

对应FLutter图片来讲，咱们也能够参考这种规则，把1.0x的图片放到 images 文件夹，将2.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的第三方库文件都在pubspec.yaml文件中，若是要使用某个第三方库，能够打开包仓库地址进行搜索，以下图所示：

在这里插入图片描述
下面以依赖url_launcher第三方库为例，使用步骤以下：

1， 打开pubspec.yaml文件，在dependencies下添加包的名称和版本：

url_launcher: ^5.1.1
复制代码

2，而后，点击Packages get命令来获取工程配置文件中的所添加的引用包，或者打开命令窗口执行flutter packages get命令，以下图：

在这里插入图片描述

3，而后，打开main.dart文件，导入url_launcher.dart包，并使用launch方法来打开url地址，以下所示：

import 'package:url_launcher/url_launcher.dart';

const url = "https://www.baidu.com";
launch(url);
复制代码

未完待续！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程