Flutter上一行中图像的最大高度

Question

在下面的例子中，我需要右侧的图像与文本的高度相同。

return Container(
margin: EdgeInsets.only(top: 50),
decoration: new BoxDecoration(color: Colors.cyan),
child: Row(
children: [
Text("Intellectum est enimn"
" mihi quidem in multis,n"
" et maximen"
" in me ipso, sed paulon"
" ante in omnibus, cum M. n"
"Marcellum senatui reiquen"
" publicae concessisti, n"
"commemoratis praesertimn"
" offensionibus, te n"
"auctoritatem huius ordinisn"
" dignitatemque rei n"
"publicae tuis vel doloribusn"
" vel suspicionibus n"
"anteferre. Ille quidemn"
" fructum omnis ante actae",
),
Image.network("https://feelloo.com/wp-content/uploads/2019/11/chat-collier-WEB-1.jpg", height: 200,)
],
)
);

示例

Answer 1

我最终在这里找到了这个问题的有趣答案https://www.thiscodeworks.com/how-to-make-height-of-all-widgets-inside-row-equal-the-tallest-widget-dart-flutter-layouts/5e28982bf73be40014ce9a34

只需使用以下行

return Container(
margin: EdgeInsets.only(top: 50),
decoration: new BoxDecoration(color: Colors.cyan),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
"Intellectum est enimn"
" mihi quidem in multis,n"
" et maximen"
" in me ipso, sed paulon"
" ante in omnibus, cum M. n"
"Marcellum senatui reiquen"
" publicae concessisti, n"
"commemoratis praesertimn"
" offensionibus, te n"
"auctoritatem huius ordinisn"
" dignitatemque rei n"
"publicae tuis vel doloribusn"
" vel suspicionibus n"
"anteferre. Ille quidemn"
" fructum omnis ante actae",
),
Image.network(
"https://feelloo.com/wp-content/uploads/2019/11/chat-collier-WEB-1.jpg",
height: 20,
)
],
)
)
);

感谢大家的帮助：(

Answer 2

您可以使用BoxConstraints来完成此操作。

Container(
margin: EdgeInsets.only(top: 50),
decoration: new BoxDecoration(color: Colors.cyan),
child: Row(
children: [
Container(
constraints: BoxConstraints(maxHeight: 200), //this line
child: Text(
"Intellectum est enimn"
" mihi quidem in multis,n"
" et maximen"
" in me ipso, sed paulon"
" ante in omnibus, cum M. n"
"Marcellum senatui reiquen"
" publicae concessisti, n"
"commemoratis praesertimn"
" offensionibus, te n"
"auctoritatem huius ordinisn"
" dignitatemque rei n"
"publicae tuis vel doloribusn"
" vel suspicionibus n"
"anteferre. Ille quidemn"
" fructum omnis ante actae",
),
),
Image.network(
"https://feelloo.com/wp-content/uploads/2019/11/chat-collier-WEB-1.jpg",
height: 200,
)
],
)),

Answer 3

正如@EmirÇetin所说，您可以使用AutoSizeText包，但您需要用Flexible小部件：来补充它

return Container(
margin: EdgeInsets.only(top: 50),
decoration: new BoxDecoration(color: Colors.cyan),
child: Row(
children: [
Flexible(
flex: 1,
child: AutoSizeText(
"Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae",
maxLines: 11,
),
),
Image.network(
"https://feelloo.com/wp-content/uploads/2019/11/chat-collier-WEB-1.jpg",
height: 200,
),
],
),
);

请记住，现在您可以将文本放在一行，也就是说，不需要n。

Answer 4

尝试这样做：

static double calculateTextHeight(
String value, FontSize fontSize, FontWeight fontWeight, double maxWidth, int maxLines) {
value = filterText(value);
TextPainter painter = TextPainter(
locale: Localizations.localeOf(GlobalStatic.context, nullOk: true),
maxLines: maxLines,
textDirection: TextDirection.ltr,
text: TextSpan(
text: value,
style: TextStyle(
fontWeight: fontWeight,
fontSize: fontSize,
)));
painter.layout(maxWidth: maxWidth);
return painter.height;
}

double _textHeight = calculateTextHeight(_msg, /* your app fontSize, fontWeight, max width of msg, maxline of msg */);
return Container(
margin: EdgeInsets.only(top: 50),
decoration: new BoxDecoration(color: Colors.cyan),
child: Row(
children: [
Text(_msg),
Image.network("https://feelloo.com/wp-content/uploads/2019/11/chat-collier-WEB-1.jpg", height: _textHeight,)
],
)
);