Flutter-限制小部件以匹配其他小部件的高度

时间:2019-02-17 13:50:59

标签: dart flutter flutter-layout

我想创建带有照片的列表项小部件,并在照片的右侧创建一些信息。由于Web Image可能很大,因此我也希望我的照片窗口小部件将高度(同时保持宽高比)与“内容”窗口小部件的高度相匹配,而可能没有给出明确的高度。 现在,我的小部件看起来像这样:

item

在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,
        ),
      )
    );
  }
}

0 个答案:

没有答案
相关问题