当前位置：首页 > article >正文

Flutter 3.16 中带来的更新

article 2024/11/15 11:30:14

Flutter 3.16 中带来的更新

1. 概述

2. 框架更新

2.1 Material 3 成为新默认

从此版本开始，Material 3 成为新的默认主题。你可以通过在 MaterialApp 主题中指定 useMaterial3: false 来选择不使用 Material 3，但 Material 2 最终将被弃用并删除。

你仍然可以通过在主题中指定来选择退出 M3 版本的 Material 库MaterialApp，但 Material 2 最终将被弃用并删除。

此外，某些组件不仅可以更新，还需要全新的实现。因此，当您看到它作为 Material 3 运行时，您的 UI 可能看起来有点奇怪。要解决此问题，请手动迁移到新的组件，例如 NavigationBar。

有关更多详细信息，请查看：https://github.com/flutter/flutter/issues/91605

演示应用程序允许你尝试所有组件。该演示支持切换，useMaterial3以便您可以比较更改。

2.2 支持 Material 3 动画

Material 3 动画的改进包括添加了 Easing 和 Durations 类。Material 2 的曲线已被重命名为包含 “legacy” 的词，最终将被弃用和删除。

2.3 TextScaler

为了支持 Android 14 的非线性字体缩放功能，新的 TextScaler 类取代了 Text.textScaleFactor 属性。

2.4 SelectionArea 更新

Flutter 的 SelectionArea 已更新，支持使用鼠标进行单击或双击，以及在触摸设备上长按的原生手势。

单击：在单击的位置设置折叠选区。
双击：选择单击位置的单词。
双击 + 拖动：扩展单词块中的选择范围。

长按+拖动：扩展单词块中的选择范围。

2.5 MatrixTransition 动画

新的 MatrixTransition 组件允许在创建动画过渡时进行变换。根据当前动画值，你可以提供应用于子窗口组件的矩阵变换，以创建类似于以下 GIF 中的效果。

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const MatrixTransitionExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MatrixTransitionExample(),
    );
  }
}

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

  @override
  State<MatrixTransitionExample> createState() =>
      _MatrixTransitionExampleState();
}

class _MatrixTransitionExampleState extends State<MatrixTransitionExample>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.linear,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MatrixTransition(
          animation: _animation,
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: FlutterLogo(size: 150.0),
          ),
          onTransform: (double value) {
            return Matrix4.identity()
              ..setEntry(3, 2, 0.004)
              ..rotateY(pi * 2.0 * value);
          },
        ),
      ),
    );
  }
}

见 https://dartpad.dev/?channel=beta&id=c82be58209035722f2cc7d78da855329

2.6 滚动更新

在 Flutter 3.13 中首次发布了二维滚动基础设施后，此版本带来了更多的功能和改进。在 Flutter 3.16 中，2D 基础设施现在支持 KeepAlive 组件，以及默认的焦点遍历和隐式滚动。构建在基础设施之上的 2D 滚动组件将自动采用这种支持。关于在 2D 基础设施上构建的全面指南，请查看 Flutter Build Show 的最新一集。

在 3.13 版本发布后不久，发布了 two_dimensional_scrollables 包。这个包由 Flutter 团队维护，并包含了基于框架基础设施构建的第一个 2D 滚动组件 —— TableView。自初始发布以来，已经添加了更多的装饰和样式支持，并进行了额外的错误修复。

Flutter 二维滚动

2.7 在编辑菜单中添加附加选项

在本机 iOS 上，用户现在可以选择文本并启动提供多种标准服务的共享菜单。在此版本中，我们添加了查找、搜索和共享选项。

2.8 PaintPattern 添加到 flutter_test

在 flutter_test 包中，新增的 PaintPattern 类允许你验证像 CustomPainters 和 Decorations 这样的组件对画布进行的绘制调用（在单元测试中使用）。

以前，需要一个金色文件来验证是否绘制了正确的颜色和矩形，但现在你可以使用 PaintPattern。以下示例验证 MyWidget 是否在画布上绘制了一个圆：

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// Multiple paint calls can even be chained together.
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);