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

Question

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

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

Answer 1

我建议以下 chenges

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

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

Answer 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 值调整元素大小。