我想创建带有照片的列表项小部件,并在照片的右侧创建一些信息。由于Web Image可能很大,因此我也希望我的照片窗口小部件将高度(同时保持宽高比)与“内容”窗口小部件的高度相匹配,而可能没有给出明确的高度。 现在,我的小部件看起来像这样:
在Android中,我会通过以下方式限制图片大小: 约束Top_toTopOf(contentId) constraintBottom_toBottomOf(contentId)
是否可以在Flutter中做类似的事情? 现在我的代码看起来像这样(我想避免在ConstrainedBox的'maxHeight'参数中给出明确的高度):
class SpeakerItemWidget extends StatelessWidget{
final Speaker _speaker;
SpeakerItemWidget(this._speaker);
Widget _speakerItemContent() =>
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'${_speaker.name} ${_speaker.surname}',
style: TitleTextStyle(),
),
SizedBox(height: Margin.small),
Text(
_speaker.title,
style: DescriptionTextStyle(),
),
Text(
_speaker.company,
style: DescriptionTextStyle(),
)
],
);
@override
Widget build(BuildContext context) =>
InkWell(
splashColor: Theme.of(context).accentColor,
onTap: () => debugPrint('open event details'),
child: Padding(
padding: EdgeInsets.all(Margin.small),
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 60,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FittedBox(
fit: BoxFit.contain,
child: SpeakerPhotoWidget(_speaker),
),
_speakerItemContent(),
],
),
),
),
);
}
class SpeakerPhotoWidget extends StatelessWidget{
final Speaker _speaker;
SpeakerPhotoWidget(this._speaker);
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(
//initial size of widget is 0,0 - causes crash when inside FittedBox
minHeight: 1,
minWidth: 1,
),
child: Padding(
padding: EdgeInsets.only(right: Margin.small),
child: FadeInImage.assetNetwork(
placeholder: 'assets/images/speaker_placeholder.png',
image: 'some uri',
fit: BoxFit.contain,
),
)
);
}
}