跳至主要内容
内容

Flutter for Android developers

内容

本文档面向希望将现有 Android 知识应用于使用 Flutter 构建移动应用的 Android 开发者。如果您了解 Android 框架的基础知识，则可以使用本文档作为 Flutter 开发的入门指南。

在使用 Flutter 构建时，您的 Android 知识和技能集非常宝贵，因为 Flutter 依赖于移动操作系统来实现众多功能和配置。Flutter 是一种构建移动 UI 的新方法，但它拥有一个插件系统，可以与 Android（和 iOS）通信以执行非 UI 任务。如果您是 Android 专家，则无需重新学习所有内容即可使用 Flutter。

您可以将本文档用作食谱，随意跳转并查找与您需求最相关的疑问。

视图

#

Flutter 中 View 的等价物是什么？

#

在 Android 中，View 是屏幕上显示的所有内容的基础。按钮、工具栏和输入，所有内容都是 View。在 Flutter 中，与 View 粗略等效的是 Widget。Widget 并不完全对应于 Android 视图，但在您熟悉 Flutter 的工作原理时，您可以将其视为“声明和构建 UI 的方式”。

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

Flutter 的 Widget 非常轻量级，部分原因在于其不可变性。因为它们本身不是视图，也不直接绘制任何内容，而是对 UI 及其语义的描述，这些描述在幕后“膨胀”成实际的视图对象。

Flutter 包括 Material Components 库。这些是实现 Material Design 指南 的 Widget。Material Design 是一个灵活的设计系统，针对所有平台进行了优化，包括 iOS。

但 Flutter 足够灵活和富有表现力，可以实现任何设计语言。例如，在 iOS 上，您可以使用 Cupertino Widget 来生成看起来像 Apple 的 iOS 设计语言 的界面。

如何更新部件？

#

在 Android 中，您可以通过直接修改视图来更新视图。但是，在 Flutter 中，Widget 是不可变的，不会直接更新，而是必须使用 Widget 的状态。

这就是 Stateful 和 Stateless Widget 概念的由来。StatelessWidget 正如其名称所示——一个没有状态信息的 Widget。

StatelessWidgets 在您描述的用户界面部分不依赖于对象中的配置信息以外的任何内容时很有用。

例如，在 Android 中，这类似于放置带有徽标的 ImageView。徽标在运行时不会更改，因此在 Flutter 中使用 StatelessWidget。

如果您想根据发出 HTTP 调用或用户交互后接收到的数据动态更改 UI，则必须使用 StatefulWidget 并告诉 Flutter 框架 Widget 的 State 已更新，以便它可以更新该 Widget。

这里需要注意的重要一点是，在核心方面，无状态和有状态 Widget 的行为相同。它们在每一帧都重建，区别在于 StatefulWidget 具有一个 State 对象，该对象跨帧存储状态数据并恢复它。

如果您有疑问，请始终记住以下规则：如果 Widget 发生了变化（例如，由于用户交互），则它是可变的。但是，如果 Widget 对更改做出反应，则包含的父 Widget 仍然可以是无状态的，如果它本身没有对更改做出反应。

以下示例显示了如何使用 StatelessWidget。常见的 StatelessWidget 是 Text Widget。如果您查看 Text Widget 的实现，您会发现它继承自 StatelessWidget。

dart
Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

如您所见，Text Widget 没有与其关联的状态信息，它呈现其构造函数中传递的内容，仅此而已。

但是，如果想动态更改“我爱 Flutter”，例如在点击 FloatingActionButton 时？

要实现此目的，请将 Text Widget 包裹在一个 StatefulWidget 中，并在用户点击按钮时更新它。

例如

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text.
  String textToShow = 'I Like Flutter';

  void _updateText() {
    setState(() {
      // Update the text.
      textToShow = 'Flutter is Awesome!';
    });
  }

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

如何布局我的部件？我的 XML 布局文件在哪里？

#

在 Android 中，您使用 XML 编写布局，但在 Flutter 中，您使用 Widget 树编写布局。

以下示例显示了如何使用填充显示一个简单的 Widget

dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Sample App'),
    ),
    body: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.only(left: 20, right: 30),
        ),
        onPressed: () {},
        child: const Text('Hello'),
      ),
    ),
  );
}

您可以在 Widget 目录 中查看 Flutter 提供的一些布局。

如何向我的布局添加或删除组件？

#

在 Android 中，您在父级上调用 addChild() 或 removeChild() 以动态添加或删除子视图。在 Flutter 中，由于 Widget 是不可变的，因此没有直接等效于 addChild() 的方法。相反，您可以向父级传递一个返回 Widget 的函数，并使用布尔标志控制子级的创建。

例如，以下是如何在点击 FloatingActionButton 时在两个 Widget 之间切换

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle.
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  Widget _getToggleChild() {
    if (toggle) {
      return const Text('Toggle One');
    } else {
      return ElevatedButton(
        onPressed: () {},
        child: const Text('Toggle Two'),
      );
    }
  }

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

如何为部件设置动画？

#

在 Android 中，您可以使用 XML 创建动画，或者在视图上调用 animate() 方法。在 Flutter 中，通过将 Widget 包裹在动画 Widget 中来使用动画库为 Widget 设置动画。

