Question

我想并排显示两个图像，上下分别显示一些文字。布局必须以纵向和横向模式工作。图像是从网络上加载的，尽管我知道纵横比（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,
                ),
              ),
            ),
          ),
        ),
    );
  }

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

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

Answer 1

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

颤动：缩小图像以适合行，同时保持宽高比

1 个答案: