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

qgelzfjb  于 2023-05-08  发布在  Flutter
关注(0)|答案(2)|浏览(192)

我的图像在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,
      ),
    ],
  ),
);
6qftjkof

6qftjkof1#

通过将 Image 小部件 Package 在 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,
            ),
          ),
        ],
      ),
    );

**编辑:**如果您想将图像对齐到中心以外的位置,可以将其包裹在对齐小部件内。

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,
            ),
          ),
        ],
      ),
    );
kqqjbcuj

kqqjbcuj2#

在我的例子中,我试图创建许多子元素来填充一个SliverGrid小部件,但是我为小部件使用的构造函数(SliverGrid.count)需要一个crossAxisCount属性来指示每行有多少项。这个int属性创建了具有相同高度和宽度(90 x 90)的项目,无论我尝试什么,我都无法更改这个值,直到我发现长宽比为1(这是相同高度和宽度的原因)。为了达到我的目的(高度比宽度多一点),我将长宽比改为:

childAspectRatio: 0.5

相关问题