在 Flutter 中，使用 AnimationController，它是一个 Animation<double>，可以暂停、搜索、停止和反转动画。它需要一个 Ticker 来发出 vsync 发生时的信号，并在运行期间的每一帧上产生 0 到 1 之间的线性插值。然后，您创建一个或多个 Animation 并将其附加到控制器。

例如，您可以使用 CurvedAnimation 来沿插值曲线实现动画。从这个意义上说，控制器是动画进度的“主”来源，而 CurvedAnimation 计算替换控制器默认线性运动的曲线。与 Widget 一样，Flutter 中的动画也使用组合工作。

构建 Widget 树时，您将 Animation 分配给 Widget 的动画属性，例如 FadeTransition 的不透明度，并告诉控制器启动动画。

以下示例显示了如何编写一个 FadeTransition，当您按下 FloatingActionButton 时，它会将 Widget 淡入徽标

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  const FadeAppTest({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  const MyFadeTest({super.key, required this.title});

  final String title;
  @override
  State<MyFadeTest> createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(
      parent: controller,
      curve: Curves.easeIn,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FadeTransition(
          opacity: curve,
          child: const FlutterLogo(
            size: 100,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Fade',
        onPressed: () {
          controller.forward();
        },
        child: const Icon(Icons.brush),
      ),
    );
  }
}

有关更多信息，请参阅 动画和运动 Widget、动画教程 和 动画概述。

如何使用画布进行绘图/绘画？

#

在 Android 中，您将使用 Canvas 和 Drawable 将图像和形状绘制到屏幕上。Flutter 也具有类似的 Canvas API，因为它基于相同的底层渲染引擎 Skia。因此，在 Flutter 中绘制到画布对于 Android 开发者来说是一项非常熟悉的任务。

Flutter 有两个类可以帮助您绘制到画布：CustomPaint 和 CustomPainter，后者实现您的算法以绘制到画布。

要了解如何在 Flutter 中实现签名绘制器，请参阅 Collin 在 自定义绘制 上的回答。

dart
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: DemoApp()));

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) => const Scaffold(body: Signature());
}

class Signature extends StatefulWidget {
  const Signature({super.key});

  @override
  SignatureState createState() => SignatureState();
}

class SignatureState extends State<Signature> {
  List<Offset?> _points = <Offset>[];
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          RenderBox? referenceBox = context.findRenderObject() as RenderBox;
          Offset localPosition =
              referenceBox.globalToLocal(details.globalPosition);
          _points = List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (details) => _points.add(null),
      child: CustomPaint(
        painter: SignaturePainter(_points),
        size: Size.infinite,
      ),
    );
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
  final List<Offset?> points;
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i]!, points[i + 1]!, paint);
      }
    }
  }

  @override
  bool shouldRepaint(SignaturePainter oldDelegate) =>
      oldDelegate.points != points;
}

如何构建自定义部件？

#

在 Android 中，您通常会子类化 View 或使用预先存在的视图来覆盖和实现实现所需行为的方法。

在 Flutter 中，通过 组合较小的 Widget（而不是扩展它们）来构建自定义 Widget。这有点类似于在 Android 中实现自定义 ViewGroup，其中所有构建块都已存在，但您提供了不同的行为——例如，自定义布局逻辑。

例如，如何构建一个在构造函数中获取标签的 CustomButton？创建一个组合 ElevatedButton 和标签的 CustomButton，而不是扩展 ElevatedButton

dart
class CustomButton extends StatelessWidget {
  final String label;

  const CustomButton(this.label, {super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(label),
    );
  }
}

然后使用 CustomButton，就像使用任何其他 Flutter Widget 一样

dart
@override
Widget build(BuildContext context) {
  return const Center(
    child: CustomButton('Hello'),
  );
}

意图

#

Flutter 中 Intent 的等价物是什么？

#

在 Android 中，Intent 主要有两个用例：在 Activity 之间导航以及与组件通信。另一方面，Flutter 没有 Intent 的概念，尽管您仍然可以通过本机集成（使用 插件）启动 Intent。

Flutter 实际上没有与 Activity 和 Fragment 直接等效的内容；相反，在 Flutter 中，您使用 Navigator 和 Route 在屏幕之间导航，所有这些都在同一个 Activity 中。

Route 是应用的“屏幕”或“页面”的抽象，Navigator 是管理路由的 Widget。路由大致对应于 Activity，但它不具有相同的含义。导航器可以推送和弹出路由以在屏幕之间移动。导航器的工作原理类似于一个堆栈，您可以在其中 push() 您要导航到的新路由，并且可以在您想要“后退”时从其中 pop() 路由。

在 Android 中，您在应用的 AndroidManifest.xml 中声明 Activity。

在 Flutter 中，您可以使用以下几种方法在页面之间导航

  • 指定路由名称的 Map。（使用 MaterialApp）
  • 直接导航到路由。（使用 WidgetsApp）

以下示例构建了一个 Map。

dart
void main() {
  runApp(MaterialApp(
    home: const MyAppHome(), // Becomes the route named '/'.
    routes: <String, WidgetBuilder>{
      '/a': (context) => const MyPage(title: 'page A'),
      '/b': (context) => const MyPage(title: 'page B'),
      '/c': (context) => const MyPage(title: 'page C'),
    },
  ));
}

通过将路由名称 push 到 Navigator 来导航到路由。

