Flutter 上连续图像的最大高度

Question

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

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

Example here

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 enim\n"
            " mihi quidem in multis,\n"
            " et maxime\n"
            " in me ipso, sed paulo\n"
            " ante in omnibus, cum M. \n"
            "Marcellum senatui reique\n"
            " publicae concessisti, \n"
            "commemoratis praesertim\n"
            " offensionibus, te \n"
            "auctoritatem huius ordinis\n"
            " dignitatemque rei \n"
            "publicae tuis vel doloribus\n"
            " vel suspicionibus \n"
            "anteferre. Ille quidem\n"
            " 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 enim\n"
                        " mihi quidem in multis,\n"
                        " et maxime\n"
                        " in me ipso, sed paulo\n"
                        " ante in omnibus, cum M. \n"
                        "Marcellum senatui reique\n"
                        " publicae concessisti, \n"
                        "commemoratis praesertim\n"
                        " offensionibus, te \n"
                        "auctoritatem huius ordinis\n"
                        " dignitatemque rei \n"
                        "publicae tuis vel doloribus\n"
                        " vel suspicionibus \n"
                        "anteferre. Ille quidem\n"
                        " 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,)
    ],
  )
);