Flutter 3.16 中带来的更新

news/2024/7/20 22:31:03 标签: Flutter, Dart, Android, iOS, 跨端
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});

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

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

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

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

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

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

  
  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。自初始发布以来,已经添加了更多的装饰和样式支持,并进行了额外的错误修复。

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,
    ),
);

这个 API 之前存在于框架测试文件的深处,我们注意到一些开发者发现它非常有用,他们甚至将其复制到了自己的项目中。如果你也这样做了,那么在升级到 Flutter 3.16 后,你可以从你的项目中删除这个副本。

3. 引擎更新(Impeller)

在此版本中,Impeller 引擎 在 Android 上已准备好在稳定通道上预览反馈。自今年初以来,Flutter 团队一直在 Impeller 的 Vulkan 后端上努力工作,这个预览包括收集关于 Impeller 在 Vulkan-capable 设备上的特性的反馈。

除了专注于 Vulkan 后端外,自今年初以来,团队还对 Impeller 在 AndroidiOS 上的文本性能进行了许多改进。

4. 平台

4.1 Android

  • 鼠标滚轮支持:在优化 Wonderous 以满足 Android 的大屏幕指南时,Flutter团队 发现的一个问题是鼠标滚轮在平板电脑或可折叠设备上的工作效果不佳。

在这里插入图片描述
在这里插入图片描述

  • 预测性后退导航:Android 14 发布包含了预测性后退手势功能,允许你使用设备的后退手势在当前屏幕后面“窥视”主屏幕。此更新将预测性后退手势带到了 Flutter

在这里插入图片描述

4.2 iOS

现在可以使用 Flutter 来定位一些 iOS 应用扩展。这意味着你可以使用 Flutter 组件来绘制某些类型的 iOS 应用扩展的 UI。

在这里插入图片描述

4.3 Web

Flutter__260">Chrome DevTools 上的 Flutter 时间线事件

Flutter 时间轴事件现在显示在 Chrome DevTools 的性能面板中。

在这里插入图片描述

4.4 游戏


http://www.niftyadmin.cn/n/5192185.html

相关文章

Java将List转换为Tree数据

思路 我们首先要知道数据中&#xff0c;哪两列能够体现父子级我们需要找到最顶层父 id 是什么&#xff0c;因为只有知道最顶层的父 id&#xff0c;我们才能进行递归我们要在不改变数据的原有结构下&#xff0c;而转换为 Tree 结构&#xff0c;那么就需要创建新的结构 代码 /…

十个一手app拉新地推拉新推广接单平台,放单/接任务渠道

做过地推拉新的朋友一定都非常清楚&#xff0c;app拉新推广一手接单平台&#xff0c;和非一手接任务平台之间的收益差&#xff0c;可以用天壤之别来形容。那么一手app拉新渠道应该怎么找&#xff1f;下面这十个常见的地推拉新app接单平台&#xff0c;一定要收藏。 1. 聚量推客…

深入了解Java 8 新特性:lambda表达式进阶

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概7000多字&#xff0c;预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&#…

智能告警:如何通过监控易实现精准故障预警与快速定位

在动态变化的IT环境中&#xff0c;故障预防与快速响应成为了运维管理的关键。监控易作为一体化运维监控平台&#xff0c;凭借其智能告警和精准定位的特性&#xff0c;为运维团队提供了强有力的支持&#xff0c;确保了IT系统的稳定运行。本文将深入探讨监控易在故障预警和快速定…

Vue第1天:特性概览

文章目录 Vue.js 简介 Vue的特性 如何使用Vue 安装Vue 通过CDN引入 使用npm 创建Vue实例 结语 Vue.js 简介 Vue.js&#xff08;通常简称为Vue&#xff09;是一款流行的JavaScript框架&#xff0c;专注于构建用户界面。它的设计灵感来自于现代的JavaScript框架&#xf…

智慧城市指挥中心,大屏幕究竟有什么用?

目前很多地区有在兴建智慧城市的项目&#xff0c;其城市指挥中心内一般都建有一张巨大的屏幕&#xff0c;这张屏幕究竟有什么用&#xff1f;是否可以用普通的电脑显示器进行代替呢&#xff1f; 智慧城市指挥中心内的巨大屏幕是智慧城市项目中的重要组成部分&#xff0c;其作用不…

量化交易:开发传统趋势策略之---双均线策略

本文以双均线策略为例&#xff0c;描述如何在BigQuant策略平台上&#xff0c;开发一个传统的趋势跟踪策略&#xff0c;以更好地理解BigQuant回测机制。 双均线策略的策略思想是&#xff1a;当短期均线上穿长期均线时&#xff0c;形成金叉&#xff0c;此时买入股票。当短期均线…

生活总是自己的,请尽情打扮,尽情可爱,,

同色系拼接羽绒服了解一下 穿上时尚感一下子就突显出来了 90白鸭绒填充&#xff0c;不仅时尚还保暖 设计感满满的羽绒服不考虑一下吗?