dart
Navigator.of(context).pushNamed('/b');

Intent 的另一个常用用例是调用外部组件，例如相机或文件选择器。为此，您需要创建本机平台集成（或使用 现有的插件）。

要了解如何构建原生平台集成，请参阅开发包和插件。

如何在 Flutter 中处理来自外部应用的传入意图？

#

Flutter 可以通过直接与 Android 层通信并请求共享的数据来处理来自 Android 的传入意图。

以下示例在运行 Flutter 代码的原生 Activity 上注册了一个文本共享意图过滤器，以便其他应用可以与我们的 Flutter 应用共享文本。

基本流程意味着我们首先在 Android 原生端（在我们的Activity中）处理共享的文本数据，然后等待 Flutter 请求数据，以便使用MethodChannel提供数据。

首先，在AndroidManifest.xml中注册所有意图的意图过滤器。

xml
<activity
  android:name=".MainActivity"
  android:launchMode="singleTop"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize">
  <!-- ... -->
  <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/plain" />
  </intent-filter>
</activity>

然后在MainActivity中，处理意图，从意图中提取共享的文本，并将其保留。当 Flutter 准备好进行处理时，它会使用平台通道请求数据，数据将从原生端发送过来。

java
package com.example.shared;

import android.content.Intent;
import android.os.Bundle;

import androidx.annotation.NonNull;

import io.flutter.plugin.common.MethodChannel;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {

  private String sharedText;
  private static final String CHANNEL = "app.channel.shared.data";

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Intent intent = getIntent();
    String action = intent.getAction();
    String type = intent.getType();

    if (Intent.ACTION_SEND.equals(action) && type != null) {
      if ("text/plain".equals(type)) {
        handleSendText(intent); // Handle text being sent
      }
    }
  }

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
      GeneratedPluginRegistrant.registerWith(flutterEngine);

      new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
              .setMethodCallHandler(
                      (call, result) -> {
                          if (call.method.contentEquals("getSharedText")) {
                              result.success(sharedText);
                              sharedText = null;
                          }
                      }
              );
  }

  void handleSendText(Intent intent) {
    sharedText = intent.getStringExtra(Intent.EXTRA_TEXT);
  }
}

最后，在小部件渲染时从 Flutter 端请求数据。

dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Shared App Handler',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  static const platform = MethodChannel('app.channel.shared.data');
  String dataShared = 'No data';

  @override
  void initState() {
    super.initState();
    getSharedText();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text(dataShared)));
  }

  Future<void> getSharedText() async {
    var sharedData = await platform.invokeMethod('getSharedText');
    if (sharedData != null) {
      setState(() {
        dataShared = sharedData;
      });
    }
  }
}

startActivityForResult() 的等价物是什么？

#

Navigator类处理 Flutter 中的路由，并用于从已推送到堆栈的路由获取结果。这是通过对push()返回的Future进行await来完成的。

例如，要启动一个允许用户选择其位置的位置路由，您可以执行以下操作：

dart
Object? coordinates = await Navigator.of(context).pushNamed('/location');

然后，在您的位置路由中，一旦用户选择了其位置，您可以使用结果pop堆栈。

dart
Navigator.of(context).pop({'lat': 43.821757, 'long': -79.226392});

异步 UI

#

Flutter 中 runOnUiThread() 的等价物是什么？

#

Dart 具有单线程执行模型，支持Isolate（一种在另一个线程上运行 Dart 代码的方式）、事件循环和异步编程。除非您生成Isolate，否则您的 Dart 代码将在主 UI 线程中运行，并由事件循环驱动。Flutter 的事件循环等效于 Android 的主Looper，即附加到主线程的Looper。

Dart 的单线程模型并不意味着您需要将所有内容都作为导致 UI 冻结的阻塞操作来运行。与 Android 始终需要保持主线程空闲不同，在 Flutter 中，请使用 Dart 语言提供的异步功能（如async/await）来执行异步工作。如果您在 C#、Javascript 中使用过它，或者使用过 Kotlin 的协程，您可能熟悉async/await范式。

例如，您可以使用async/await运行网络代码，而不会导致 UI 挂起，并让 Dart 完成繁重的工作。

dart
Future<void> loadData() async {
  var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  http.Response response = await http.get(dataURL);
  setState(() {
    widgets = jsonDecode(response.body);
  });
}

完成await的网络调用后，通过调用setState()更新 UI，这将触发小部件子树的重建并更新数据。

以下示例异步加载数据并在ListView中显示它。

dart
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (context, position) {
          return getRow(position);
        },
      ),
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = jsonDecode(response.body);
    });
  }
}

有关在后台执行工作的更多信息以及 Flutter 与 Android 的区别，请参阅下一节。

如何将工作移动到后台线程？

#

在 Android 中，当您要访问网络资源时，通常会切换到后台线程并执行工作，以避免阻塞主线程并避免 ANR。例如，您可能正在使用AsyncTask、LiveData、IntentService、JobScheduler作业或使用在后台线程上工作的调度程序的 RxJava 管道。

由于 Flutter 是单线程的并运行事件循环（如 Node.js），因此您无需担心线程管理或生成后台线程。如果您正在执行 I/O 绑定工作（例如磁盘访问或网络调用），则可以安全地使用async/await，一切就绪。另一方面，如果您需要执行使 CPU 保持繁忙状态的计算密集型工作，则需要将其移动到Isolate以避免阻塞事件循环，就像您在 Android 中将任何类型的工作都从主线程中移除一样。

