mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
This change enables Flutter to generate multiple Scenes to be rendered into separate FlutterViews from a single widget tree. Each Scene is described by a separate render tree, which are all associated with the single widget tree. This PR implements the framework-side mechanisms to describe the content to be rendered into multiple views. Separate engine-side changes are necessary to provide these views to the framework and to draw the framework-generated Scene into them. ## Summary of changes The details of this change are described in [flutter.dev/go/multiple-views](https://flutter.dev/go/multiple-views). Below is a high-level summary organized by layers. ### Rendering layer changes * The `RendererBinding` no longer owns a single `renderView`. In fact, it doesn't OWN any `RenderView`s at all anymore. Instead, it offers an API (`addRenderView`/`removeRenderView`) to add and remove `RenderView`s that then will be MANAGED by the binding. The `RenderView` itself is now owned by a higher-level abstraction (e.g. the `RawView` Element of the widgets layer, see below), who is also in charge of adding it to the binding. When added, the binding will interact with the `RenderView` to produce a frame (e.g. by calling `compositeFrame` on it) and to perform hit tests for incoming pointer events. Multiple `RenderView`s can be added to the binding (typically one per `FlutterView`) to produce multiple Scenes. * Instead of owning a single `pipelineOwner`, the `RendererBinding` now owns the root of the `PipelineOwner` tree (exposed as `rootPipelineOwner` on the binding). Each `PipelineOwner` in that tree (except for the root) typically manages its own render tree typically rooted in one of the `RenderView`s mentioned in the previous bullet. During frame production, the binding will instruct each `PipelineOwner` of that tree to flush layout, paint, semantics etc. A higher-level abstraction (e.g. the widgets layer, see below) is in charge of adding `PipelineOwner`s to this tree. * Backwards compatibility: The old `renderView` and `pipelineOwner` properties of the `RendererBinding` are retained, but marked as deprecated. Care has been taken to keep their original behavior for the deprecation period, i.e. if you just call `runApp`, the render tree bootstrapped by this call is rooted in the deprecated `RendererBinding.renderView` and managed by the deprecated `RendererBinding.pipelineOwner`. ### Widgets layer changes * The `WidgetsBinding` no longer attaches the widget tree to an existing render tree. Instead, it bootstraps a stand-alone widget tree that is not backed by a render tree. For this, `RenderObjectToWidgetAdapter` has been replaced by `RootWidget`. * Multiple render trees can be bootstrapped and attached to the widget tree with the help of the `View` widget, which internally is backed by a `RawView` widget. Configured with a `FlutterView` to render into, the `RawView` creates a new `PipelineOwner` and a new `RenderView` for the new render tree. It adds the new `RenderView` to the `RendererBinding` and its `PipelineOwner` to the pipeline owner tree. * The `View` widget can only appear in certain well-defined locations in the widget tree since it bootstraps a new render tree and does not insert a `RenderObject` into an ancestor. However, almost all Elements expect that their children insert `RenderObject`s, otherwise they will not function properly. To produce a good error message when the `View` widget is used in an illegal location, the `debugMustInsertRenderObjectIntoSlot` method has been added to Element, where a child can ask whether a given slot must insert a RenderObject into its ancestor or not. In practice, the `View` widget can be used as a child of the `RootWidget`, inside the `view` slot of the `ViewAnchor` (see below) and inside a `ViewCollection` (see below). In those locations, the `View` widget may be wrapped in other non-RenderObjectWidgets (e.g. InheritedWidgets). * The new `ViewAnchor` can be used to create a side-view inside a parent `View`. The `child` of the `ViewAnchor` widget renders into the parent `View` as usual, but the `view` slot can take on another `View` widget, which has access to all inherited widgets above the `ViewAnchor`. Metaphorically speaking, the view is anchored to the location of the `ViewAnchor` in the widget tree. * The new `ViewCollection` widget allows for multiple sibling views as it takes a list of `View`s as children. It can be used in all the places that accept a `View` widget. ## Google3 As of July 5, 2023 this change passed a TAP global presubmit (TGP) in google3: tap/OCL:544707016:BASE:545809771:1688597935864:e43dd651 ## Note to reviewers This change is big (sorry). I suggest focusing the initial review on the changes inside of `packages/flutter` first. The majority of the changes describe above are implemented in (listed in suggested review order): * `rendering/binding.dart` * `widgets/binding.dart` * `widgets/view.dart` * `widgets/framework.dart` All other changes included in the PR are basically the fallout of what's implemented in those files. Also note that a lot of the lines added in this PR are documentation and tests. I am also very happy to walk reviewers through the code in person or via video call, if that is helpful. I appreciate any feedback. ## Feedback to address before submitting ("TODO")
209 lines
7.5 KiB
Dart
209 lines
7.5 KiB
Dart
// Copyright 2014 The Flutter Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import 'dart:ui';
|
|
|
|
import 'package:flutter/rendering.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
|
|
void main() {
|
|
final RendererBinding binding = RenderingFlutterBinding.ensureInitialized();
|
|
|
|
test('Adding/removing renderviews updates renderViews getter', () {
|
|
final FlutterView flutterView = FakeFlutterView();
|
|
final RenderView view = RenderView(view: flutterView);
|
|
|
|
expect(binding.renderViews, isEmpty);
|
|
binding.addRenderView(view);
|
|
expect(binding.renderViews, contains(view));
|
|
expect(view.configuration.devicePixelRatio, flutterView.devicePixelRatio);
|
|
expect(view.configuration.size, flutterView.physicalSize / flutterView.devicePixelRatio);
|
|
|
|
binding.removeRenderView(view);
|
|
expect(binding.renderViews, isEmpty);
|
|
});
|
|
|
|
test('illegal add/remove renderviews', () {
|
|
final FlutterView flutterView = FakeFlutterView();
|
|
final RenderView view1 = RenderView(view: flutterView);
|
|
final RenderView view2 = RenderView(view: flutterView);
|
|
final RenderView view3 = RenderView(view: FakeFlutterView(viewId: 200));
|
|
|
|
expect(binding.renderViews, isEmpty);
|
|
binding.addRenderView(view1);
|
|
expect(binding.renderViews, contains(view1));
|
|
|
|
expect(() => binding.addRenderView(view1), throwsAssertionError);
|
|
expect(() => binding.addRenderView(view2), throwsAssertionError);
|
|
expect(() => binding.removeRenderView(view2), throwsAssertionError);
|
|
expect(() => binding.removeRenderView(view3), throwsAssertionError);
|
|
|
|
expect(binding.renderViews, contains(view1));
|
|
binding.removeRenderView(view1);
|
|
expect(binding.renderViews, isEmpty);
|
|
expect(() => binding.removeRenderView(view1), throwsAssertionError);
|
|
expect(() => binding.removeRenderView(view2), throwsAssertionError);
|
|
});
|
|
|
|
test('changing metrics updates configuration', () {
|
|
final FakeFlutterView flutterView = FakeFlutterView();
|
|
final RenderView view = RenderView(view: flutterView);
|
|
binding.addRenderView(view);
|
|
expect(view.configuration.devicePixelRatio, 2.5);
|
|
expect(view.configuration.size, const Size(160.0, 240.0));
|
|
|
|
flutterView.devicePixelRatio = 3.0;
|
|
flutterView.physicalSize = const Size(300, 300);
|
|
binding.handleMetricsChanged();
|
|
expect(view.configuration.devicePixelRatio, 3.0);
|
|
expect(view.configuration.size, const Size(100.0, 100.0));
|
|
|
|
binding.removeRenderView(view);
|
|
});
|
|
|
|
test('semantics actions are performed on the right view', () {
|
|
final FakeFlutterView flutterView1 = FakeFlutterView(viewId: 1);
|
|
final FakeFlutterView flutterView2 = FakeFlutterView(viewId: 2);
|
|
final RenderView renderView1 = RenderView(view: flutterView1);
|
|
final RenderView renderView2 = RenderView(view: flutterView2);
|
|
final PipelineOwnerSpy owner1 = PipelineOwnerSpy()
|
|
..rootNode = renderView1;
|
|
final PipelineOwnerSpy owner2 = PipelineOwnerSpy()
|
|
..rootNode = renderView2;
|
|
|
|
binding.addRenderView(renderView1);
|
|
binding.addRenderView(renderView2);
|
|
|
|
binding.performSemanticsAction(
|
|
const SemanticsActionEvent(type: SemanticsAction.copy, viewId: 1, nodeId: 11),
|
|
);
|
|
expect(owner1.semanticsOwner.performedActions.single, (11, SemanticsAction.copy, null));
|
|
expect(owner2.semanticsOwner.performedActions, isEmpty);
|
|
owner1.semanticsOwner.performedActions.clear();
|
|
|
|
binding.performSemanticsAction(
|
|
const SemanticsActionEvent(type: SemanticsAction.tap, viewId: 2, nodeId: 22),
|
|
);
|
|
expect(owner1.semanticsOwner.performedActions, isEmpty);
|
|
expect(owner2.semanticsOwner.performedActions.single, (22, SemanticsAction.tap, null));
|
|
owner2.semanticsOwner.performedActions.clear();
|
|
|
|
binding.performSemanticsAction(
|
|
const SemanticsActionEvent(type: SemanticsAction.tap, viewId: 3, nodeId: 22),
|
|
);
|
|
expect(owner1.semanticsOwner.performedActions, isEmpty);
|
|
expect(owner2.semanticsOwner.performedActions, isEmpty);
|
|
|
|
binding.removeRenderView(renderView1);
|
|
binding.removeRenderView(renderView2);
|
|
});
|
|
|
|
test('all registered renderviews are asked to composite frame', () {
|
|
final FakeFlutterView flutterView1 = FakeFlutterView(viewId: 1);
|
|
final FakeFlutterView flutterView2 = FakeFlutterView(viewId: 2);
|
|
final RenderView renderView1 = RenderView(view: flutterView1);
|
|
final RenderView renderView2 = RenderView(view: flutterView2);
|
|
final PipelineOwner owner1 = PipelineOwner()..rootNode = renderView1;
|
|
final PipelineOwner owner2 = PipelineOwner()..rootNode = renderView2;
|
|
binding.rootPipelineOwner.adoptChild(owner1);
|
|
binding.rootPipelineOwner.adoptChild(owner2);
|
|
binding.addRenderView(renderView1);
|
|
binding.addRenderView(renderView2);
|
|
renderView1.prepareInitialFrame();
|
|
renderView2.prepareInitialFrame();
|
|
|
|
expect(flutterView1.renderedScenes, isEmpty);
|
|
expect(flutterView2.renderedScenes, isEmpty);
|
|
|
|
binding.handleBeginFrame(Duration.zero);
|
|
binding.handleDrawFrame();
|
|
|
|
expect(flutterView1.renderedScenes, hasLength(1));
|
|
expect(flutterView2.renderedScenes, hasLength(1));
|
|
|
|
binding.removeRenderView(renderView1);
|
|
|
|
binding.handleBeginFrame(Duration.zero);
|
|
binding.handleDrawFrame();
|
|
|
|
expect(flutterView1.renderedScenes, hasLength(1));
|
|
expect(flutterView2.renderedScenes, hasLength(2));
|
|
|
|
binding.removeRenderView(renderView2);
|
|
|
|
binding.handleBeginFrame(Duration.zero);
|
|
binding.handleDrawFrame();
|
|
|
|
expect(flutterView1.renderedScenes, hasLength(1));
|
|
expect(flutterView2.renderedScenes, hasLength(2));
|
|
});
|
|
|
|
test('hit-testing reaches the right view', () {
|
|
final FakeFlutterView flutterView1 = FakeFlutterView(viewId: 1);
|
|
final FakeFlutterView flutterView2 = FakeFlutterView(viewId: 2);
|
|
final RenderView renderView1 = RenderView(view: flutterView1);
|
|
final RenderView renderView2 = RenderView(view: flutterView2);
|
|
binding.addRenderView(renderView1);
|
|
binding.addRenderView(renderView2);
|
|
|
|
HitTestResult result = HitTestResult();
|
|
binding.hitTestInView(result, Offset.zero, 1);
|
|
expect(result.path, hasLength(2));
|
|
expect(result.path.first.target, renderView1);
|
|
expect(result.path.last.target, binding);
|
|
|
|
result = HitTestResult();
|
|
binding.hitTestInView(result, Offset.zero, 2);
|
|
expect(result.path, hasLength(2));
|
|
expect(result.path.first.target, renderView2);
|
|
expect(result.path.last.target, binding);
|
|
|
|
result = HitTestResult();
|
|
binding.hitTestInView(result, Offset.zero, 3);
|
|
expect(result.path.single.target, binding);
|
|
|
|
binding.removeRenderView(renderView1);
|
|
binding.removeRenderView(renderView2);
|
|
});
|
|
}
|
|
|
|
class FakeFlutterView extends Fake implements FlutterView {
|
|
FakeFlutterView({
|
|
this.viewId = 100,
|
|
this.devicePixelRatio = 2.5,
|
|
this.physicalSize = const Size(400,600),
|
|
this.padding = FakeViewPadding.zero,
|
|
});
|
|
|
|
@override
|
|
final int viewId;
|
|
@override
|
|
double devicePixelRatio;
|
|
@override
|
|
Size physicalSize;
|
|
@override
|
|
ViewPadding padding;
|
|
|
|
List<Scene> renderedScenes = <Scene>[];
|
|
|
|
@override
|
|
void render(Scene scene) {
|
|
renderedScenes.add(scene);
|
|
}
|
|
}
|
|
|
|
class PipelineOwnerSpy extends PipelineOwner {
|
|
@override
|
|
final SemanticsOwnerSpy semanticsOwner = SemanticsOwnerSpy();
|
|
}
|
|
|
|
class SemanticsOwnerSpy extends Fake implements SemanticsOwner {
|
|
final List<(int, SemanticsAction, Object?)> performedActions = <(int, SemanticsAction, Object?)>[];
|
|
|
|
@override
|
|
void performAction(int id, SemanticsAction action, [ Object? args ]) {
|
|
performedActions.add((id, action, args));
|
|
}
|
|
}
|