mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Overview
========
This patch refactors images to achieve the following goals:
* it allows references to unresolved assets to be passed
around (previously, almost every layer of the system had to know about
whether an image came from an asset bundle or the network or
elsewhere, and had to manually interact with the image cache).
* it allows decorations to use the same API for declaring images as the
widget tree.
It requires some minor changes to call sites that use images, as
discussed below.
Widgets
-------
Change this:
```dart
child: new AssetImage(
name: 'my_asset.png',
...
)
```
...to this:
```dart
child: new Image(
image: new AssetImage('my_asset.png'),
...
)
```
Decorations
-----------
Change this:
```dart
child: new DecoratedBox(
decoration: new BoxDecoration(
backgroundImage: new BackgroundImage(
image: DefaultAssetBundle.of(context).loadImage('my_asset.png'),
...
),
...
),
child: ...
)
```
...to this:
```dart
child: new DecoratedBox(
decoration: new BoxDecoration(
backgroundImage: new BackgroundImage(
image: new AssetImage('my_asset.png'),
...
),
...
),
child: ...
)
```
DETAILED CHANGE LOG
===================
The following APIs have been replaced in this patch:
* The `AssetImage` and `NetworkImage` widgets have been split in two,
with identically-named `ImageProvider` subclasses providing the
image-loading logic, and a single `Image` widget providing all the
widget tree logic.
* `ImageResource` is now `ImageStream`. Rather than configuring it with
a `Future<ImageInfo>`, you complete it with an `ImageStreamCompleter`.
* `ImageCache.load` and `ImageCache.loadProvider` are replaced by
`ImageCache.putIfAbsent`.
The following APIs have changed in this patch:
* `ImageCache` works in terms of arbitrary keys and caches
`ImageStreamCompleter` objects using those keys. With the new model,
you should never need to interact with the cache directly.
* `Decoration` can now be `const`. The state has moved to the
`BoxPainter` class. Instead of a list of listeners, there's now just a
single callback and a `dispose()` method on the painter. The callback
is passed in to the `createBoxPainter()` method. When invoked, you
should repaint the painter.
The following new APIs are introduced:
* `AssetBundle.loadStructuredData`.
* `SynchronousFuture`, a variant of `Future` that calls the `then`
callback synchronously. This enables the asynchronous and
synchronous (in-the-cache) code paths to look identical yet for the
latter to avoid returning to the event loop mid-paint.
* `ExactAssetImage`, a variant of `AssetImage` that doesn't do anything clever.
* `ImageConfiguration`, a class that describes parameters that configure
the `AssetImage` resolver.
The following APIs are entirely removed by this patch:
* `AssetBundle.loadImage` is gone. Use an `AssetImage` instead.
* `AssetVendor` is gone. `AssetImage` handles everything `AssetVendor`
used to handle.
* `RawImageResource` and `AsyncImage` are gone.
The following code-level changes are performed:
* `Image`, which replaces `AsyncImage`, `NetworkImage`, `AssetImage`,
and `RawResourceImage`, lives in `image.dart`.
* `DecoratedBox` and `Container` live in their own file now,
`container.dart` (they reference `image.dart`).
DIRECTIONS FOR FUTURE RESEARCH
==============================
* The `ImageConfiguration` fields are mostly aspirational. Right now
only `devicePixelRatio` and `bundle` are implemented. `locale` isn't
even plumbed through, it will require work on the localisation logic.
* We should go through and make `BoxDecoration`, `AssetImage`, and
`NetworkImage` objects `const` where possible.
* This patch makes supporting animated GIFs much easier.
* This patch makes it possible to create an abstract concept of an
"Icon" that could be either an image or a font-based glyph (using
`IconData` or similar). (see
https://github.com/flutter/flutter/issues/4494)
RELATED ISSUES
==============
Fixes https://github.com/flutter/flutter/issues/4500
Fixes https://github.com/flutter/flutter/issues/4495
Obsoletes https://github.com/flutter/flutter/issues/4496
287 lines
7.7 KiB
Dart
287 lines
7.7 KiB
Dart
// Copyright 2015 The Chromium 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' as ui show Image;
|
|
|
|
import 'box.dart';
|
|
import 'object.dart';
|
|
|
|
export 'package:flutter/painting.dart' show
|
|
ImageFit,
|
|
ImageRepeat;
|
|
|
|
/// An image in the render tree.
|
|
///
|
|
/// The render image attempts to find a size for itself that fits in the given
|
|
/// constraints and preserves the image's intrinisc aspect ratio.
|
|
///
|
|
/// The image is painted using [paintImage], which describes the meanings of the
|
|
/// various fields on this class in more detail.
|
|
class RenderImage extends RenderBox {
|
|
/// Creates a render box that displays an image.
|
|
RenderImage({
|
|
ui.Image image,
|
|
double width,
|
|
double height,
|
|
double scale: 1.0,
|
|
Color color,
|
|
ImageFit fit,
|
|
FractionalOffset alignment,
|
|
ImageRepeat repeat: ImageRepeat.noRepeat,
|
|
Rect centerSlice
|
|
}) : _image = image,
|
|
_width = width,
|
|
_height = height,
|
|
_scale = scale,
|
|
_color = color,
|
|
_fit = fit,
|
|
_alignment = alignment,
|
|
_repeat = repeat,
|
|
_centerSlice = centerSlice {
|
|
_updateColorFilter();
|
|
}
|
|
|
|
/// The image to display.
|
|
ui.Image get image => _image;
|
|
ui.Image _image;
|
|
set image (ui.Image value) {
|
|
if (value == _image)
|
|
return;
|
|
_image = value;
|
|
markNeedsPaint();
|
|
if (_width == null || _height == null)
|
|
markNeedsLayout();
|
|
}
|
|
|
|
/// If non-null, requires the image to have this width.
|
|
///
|
|
/// If null, the image will pick a size that best preserves its intrinsic
|
|
/// aspect ratio.
|
|
double get width => _width;
|
|
double _width;
|
|
set width (double value) {
|
|
if (value == _width)
|
|
return;
|
|
_width = value;
|
|
markNeedsLayout();
|
|
}
|
|
|
|
/// If non-null, require the image to have this height.
|
|
///
|
|
/// If null, the image will pick a size that best preserves its intrinsic
|
|
/// aspect ratio.
|
|
double get height => _height;
|
|
double _height;
|
|
set height (double value) {
|
|
if (value == _height)
|
|
return;
|
|
_height = value;
|
|
markNeedsLayout();
|
|
}
|
|
|
|
/// Specifies the image's scale.
|
|
///
|
|
/// Used when determining the best display size for the image.
|
|
double get scale => _scale;
|
|
double _scale;
|
|
set scale (double value) {
|
|
assert(value != null);
|
|
if (value == _scale)
|
|
return;
|
|
_scale = value;
|
|
markNeedsLayout();
|
|
}
|
|
|
|
ColorFilter _colorFilter;
|
|
|
|
// Should we make the transfer mode configurable?
|
|
void _updateColorFilter() {
|
|
if (_color == null)
|
|
_colorFilter = null;
|
|
else
|
|
_colorFilter = new ColorFilter.mode(_color, TransferMode.srcIn);
|
|
}
|
|
|
|
/// If non-null, apply this color filter to the image before painting.
|
|
Color get color => _color;
|
|
Color _color;
|
|
set color (Color value) {
|
|
if (value == _color)
|
|
return;
|
|
_color = value;
|
|
_updateColorFilter();
|
|
markNeedsPaint();
|
|
}
|
|
|
|
/// How to inscribe the image into the place allocated during layout.
|
|
///
|
|
/// The default varies based on the other fields. See the discussion at
|
|
/// [paintImage].
|
|
ImageFit get fit => _fit;
|
|
ImageFit _fit;
|
|
set fit (ImageFit value) {
|
|
if (value == _fit)
|
|
return;
|
|
_fit = value;
|
|
markNeedsPaint();
|
|
}
|
|
|
|
/// How to align the image within its bounds.
|
|
FractionalOffset get alignment => _alignment;
|
|
FractionalOffset _alignment;
|
|
set alignment (FractionalOffset value) {
|
|
if (value == _alignment)
|
|
return;
|
|
_alignment = value;
|
|
markNeedsPaint();
|
|
}
|
|
|
|
/// How to repeat this image if it doesn't fill its layout bounds.
|
|
ImageRepeat get repeat => _repeat;
|
|
ImageRepeat _repeat;
|
|
set repeat (ImageRepeat value) {
|
|
if (value == _repeat)
|
|
return;
|
|
_repeat = value;
|
|
markNeedsPaint();
|
|
}
|
|
|
|
/// The center slice for a nine-patch image.
|
|
///
|
|
/// The region of the image inside the center slice will be stretched both
|
|
/// horizontally and vertically to fit the image into its destination. The
|
|
/// region of the image above and below the center slice will be stretched
|
|
/// only horizontally and the region of the image to the left and right of
|
|
/// the center slice will be stretched only vertically.
|
|
Rect get centerSlice => _centerSlice;
|
|
Rect _centerSlice;
|
|
set centerSlice (Rect value) {
|
|
if (value == _centerSlice)
|
|
return;
|
|
_centerSlice = value;
|
|
markNeedsPaint();
|
|
}
|
|
|
|
/// Find a size for the render image within the given constraints.
|
|
///
|
|
/// - The dimensions of the RenderImage must fit within the constraints.
|
|
/// - The aspect ratio of the RenderImage matches the instrinsic aspect
|
|
/// ratio of the image.
|
|
/// - The RenderImage's dimension are maximal subject to being smaller than
|
|
/// the intrinsic size of the image.
|
|
Size _sizeForConstraints(BoxConstraints constraints) {
|
|
// Folds the given |width| and |height| into |constraints| so they can all
|
|
// be treated uniformly.
|
|
constraints = new BoxConstraints.tightFor(
|
|
width: _width,
|
|
height: _height
|
|
).enforce(constraints);
|
|
|
|
if (constraints.isTight || _image == null)
|
|
return constraints.smallest;
|
|
|
|
double width = _image.width.toDouble() / _scale;
|
|
double height = _image.height.toDouble() / _scale;
|
|
assert(width > 0.0);
|
|
assert(height > 0.0);
|
|
double aspectRatio = width / height;
|
|
|
|
if (width > constraints.maxWidth) {
|
|
width = constraints.maxWidth;
|
|
height = width / aspectRatio;
|
|
}
|
|
|
|
if (height > constraints.maxHeight) {
|
|
height = constraints.maxHeight;
|
|
width = height * aspectRatio;
|
|
}
|
|
|
|
if (width < constraints.minWidth) {
|
|
width = constraints.minWidth;
|
|
height = width / aspectRatio;
|
|
}
|
|
|
|
if (height < constraints.minHeight) {
|
|
height = constraints.minHeight;
|
|
width = height * aspectRatio;
|
|
}
|
|
|
|
return constraints.constrain(new Size(width, height));
|
|
}
|
|
|
|
@override
|
|
double computeMinIntrinsicWidth(double height) {
|
|
assert(height >= 0.0);
|
|
if (_width == null && _height == null)
|
|
return 0.0;
|
|
return _sizeForConstraints(new BoxConstraints.tightForFinite(height: height)).width;
|
|
}
|
|
|
|
@override
|
|
double computeMaxIntrinsicWidth(double height) {
|
|
assert(height >= 0.0);
|
|
return _sizeForConstraints(new BoxConstraints.tightForFinite(height: height)).width;
|
|
}
|
|
|
|
@override
|
|
double computeMinIntrinsicHeight(double width) {
|
|
assert(width >= 0.0);
|
|
if (_width == null && _height == null)
|
|
return 0.0;
|
|
return _sizeForConstraints(new BoxConstraints.tightForFinite(width: width)).height;
|
|
}
|
|
|
|
@override
|
|
double computeMaxIntrinsicHeight(double width) {
|
|
assert(width >= 0.0);
|
|
return _sizeForConstraints(new BoxConstraints.tightForFinite(width: width)).height;
|
|
}
|
|
|
|
@override
|
|
bool hitTestSelf(Point position) => true;
|
|
|
|
@override
|
|
void performLayout() {
|
|
size = _sizeForConstraints(constraints);
|
|
}
|
|
|
|
@override
|
|
void paint(PaintingContext context, Offset offset) {
|
|
if (_image == null)
|
|
return;
|
|
paintImage(
|
|
canvas: context.canvas,
|
|
rect: offset & size,
|
|
image: _image,
|
|
colorFilter: _colorFilter,
|
|
fit: _fit,
|
|
alignment: _alignment,
|
|
centerSlice: _centerSlice,
|
|
repeat: _repeat
|
|
);
|
|
}
|
|
|
|
@override
|
|
void debugFillDescription(List<String> description) {
|
|
super.debugFillDescription(description);
|
|
description.add('image: $image');
|
|
if (width != null)
|
|
description.add('width: $width');
|
|
if (height != null)
|
|
description.add('height: $height');
|
|
if (scale != 1.0)
|
|
description.add('scale: $scale');
|
|
if (color != null)
|
|
description.add('color: $color');
|
|
if (fit != null)
|
|
description.add('fit: $fit');
|
|
if (alignment != null)
|
|
description.add('alignment: $alignment');
|
|
if (repeat != ImageRepeat.noRepeat)
|
|
description.add('repeat: $repeat');
|
|
if (centerSlice != null)
|
|
description.add('centerSlice: $centerSlice');
|
|
}
|
|
}
|