Я хотел бы отобразить два изображения рядом с небольшим количеством текста сверху и снизу.Макет должен работать в портретном и ландшафтном режиме.Изображения загружаются из сети, и я не знаю их размеров, хотя я знаю соотношение сторон (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,
),
),
),
),
),
);
}
В альбомном режиме я бы хотел, чтобы изображения были уменьшены (при сохранении соотношения сторон), чтобы соответствовать высоте доступного пространства, а не ширине.
Портретный режим в настоящее время выглядит хорошо на большом экране, но я подозреваю, что он также потерпит неудачу, если экран будет слишком маленьким, чтобы соответствовать высоте всех трех компонентов.