对于 I/O 绑定工作，请将函数声明为async函数，并在函数内部对长时间运行的任务进行await。

dart
Future<void> loadData() async {
  var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  http.Response response = await http.get(dataURL);
  setState(() {
    widgets = jsonDecode(response.body);
  });
}

这通常是您执行网络或数据库调用（这两种都是 I/O 操作）的方式。

在 Android 中，当您扩展AsyncTask时，通常会重写 3 个方法，onPreExecute()、doInBackground()和onPostExecute()。Flutter 中没有等效的方法，因为您会在长时间运行的函数上进行await，Dart 的事件循环会处理其余操作。

但是，有时您可能正在处理大量数据，并且 UI 会挂起。在 Flutter 中，使用Isolate利用多个 CPU 内核来执行长时间运行或计算密集型任务。

Isolate 是独立的执行线程，与主执行内存堆不共享任何内存。这意味着您无法访问主线程中的变量，也无法通过调用setState()更新 UI。与 Android 线程不同，Isolate 名副其实，不能共享内存（例如，以静态字段的形式）。

以下示例在一个简单的 Isolate 中展示了如何将数据共享回主线程以更新 UI。

dart
Future<void> loadData() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(dataLoader, receivePort.sendPort);

  // The 'echo' isolate sends its SendPort as the first message.
  SendPort sendPort = await receivePort.first;

  final msg = await sendReceive(
    sendPort,
    'https://jsonplaceholder.typicode.com/posts',
  ) as List<Object?>;

  setState(() {
    widgets = msg;
  });
}

// The entry point for the isolate.
static Future<void> dataLoader(SendPort sendPort) async {
  // Open the ReceivePort for incoming messages.
  ReceivePort port = ReceivePort();

  // Notify any other isolates what port this isolate listens to.
  sendPort.send(port.sendPort);

  await for (var msg in port) {
    String data = msg[0];
    SendPort replyTo = msg[1];

    String dataURL = data;
    http.Response response = await http.get(Uri.parse(dataURL));
    // Lots of JSON to parse
    replyTo.send(jsonDecode(response.body));
  }
}

Future<Object?> sendReceive(SendPort port, Object? msg) {
  ReceivePort response = ReceivePort();
  port.send([msg, response.sendPort]);
  return response.first;
}

这里，dataLoader()是在其自己的独立执行线程中运行的Isolate。在 Isolate 中，您可以执行更多 CPU 密集型处理（例如解析大型 JSON），或执行计算密集型数学运算，例如加密或信号处理。

您可以运行下面的完整示例。

dart
import 'dart:async';
import 'dart:convert';
import 'dart:isolate';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Widget getBody() {
    bool showLoadingDialog = widgets.isEmpty;
    if (showLoadingDialog) {
      return getProgressDialog();
    } else {
      return getListView();
    }
  }

  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: getBody(),
    );
  }

  ListView getListView() {
    return ListView.builder(
      itemCount: widgets.length,
      itemBuilder: (context, position) {
        return getRow(position);
      },
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    ReceivePort receivePort = ReceivePort();
    await Isolate.spawn(dataLoader, receivePort.sendPort);

    // The 'echo' isolate sends its SendPort as the first message.
    SendPort sendPort = await receivePort.first;

    final msg = await sendReceive(
      sendPort,
      'https://jsonplaceholder.typicode.com/posts',
    ) as List<Object?>;

    setState(() {
      widgets = msg;
    });
  }

  // The entry point for the isolate.
  static Future<void> dataLoader(SendPort sendPort) async {
    // Open the ReceivePort for incoming messages.
    ReceivePort port = ReceivePort();

    // Notify any other isolates what port this isolate listens to.
    sendPort.send(port.sendPort);

    await for (var msg in port) {
      String data = msg[0];
      SendPort replyTo = msg[1];

      String dataURL = data;
      http.Response response = await http.get(Uri.parse(dataURL));
      // Lots of JSON to parse
      replyTo.send(jsonDecode(response.body));
    }
  }

  Future<Object?> sendReceive(SendPort port, Object? msg) {
    ReceivePort response = ReceivePort();
    port.send([msg, response.sendPort]);
    return response.first;
  }
}

Flutter 上 OkHttp 的等价物是什么？

#

当您使用流行的http包时，在 Flutter 中进行网络调用非常容易。

虽然 http 包没有 OkHttp 中的所有功能，但它抽象化了您通常需要自己实现的大部分网络操作，从而使进行网络调用变得简单。

要将http包添加为依赖项，请运行flutter pub add。

flutter pub add http

要进行网络调用，请在async函数http.get()上调用await。

dart
import 'dart:developer' as developer;
import 'package:http/http.dart' as http;

Future<void> loadData() async {
  var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  http.Response response = await http.get(dataURL);
  developer.log(response.body);
}

如何显示长时间运行任务的进度？

#

在 Android 中，您通常会在 UI 中显示ProgressBar视图，同时在后台线程上执行长时间运行的任务。

在 Flutter 中，使用ProgressIndicator小部件。通过控制何时通过布尔标志渲染它来以编程方式显示进度。在长时间运行的任务开始之前告诉 Flutter 更新其状态，并在结束后隐藏它。

