将 Flutter 添加到现有应用程序

在 Flutter 中一次重写整个应用程序是不切实际的。对于这些情况，Flutter 可以作为库或模块逐步集成到您现有的应用程序中。然后可以将该模块导入到您的 Android 或 iOS（当前支持的平台）应用程序中，以在 Flutter 中呈现应用程序 UI 的一部分。或者，只是为了运行共享的 Dart 逻辑。

添加到应用程序功能支持集成任何屏幕尺寸的多个实例。这可以帮助一些场景，例如具有混合原生屏幕和 Flutter 屏幕的混合导航堆栈，或具有多个部分屏幕 Flutter 视图的页面。

Add to Android applications （添加到 Android 应用程序）

通过将 Flutter SDK 挂钩添加到 Gradle 脚本来自动构建和导入 Flutter 模块。
将您的 Flutter 模块构建到通用 Android 存档 (AAR) 中，以便集成到您自己的构建系统中，并实现更好的 Jetifier 与 AndroidX 的互操作性。
FlutterEngine API 用于独立于附加 FlutterActivity/FlutterFragment 等来启动和持久化您的 Flutter 环境。
android Studio Android/Flutter 协同编辑和模块创建/导入向导。
支持 Java 和 Kotlin 主机应用程序。
Flutter 模块可以使用 Flutter 插件与平台进行交互。
通过从 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用程序，支持 Flutter 调试和有状态热重载。

Flutter 中的视图

反应式或声明式编程与传统的命令式编程有何不同？声明式 UI 简介。

声明式 UI 简介

Flutter 使用的声明式风格与许多其他 UI 框架使用的命令式风格之间的概念差异。

为什么要声明式 UI？

Android 和 iOS 的框架通常使用命令式的 UI 编程风格。手动构建一个功能齐全的 UI 实体，例如 UIView 或等效项，然后在 UI 更改时使用方法和设置器对其进行修改。

为了减轻开发人员必须编写如何在各种 UI 状态之间转换的负担，Flutter 让开发人员描述当前的 UI 状态并将转换留给框架。

对如何操作 UI 的思维方式稍作转变。

如何在声明性框架中更改 UI？

在命令式风格中，您通常会转到 ViewB 的所有者并使用选择器或使用 findViewById 或类似方法检索实例 b，并对其调用。

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

// Declarative style
return ViewB(
  color: red,
  child: const ViewC(),
);

在声明式风格中，视图配置（例如 Flutter 的 Widgets）是不可变的，只是轻量级的“蓝图”。要更改 UI，小部件会触发自身的重建（最常见的方法是在 Flutter 中调用 StatefulWidgets 上的 setState() ）并构建一个新的小部件子树。

Flutter 不是在 UI 更改时改变旧实例 b ，而是构建新的 Widget 实例。该框架使用 RenderObjects 在幕后管理传统 UI 对象的许多职责（例如维护布局状态）。 RenderObjects 在帧之间持续存在，Flutter 的轻量级 Widgets 告诉框架在状态之间改变 RenderObjects。 Flutter 框架会处理剩下的事情。

在 Android 中，视图是屏幕上显示的所有内容的基础。按钮、工具栏和输入，一切都是视图。在 Flutter 中，与 View 大致对应的是 Widget。小部件并不完全映射到 Android 视图，但是当您熟悉 Flutter 的工作原理时，您可以将它们视为“您声明和构建 UI 的方式”。

但是，这些与视图有一些不同。首先，小部件具有不同的生命周期：它们是不可变的，只存在到需要更改时才存在。每当小部件或其状态发生变化时，Flutter 的框架都会创建一个新的小部件实例树。相比之下，Android 视图只绘制一次并且在调用 invalidate 之前不会重绘。

Flutter 的小部件是轻量级的，部分原因在于它们的不变性。因为它们本身不是视图，也没有直接绘制任何东西，而是对 UI 及其语义的描述，这些语义被“加载”到引擎盖下的实际视图对象中。

Flutter 包含 Material Components 库。这些是实现 Material Design 指南的小部件。 Material Design 是一种针对所有平台（包括 iOS）优化的灵活设计系统。

但 Flutter 的灵活性和表现力足以实现任何设计语言。例如，在 iOS 上，您可以使用 Cupertino 小部件来生成类似于 Apple 的 iOS 设计语言的界面。

First flutter demo

import 'package:flutter/material.dart';

void main() {
  runApp(new SampeApp());
}

class SampeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new SampleAppPage(key: UniqueKey()),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({required Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() {
    return new _SampleAppPageState();
  }
}

class _SampleAppPageState extends State<SampleAppPage> {
  String textToShow = "Flutter";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("Sample App")),
        body: new Center(child: new Text(textToShow)),
        floatingActionButton: new FloatingActionButton(
            onPressed: _updateText,
            tooltip: 'Update Text',
            child: new Icon(Icons.update)));
  }

  void _updateText() {
    setState(() {
      textToShow = "Flutter is Awesome!";
    });
  }
}

Flutter for Android

Add to Android applications （添加到 Android 应用程序）

Flutter 中的视图

First flutter demo

猜你喜欢