如何在Flutter中处理ListView中图像的宽度？

Question

我的图片在ListView中。我想要为我的图片设置自定义宽度，但是width属性对我无效。我能够设置自定义的height，但是宽度属性不起作用。 这是图片的样子：

这是示例代码：

Scaffold(
  appBar: AppBar(
    title: Text('Sample App'),
  ),
  body: ListView(
    children: <Widget>[
      Image.network(
        'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
      width: 100,
      height: 200,
      fit: BoxFit.fill,
      ),
    ],
  ),
);

- Jay Tillu

Answer 1

通过将你的图像小部件 (Image) 放置在 Center 小部件中，你可以控制图像的宽度和高度。

    Scaffold(
      appBar: AppBar(
        title: Text('Sample App'),
      ),
      body: ListView(
        children: <Widget>[
          Center(                // --> new change
            child: Image.network(
              'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
              width: 100,
              height: 200,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );

编辑： 如果您希望将图像对齐到中心以外的位置，可以将其包裹在“Align”小部件中。

    Scaffold(
      appBar: AppBar(
        title: Text('Sample App'),
      ),
      body: ListView(
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: Image.network(
              'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
              width: 100,
              height: 100,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );

- Murali Krishna Regandla

---

如果您有任何对图像产生影响的父部件（在我的情况下，我有ClipRRect），那么请不要将中心部件包装在图像周围，而是将父部件包装在中心部件中。 - Jay Tillu

Answer 2

在我的情况下，我试图创建许多子项来填充一个SliverGrid小部件，但是我用于小部件的构造函数（SliverGrid.count）需要一个crossAxisCount属性来指示每行有多少个项目。这个int属性会创建具有相同高度和宽度（90 x 90）的项目，而且无论我尝试什么都无法更改这些值，直到我发现纵横比为1（这就是相同高度和宽度的原因）。为了做我想做的事情（比宽略高一点），我将纵横比改为：

childAspectRatio: 0.5

- Ramiro G.M.