在以下示例中，构建函数被分成三个不同的函数。如果showLoadingDialog为true（当widgets.isEmpty时），则渲染ProgressIndicator。否则，使用从网络调用返回的数据渲染ListView。

dart
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Widget getBody() {
    bool showLoadingDialog = widgets.isEmpty;
    if (showLoadingDialog) {
      return getProgressDialog();
    } else {
      return getListView();
    }
  }

  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: getBody(),
    );
  }

  ListView getListView() {
    return ListView.builder(
      itemCount: widgets.length,
      itemBuilder: (context, position) {
        return getRow(position);
      },
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = jsonDecode(response.body);
    });
  }
}

项目结构和资源

#

在哪里存储我的分辨率相关的图像文件？

#

虽然 Android 将资源和资产视为不同的项目，但 Flutter 应用只有资产。Android 上res/drawable-*文件夹中存在的全部资源都放置在 Flutter 的 assets 文件夹中。

Flutter 遵循与 iOS 类似的简单基于密度的格式。资产可能是1.0x、2.0x、3.0x或任何其他倍数。Flutter 没有dp，但有逻辑像素，基本上与设备独立像素相同。Flutter 的devicePixelRatio表示单个逻辑像素中物理像素的比率。

Android 的密度桶的等效项为：

Android 密度限定符Flutter 像素比率
ldpi0.75x
mdpi1.0x
hdpi1.5x
xhdpi2.0x
xxhdpi3.0x
xxxhdpi4.0x

资产位于任何任意文件夹中——Flutter 没有预定义的文件夹结构。您在pubspec.yaml文件中声明资产（及其位置），Flutter 会获取它们。

存储在原生资产文件夹中的资产可以使用 Android 的AssetManager在原生端访问。

kotlin
val flutterAssetStream = assetManager.open("flutter_assets/assets/my_flutter_asset.png")

Flutter 无法访问原生资源或资产。

例如，要将名为my_icon.png的新图像资产添加到我们的 Flutter 项目中，并决定将其放在我们任意命名的文件夹images中，您需要将基本图像 (1.0x) 放入images文件夹中，并将所有其他变体放入名为相应比率倍数的子文件夹中。

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

接下来，您需要在您的pubspec.yaml文件中声明这些图像。

yaml
assets:
 - images/my_icon.jpeg

然后，您可以使用AssetImage访问您的图像。

dart
AssetImage('images/my_icon.jpeg')

或直接在Image小部件中访问。

dart
@override
Widget build(BuildContext context) {
  return Image.asset('images/my_image.png');
}

在哪里存储字符串？如何处理本地化？

#

Flutter 目前没有专门用于字符串的类似资源的系统。最佳且推荐的做法是将字符串保存在.arb文件中，作为键值对，例如：

json
{
   "@@locale": "en",
   "hello":"Hello {userName}",
   "@hello":{
      "description":"A message with a single parameter",
      "placeholders":{
         "userName":{
            "type":"String",
            "example":"Bob"
         }
      }
   }
}

然后在您的代码中，您可以像这样访问您的字符串。

dart
Text(AppLocalizations.of(context)!.hello('John'));

Flutter 在 Android 上对辅助功能有基本支持，但这项功能仍在开发中。

有关此方面的更多信息，请参阅Flutter 应用国际化。

Gradle 文件的等价物是什么？如何添加依赖项？

#

在 Android 中，您可以通过添加到 Gradle 构建脚本中来添加依赖项。Flutter 使用 Dart 自己的构建系统和 Pub 包管理器。这些工具将原生 Android 和 iOS 包装应用的构建委托给各自的构建系统。

虽然 Flutter 项目的android文件夹下有 Gradle 文件，但只有在添加每个平台集成所需的原生依赖项时才使用这些文件。通常，使用pubspec.yaml声明要在 Flutter 中使用的外部依赖项。查找 Flutter 包的好地方是pub.dev。

Activity 和 Fragment

#

Flutter 中 Activity 和 Fragment 的等价物是什么？

#

在 Android 中，Activity表示用户可以执行的单个焦点操作。Fragment表示行为或用户界面的部分。Fragment 是一种模块化代码、为更大屏幕组合复杂用户界面以及帮助扩展应用程序 UI 的方法。在 Flutter 中，这两个概念都属于Widget的范围。

要了解有关构建 Activity 和 Fragment 的 UI 的更多信息，请参阅社区贡献的 Medium 文章Flutter for Android Developers: How to design Activity UI in Flutter。

如意图部分所述，Flutter 中的屏幕由Widget表示，因为在 Flutter 中一切都是小部件。使用Navigator在表示不同屏幕或页面，或者可能表示相同数据的不同状态或渲染的不同Route之间移动。

如何监听 Android Activity 生命周期事件？

#

在 Android 中，您可以重写来自Activity的方法以捕获 Activity 本身的生命周期方法，或在Application上注册ActivityLifecycleCallbacks。在 Flutter 中，您既没有这两个概念，但您可以通过挂接到WidgetsBinding观察器并侦听didChangeAppLifecycleState()更改事件来侦听生命周期事件。

