如何在 Flutter 中使图像适合列宽？

Question

我想让子图像适合父列的宽度。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Image.network("Some image url"),
    Text("Fitted image"),
  ],
),

Answer 1

好吧，我使用 MediaQuery 解决了我的问题。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
        child: Image.network("Some image url", fit: BoxFit.fill,), 
        width: MediaQuery.of(context).size.width,
    ),
    Text("Fitted image"),
  ],
),

Answer 2

也许用扩展小部件包裹您的图像并给它 BoxFit.fitWidth 也很有用。或者在你不能使用 MediaQuery 的时候。

     Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 5,
            child: Image.network(
              "Some Image Url",
              fit: BoxFit.fitWidth,
            ),
          ),
          Text("Fitted image"),
        ],
      ),

如果您需要控制列中元素的大小，请尝试使用扩展小部件将所有小部件包装在列中，并使用 flex 值调整元素大小。

Answer 3

我建议以下城市

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Image.network("Your image url",
          width: double.infinity, 
          fit: BoxFit.fitWidth,
        ),
        Text("Fitted image"),
      ],
    )

如何在 Flutter 中使图像适合列宽？

How to fit an Image to column width in Flutter?

image

flutter

flutter-image