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

Posted 2023-02-23

【中文标题】如何使图像适合 Flutter 中的列宽？

【英文标题】：How to fit an Image to column width in Flutter?

【发布时间】：2020-04-09 06:52:06

【问题描述】：

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

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

【参考方案1】：

我建议以下 chenges

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

【讨论】：

完美，这个答案更好！

【参考方案2】：

好吧，我使用 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"),
  ],
),

【参考方案3】：

也许用 Expanded Widget 包装你的 Image 并给它 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 值调整元素大小。

【讨论】：

您的解决方案还不错，但是 Expand 通过主轴扩展，因此它会垂直增长（列），它之所以有效，是因为图像保持了他的纵横比并增加了他的宽度;-)跨度>