可观察的生命周期事件为：

  • detached - 应用程序仍托管在 Flutter 引擎上，但与任何主机视图分离。
  • inactive - 应用程序处于非活动状态，并且未接收用户输入。
  • paused - 应用程序当前对用户不可见，未响应用户输入，并且在后台运行。这相当于 Android 中的onPause()。
  • resumed - 应用程序可见并响应用户输入。这相当于 Android 中的onPostResume()。

有关这些状态含义的更多详细信息，请参阅AppLifecycleStatus文档。

您可能已经注意到，只有少数几个 Activity 生命周期事件可用；虽然 FlutterActivity 在内部捕获了几乎所有 Activity 生命周期事件并将其发送到 Flutter 引擎，但它们大多对您隐藏了起来。Flutter 会为您处理引擎的启动和停止，在大多数情况下，您几乎没有必要在 Flutter 端观察 Activity 生命周期。如果您需要观察生命周期来获取或释放任何原生资源，那么无论如何您都应该在原生端进行操作。

以下是如何观察包含 Activity 的生命周期状态的示例

dart
import 'package:flutter/widgets.dart';

class LifecycleWatcher extends StatefulWidget {
  const LifecycleWatcher({super.key});

  @override
  State<LifecycleWatcher> createState() => _LifecycleWatcherState();
}

class _LifecycleWatcherState extends State<LifecycleWatcher>
    with WidgetsBindingObserver {
  AppLifecycleState? _lastLifecycleState;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _lastLifecycleState = state;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_lastLifecycleState == null) {
      return const Text(
        'This widget has not observed any lifecycle changes.',
        textDirection: TextDirection.ltr,
      );
    }

    return Text(
      'The most recent lifecycle state this widget observed was: $_lastLifecycleState.',
      textDirection: TextDirection.ltr,
    );
  }
}

void main() {
  runApp(const Center(child: LifecycleWatcher()));
}

布局

#

LinearLayout 的等价物是什么？

#

在 Android 中，使用 LinearLayout 以线性方式（水平或垂直）布局您的 Widget。在 Flutter 中，使用 Row 或 Column Widget 来实现相同的结果。

如果您注意到这两个代码示例除了“Row”和“Column”Widget 外完全相同。子 Widget 是一样的，并且可以利用此功能来开发随着时间的推移而变化的丰富布局，同时保持相同的子 Widget。

dart
@override
Widget build(BuildContext context) {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}
dart
@override
Widget build(BuildContext context) {
  return const Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Column One'),
      Text('Column Two'),
      Text('Column Three'),
      Text('Column Four'),
    ],
  );
}

要了解有关构建线性布局的更多信息，请参阅社区贡献的 Medium 文章 Flutter for Android 开发人员：如何在 Flutter 中设计 LinearLayout。

RelativeLayout 的等价物是什么？

#

RelativeLayout 将您的 Widget 相对于彼此进行布局。在 Flutter 中，有几种方法可以实现相同的结果。

您可以通过组合使用 Column、Row 和 Stack Widget 来实现 RelativeLayout 的效果。您可以为 Widget 构造函数指定规则，说明子 Widget 如何相对于父 Widget 布局。

有关在 Flutter 中构建 RelativeLayout 的一个很好的示例，请参阅 Collin 在 StackOverflow 上的答案。

ScrollView 的等价物是什么？

#

在 Android 中，使用 ScrollView 布局您的 Widget——如果用户的设备屏幕小于您的内容，则会滚动。

在 Flutter 中，最简单的方法是使用 ListView Widget。这可能看起来像是来自 Android 的过度设计，但在 Flutter 中，ListView Widget 既是 ScrollView，也是 Android ListView。

dart
@override
Widget build(BuildContext context) {
  return ListView(
    children: const <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

如何在 Flutter 中处理横向切换？

#

如果 AndroidManifest.xml 包含，则 FlutterView 会处理配置更改

yaml
android:configChanges="orientation|screenSize"

手势检测和触摸事件处理

#

如何在 Flutter 中向 Widget 添加 onClick 监听器？

#

在 Android 中，您可以通过调用方法“setOnClickListener”将 onClick 附加到按钮等视图。

在 Flutter 中，有两种添加触摸监听器的方法

  1. 如果 Widget 支持事件检测，则向其传递一个函数并在函数中处理它。例如，ElevatedButton 有一个 onPressed 参数
dart
@override
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () {
      developer.log('click');
    },
    child: const Text('Button'),
  );
}
  1. 如果 Widget 不支持事件检测，则将 Widget 包裹在 GestureDetector 中，并将一个函数传递给 onTap 参数。
dart
class SampleTapApp extends StatelessWidget {
  const SampleTapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            developer.log('tap');
          },
          child: const FlutterLogo(
            size: 200,
          ),
        ),
      ),
    );
  }
}

如何在 Widget 上处理其他手势？

#

使用 GestureDetector，您可以监听各种手势，例如

  • 点击

    • onTapDown - 可能导致点击的指针已在特定位置接触屏幕。
    • onTapUp - 触发点击的指针已在特定位置停止接触屏幕。
    • onTap - 发生了点击。
    • onTapCancel - 之前触发 onTapDown 的指针不会导致点击。

  • 双击

    • onDoubleTap - 用户快速连续两次点击同一位置。

  • 长按

    • onLongPress - 指针在同一位置与屏幕接触了一段时间。

  • 垂直拖动

    • onVerticalDragStart - 指针已接触屏幕，并且可能会开始垂直移动。
    • onVerticalDragUpdate - 与屏幕接触的指针已在垂直方向上进一步移动。
    • onVerticalDragEnd - 之前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动。

  • 水平拖动

    • onHorizontalDragStart - 指针已接触屏幕，并且可能会开始水平移动。
    • onHorizontalDragUpdate - 与屏幕接触的指针已在水平方向上进一步移动。
    • onHorizontalDragEnd - 之前与屏幕接触并水平移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动。

