Flutter：在保持纵横比的同时缩小图像以适应行答案

【问题标题】：Flutter: shrink images to fit into row while keeping aspect ratioFlutter：在保持纵横比的同时缩小图像以适应行
【发布时间】：2018-11-22 20:31:44
【问题描述】：

我想并排显示两张图片，并在上方和下方添加一些文字。布局必须在纵向和横向模式下工作。图片是从网络加载的，我不知道它们的尺寸，尽管我知道纵横比（3:4）和方向（纵向）。

当前的解决方案在纵向模式下运行良好，但在横向模式下完全失败。这里有两个图像的中间部分被缩小以适应宽度，最终图像对于可用空间来说太高了。

[...]
@override
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text('Text 1', style: Theme.of(context).textTheme.headline),
        IntrinsicHeight(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: TrimmedImage(left.src, () => _advanceRight()),
              ),
              Expanded(
                child: TrimmedImage(right.src, () => _advanceLeft()),
              ),
            ],
          ),
        ),
        Text('Text 2, possibly lines and lines and lines and lines and lines anlines and lines of stuff.',
          style: Theme.of(context).textTheme.title,
          textAlign: TextAlign.center,
        ),
      ],
    ),
  );
} 
[...]

class TrimmedImage extends StatelessWidget {
  final String src;
  final onTap;

  TrimmedImage(src, this.onTap);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
        aspectRatio: 3.0 / 4.0,
        child: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: Container(
            decoration: new BoxDecoration(
              border: new Border.all(
                color: Colors.grey,
                width: 2.0,
              ),
              borderRadius:
              new BorderRadius.circular(10.0),
            ),
            child: GestureDetector(
              onTap: onTap,
              child: ClipRRect(
                borderRadius: new BorderRadius.circular(8.0),
                child: CachedNetworkImage(
                  placeholder: CircularProgressIndicator(),
                  errorWidget: Icon(Icons.broken_image),
                  imageUrl: src ?? '',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ),
    );
  }

在横向模式下，我希望缩小图像（同时保持纵横比）以适应可用空间的高度，而不是宽度。

纵向模式目前在大屏幕上看起来不错，但我怀疑如果屏幕太小而无法容纳所有 3 个组件的高度，它也会失败。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使用 CustomMultiChildLayout，特别是 MultiChildLayoutDelegate 创建您自己的布局。 Flutter Shrine 演示就是一个很好的例子：https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/shrine/shrine_home.dart。请参阅 _Heading 和 _HeadingLayout 类。

【讨论】：