Flutter学习知识点记录

1. StatelessWidgets和StatefulWidget

在 UIKit 中，要更新视图，可以直接修改它们。而在 Flutter 中，组件是不可变的，不能直接更新。你需要操作组件的状态。

这就引出了有状态组件和无状态组件的概念。有状态组件StatelessWidget顾名思义，就是一个没有附加任何状态的组件。

StatelessWidgets当您描述的用户界面部分仅依赖于小部件中的初始配置信息时，这种方法非常有用。

例如，在 UIKit 中，这类似于放置一个UIImageView 带有您徽标的元素image。如果徽标在运行时不会改变，请StatelessWidget在 Flutter 中使用。

如果你想根据发出 HTTP 请求后收到的数据动态地改变 UI，可以使用 StatefulWidget.。HTTP 请求完成后，告诉 Flutter 框架该组件的 .State已更新，以便它可以更新 UI。

无状态组件和有状态组件之间最重要的区别在于，StatefulWidget有状态组件有一个State对象来存储状态数据，并在树重建时将其传递下去，因此不会丢失。

如果您不确定，请记住这条规则：如果一个组件在build方法外部发生变化（例如，由于运行时用户交互），则它是有状态的。如果组件在构建后从未发生变化，则它是无状态的。但是，即使组件是有状态的，如果包含它的父组件本身不响应这些变化（或其他输入），它仍然可以是无状态的。

2.聆听生命周期事件

在 UIKit 中，你可以重写方法来ViewController 捕获视图自身的生命周期方法，或者在 onView 中注册生命周期回调。在 Flutter 中，你没有这两种概念，但你可以通过挂钩到观察者并监听`change` 事件AppDelegate来监听生命周期事件。 WidgetsBindingdidChangeAppLifecycleState()

可观察的生命周期事件包括：

inactive

该应用程序处于非活动状态，未接收任何数据。

用户输入。此事件仅适用于 iOS，因为 Android 上没有对应的事件。

paused

该应用程序目前对用户不可见。

不响应用户输入，但正在后台运行。

resumed

应用程序可见，并能响应用户输入。

suspending

应用程序暂时中止。

iOS平台没有类似的事件。

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

3.显示列表视图

UITableView在 UIKit 中，您可以使用 <div>或 <div> 来显示列表UICollectionView。在 Flutter 中，您可以使用 <div> 实现类似的功能ListView。在 UIKit 中，这些视图具有代理方法，用于确定行数、每个索引路径对应的单元格以及单元格的大小。

由于 Flutter 的不可变组件模式，您可以将组件列表传递给您的组件ListView，Flutter 会负责确保滚动快速流畅

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 const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}

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

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

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

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

4.在应用程序中捆绑图像

iOS 将图片和资源视为不同的项目，而 Flutter 应用只有资源。在 iOS 中放置在 <image>Images.xcasset文件夹中的资源，在 Flutter 中则放置在 <assets> 文件夹中。与 iOS 一样，资源可以是任何类型的文件，而不仅仅是图片。例如，你可能在 <assets>my-assets文件夹中放置了一个 JSON 文件：

my-assets/data.json

在文件中声明资产pubspec.yaml：

assets:
 - my-assets/data.json

然后通过代码使用冒号 (:) 访问它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');
}

对于图像，Flutter 遵循类似 iOS 的基于密度的简单格式。图像资源可以是 <p>、`<p>` 、 1.0x<p> 或任何其他倍数。Flutter 的 <p> 表示单个逻辑像素中物理像素的比例。 2.0x3.0xdevicePixelRatio

资源文件可以位于任意文件夹中——Flutter 没有预定义的文件夹结构。您只需在pubspec.yaml文件中声明资源文件（及其位置），Flutter 就会自动查找它们。

例如，要向my_icon.pngFlutter 项目中添加名为 image 的图像，您可以将其存储在一个名为 image 的文件夹中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文件中声明这些图像：

assets:
 - images/my_icon.png

您现在可以使用以下命令访问您的图片AssetImage：

image: AssetImage('images/a_dot_burr.png'),

链接地址

https://docs.flutter.dev/get-started/flutter-for/uikit-devs