以下示例显示了一个 GestureDetector，它在双击时旋转 Flutter 徽标

dart
class SampleApp extends StatefulWidget {
  const SampleApp({super.key});

  @override
  State<SampleApp> createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );
    curve = CurvedAnimation(
      parent: controller,
      curve: Curves.easeIn,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onDoubleTap: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
          child: RotationTransition(
            turns: curve,
            child: const FlutterLogo(
              size: 200,
            ),
          ),
        ),
      ),
    );
  }
}

ListView 和适配器

#

Flutter 中 ListView 的替代方案是什么？

#

Flutter 中 ListView 的等价物是……ListView！

在 Android ListView 中，您创建适配器并将其传递给 ListView，后者使用适配器返回的内容渲染每一行。但是，您必须确保回收行，否则会出现各种疯狂的视觉故障和内存问题。

由于 Flutter 的不可变 Widget 模式，您将 Widget 列表传递给 ListView，Flutter 会确保滚动快速流畅。

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: ListView(children: _getListData()),
    );
  }

  List<Widget> _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(Padding(
        padding: const EdgeInsets.all(10),
        child: Text('Row $i'),
      ));
    }
    return widgets;
  }
}

如何知道点击了哪个列表项？

#

在 Android 中，ListView 有一个方法可以找出哪个项目被点击，“onItemClickListener”。在 Flutter 中，使用传入 Widget 提供的触摸处理。

dart
import 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: ListView(children: _getListData()),
    );
  }

  List<Widget> _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(
        GestureDetector(
          onTap: () {
            developer.log('row tapped');
          },
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Text('Row $i'),
          ),
        ),
      );
    }
    return widgets;
  }
}

如何动态更新 ListView？

#

在 Android 上，您更新适配器并调用 notifyDataSetChanged。

在 Flutter 中，如果您要更新 setState() 内的 Widget 列表，您会很快发现您的数据在视觉上没有改变。这是因为当调用 setState() 时，Flutter 渲染引擎会查看 Widget 树以查看是否有任何更改。当它到达您的 ListView 时，它会执行 == 检查，并确定这两个 ListView 相同。没有任何更改，因此不需要更新。

要以简单的方式更新您的 ListView，请在 setState() 内创建一个新的 List，并将数据从旧列表复制到新列表。虽然这种方法很简单，但不建议用于大型数据集，如下一示例所示。

dart
import 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: ListView(children: widgets),
    );
  }

  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets = List.from(widgets);
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Text('Row $i'),
      ),
    );
  }
}

构建列表的推荐方法、高效且有效的方法是使用 ListView.Builder。当您拥有动态 List 或包含大量数据的 List 时，此方法非常有用。这基本上等同于 Android 上的 RecyclerView，它会自动为您回收列表元素

dart
import 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (context, position) {
          return getRow(position);
        },
      ),
    );
  }

  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Text('Row $i'),
      ),
    );
  }
}

不要创建“ListView”，而是创建 ListView.builder，它接受两个关键参数：列表的初始长度和 ItemBuilder 函数。

ItemBuilder 函数类似于 Android 适配器中的 getView 函数；它接受一个位置，并返回您希望在该位置渲染的行。

最后，但最重要的是，请注意 onTap() 函数不再重新创建列表，而是向其中 .add。

处理文本

#

如何在 Text Widget 上设置自定义字体？

#

在 Android SDK（截至 Android O）中，您创建字体资源文件并将其传递到 TextView 的 FontFamily 参数中。

在 Flutter 中，将字体文件放在一个文件夹中，并在 pubspec.yaml 文件中引用它，类似于导入图像的方式。

yaml
fonts:
   - family: MyCustomFont
     fonts:
       - asset: fonts/MyCustomFont.ttf
       - style: italic

然后将字体分配给您的 Text Widget

dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Sample App'),
    ),
    body: const Center(
      child: Text(
        'This is a custom font text',
        style: TextStyle(fontFamily: 'MyCustomFont'),
      ),
    ),
  );
}

如何设置 Text Widget 的样式？

#

除了字体之外，您还可以自定义 Text Widget 上的其他样式元素。Text Widget 的 style 参数接受一个 TextStyle 对象，您可以在其中自定义许多参数，例如

  • 颜色
  • 装饰
  • 装饰颜色
  • 装饰样式
  • 字体系列
  • 字体大小
  • 字体样式
  • 字体粗细
  • 哈希码
  • 高度
  • 继承
  • 字母间距
  • 文本基线
  • 单词间距

表单输入

#

有关使用表单的更多信息，请参阅 检索文本字段的值，来自 Flutter 食谱。

输入的“提示”的等价物是什么？

#

在 Flutter 中，您可以通过将 InputDecoration 对象添加到 Text Widget 的 decoration 构造函数参数中，轻松地为您的输入显示“提示”或占位符文本。

