如何在Flutter中将图像适配到列宽？

Question

我想将子图像调整到父列的宽度。

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

- José Lozano Hernández

Answer 1

我建议进行如下更改。

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

- Pradeep

---

完美，这个答案甚至更好！ - José Lozano Hernández

Answer 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"),
  ],
),

- José Lozano Hernández

Answer 3

也许将您的图像包装在Expanded Widget中，并使用BoxFit.fitWidth会很有用。或者在无法使用MediaQuery的情况下。

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

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

- Ali Türkay Avci

---

你的解决方案还不错，但是Expand通过主轴扩展，因此它会垂直增长（列），这很有效，因为图像保持其纵横比并增加其宽度。;-) - José Lozano Hernández