项目结构和资源

项目结构和资源

该从哪开始写代码呢？

从 main.dart 文件开始。当你创建 Flutter 应用的时候会自动生成这个文件。

// Dart
void main(){
 print('Hello, this is the main function.');
}

在 Flutter 中，入口文件是 ’projectname’/lib/main.dart 而程序执行是从 main 函数开始的。

Flutter 应用程序中的文件是如何组织的？

当你创建一个新的 Flutter 工程的时候，它会创建如下所示的文件夹结构。你可以自定义这个结构，不过这是整个开发的起点。

┬
└ projectname
  ┬
  ├ android      - Contains Android-specific files.
  ├ build        - Stores iOS and Android build files.
  ├ ios          - Contains iOS-specific files.
  ├ lib          - Contains externally accessible Dart source files.
    ┬
    └ src        - Contains additional source files.
    └ main.dart  - The Flutter entry point and the start of a new app.
                   This is generated automatically when you create a Flutter
                    project.
                   It's where you start writing your Dart code.
  ├ test         - Contains automated test files.
  └ pubspec.yaml - Contains the metadata for the Flutter app.
                   This is equivalent to the package.json file in React Native.
``` ```
┬
└ projectname
  ┬
  ├ android      - 包含 Android 相关文件。
  ├ build        - 存储 iOS 和 Android 构建文件。
  ├ ios          - 包含 iOS 相关文件。
  ├ lib          - 包含外部可访问 Dart 源文件。
    ┬
    └ src        - 包含附加源文件。
    └ main.dart  - Flutter 程序入口和新应用程序的起点。当你创建 Flutter 工程的时候会自动生成这些文件。你从这里开始写 Dart 代码
  ├ test         - 包含自动测试文件。
  └ pubspec.yaml - 包含 Flutter 应用程序的元数据。这个文件相当于 React Native 里的 package.json 文件。

我该把资源文件放到哪并且如何调用呢？

一个 Flutter 资源就是打包到你应用程序里的一个文件并且在程序运行的时候可以访问。Flutter 应用程序可以包含下述几种资源类型：

  • 静态数据比如 JSON 文件

  • 配置文件

  • 图标和图片 (JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP)

Flutter 使用 pubspec.yaml 文件来确定应用程序中的资源。该文件在工程的根目录。

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

assets 确定了需要包含在应用程序中的文件。每个资源都会在 pubspec.yaml 中定义所存储的相对路径。资源定义的顺序没有特殊要求。实际的文件夹（在这里指 assets ）也没影响。但是，由于资源可以放置于程序的任何目录，所以放在 assets 文件夹是比较好的。

在构建期间，Flutter 会将资源放到一个称为 asset bundle 的归档文件中，应用程序可以在运行时访问该文件。当一个资源在 pubspec.yaml 中被声明时，构建进程会查询和这个文件相关的子文件夹路径。这些文件也会被包含在 asset bundle 中。当你为应用程序选择和屏幕显示分辨率相关的图片时，Flutter 会使用 asset variants。

在 React Native，你可以在源码文件夹中通过添加文件来增加一个静态图片并且在代码中引用它。

<Image source={require('./my-icon.png')} />

在 Flutter 中，如果要增加静态图片的话就在 widget 的 build 方法中使用 AssetImage 类。

image: AssetImage('assets/background.png'),

如果想了解更多相关信息，请参考文档 在 Flutter 中添加资源和图片。

如何在网络中加载图片？

在 React Native，你可以在 Image 的 source 属性中设置 uri 和所需的尺寸。

在 Flutter 中，使用 Image.network 构造函数来实现通过地址加载图片的操作。

// Flutter
body: Image.network(
          'https://flutter.io/images/owl.jpg',

我如何安装依赖包和包插件？

Flutter 支持使用开发者向 Flutter 和 Dart 生态系统贡献的代码包。这样可以使大量开发者快速构建应用程序而无需重复造车轮。而平台相关的代码包就被称为包插件。

在 React Native 中，你可以在命令行中运行 yarn add {package-name} 或者 npm install —save{package-name} 来安装代码包。

在 Flutter 中，安装代码包需要按照如下的步骤：

  • 在 pubspec.yaml 的 dependencies 区域添加包名和版本。下面的例子向大家展示了如何将 google_sign_in 的 Dart package 添加到 pubspec.yaml 中。一定要检查一下 YAML 文件中的空格。因为 空格很重要!
dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3

  • 在命令行中输入 flutter packages get 来安装代码包。如果使用 IDE，它自己会运行 flutter packages get，或者它会提示你是不是要运行该命令。

  • 向下面代码一样在程序中引用代码包：

import 'package:flutter/cupertino.dart';

如果想了解更多相关信息，请参考 在 Flutter 里使用 Packages 和Flutter Packages 的开发和提交。

你可以找到很多 Flutter 开发者分享的代码包，就在 [Flutter packages 的 pub.dev.