dart
Center(
  child: TextField(
    decoration: InputDecoration(hintText: 'This is a hint'),
  ),
)

如何显示验证错误？

#

就像使用“提示”一样，将 InputDecoration 对象传递给 Text Widget 的 decoration 构造函数。

但是，您不希望一开始就显示错误。相反，当用户输入无效数据时，更新状态并传递一个新的 InputDecoration 对象。

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  String? _errorText;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample App'),
      ),
      body: Center(
        child: TextField(
          onSubmitted: (text) {
            setState(() {
              if (!isEmail(text)) {
                _errorText = 'Error: This is not an email';
              } else {
                _errorText = null;
              }
            });
          },
          decoration: InputDecoration(
            hintText: 'This is a hint',
            errorText: _getErrorText(),
          ),
        ),
      ),
    );
  }

  String? _getErrorText() {
    return _errorText;
  }

  bool isEmail(String em) {
    String emailRegexp =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|'
        r'(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|'
        r'(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';

    RegExp regExp = RegExp(emailRegexp);

    return regExp.hasMatch(em);
  }
}

Flutter 插件

#

如何访问 GPS 传感器？

#

使用 geolocator 社区插件。

如何访问摄像头？

#

image_picker 插件很受欢迎，因为它可以访问相机。

如何使用 Facebook 登录？

#

要使用 Facebook 登录，请使用 flutter_facebook_login 社区插件。

如何使用 Firebase 功能？

#

大多数 Firebase 函数都由 第一方插件 涵盖。这些插件是一方集成，由 Flutter 团队维护

您还可以在 pub.dev 上找到一些第三方 Firebase 插件，这些插件涵盖了第一方插件未直接涵盖的领域。

如何构建我自己的自定义原生集成？

#

如果 Flutter 或其社区插件缺少特定于平台的功能，您可以按照 开发包和插件 页面构建自己的插件。

简而言之，Flutter 的插件架构非常类似于在 Android 中使用事件总线：您发出消息并让接收方处理并将结果发送回给您。在这种情况下，接收方是在 Android 或 iOS 上原生端运行的代码。

如何在 Flutter 应用中使用 NDK？

#

如果您在当前的 Android 应用程序中使用 NDK，并且希望您的 Flutter 应用程序利用您的原生库，那么可以通过构建自定义插件来实现。

您的自定义插件首先与您的 Android 应用程序通信，您在其中通过 JNI 调用您的 原生 函数。一旦响应准备就绪，就向 Flutter 发送消息并呈现结果。

目前不支持直接从 Flutter 调用原生代码。

主题

#

如何为我的应用设置主题？

#

Flutter 自带了精美的 Material Design 实现，它可以处理您通常会执行的许多样式和主题需求。与您在 XML 中声明主题然后使用 AndroidManifest.xml 将其分配给应用程序的 Android 不同，在 Flutter 中，您在顶级 Widget 中声明主题。

要充分利用应用程序中的 Material Components，您可以将顶级 Widget MaterialApp 声明为应用程序的入口点。MaterialApp 是一个便利 Widget，它包装了许多应用程序实现 Material Design 通常需要的 Widget。它以 WidgetsApp 为基础，添加了特定于 Material 的功能。

您也可以使用 WidgetsApp 作为您的应用程序 Widget，它提供了一些相同的功能，但不如 MaterialApp 丰富。

要自定义任何子组件的颜色和样式，请将 ThemeData 对象传递给 MaterialApp Widget。例如，在下面的代码中，种子颜色方案设置为 deepPurple，文本选择颜色为红色。

dart
import 'package:flutter/material.dart';

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        textSelectionTheme:
            const TextSelectionThemeData(selectionColor: Colors.red),
      ),
      home: const SampleAppPage(),
    );
  }
}

数据库和本地存储

#

如何访问 Shared Preferences？

#

在 Android 中，您可以使用 SharedPreferences API 存储少量键值对。

在 Flutter 中，可以使用 Shared_Preferences 插件 访问此功能。此插件封装了 Shared Preferences 和 NSUserDefaults（iOS 等效项）的功能。

dart
import 'dart:async';
import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment Counter'),
          ),
        ),
      ),
    ),
  );
}

Future<void> _incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  await prefs.setInt('counter', counter);
}

如何在 Flutter 中访问 SQLite？

#

在 Android 中，您可以使用 SQLite 存储可以使用 SQL 查询的结构化数据。

在 Flutter 中，对于 macOS、Android 或 iOS，可以使用 SQFlite 插件访问此功能。

调试

#

在 Flutter 中可以使用哪些工具调试我的应用？

#

使用 DevTools 套件调试 Flutter 或 Dart 应用程序。

DevTools 包含对以下功能的支持：性能分析、检查堆、检查 widget 树、记录诊断信息、调试、观察执行代码行、调试内存泄漏和内存碎片。有关更多信息，请查看 DevTools 文档。

通知

#

如何设置推送通知？

#

在 Android 中，您可以使用 Firebase Cloud Messaging 为您的应用程序设置推送通知。

在 Flutter 中，可以使用 Firebase Messaging 插件访问此功能。有关使用 Firebase Cloud Messaging API 的更多信息，请参阅 firebase_messaging 插件文档。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-17。 查看源代码 或 报告问题.