如何处理列表视图中的图像宽度抖动?

时间:2020-07-01 15:58:30

标签: flutter flutter-layout

我的图像在ListView内部。我想给图像自定义宽度。但是width属性对我不起作用。我可以自定义height,但是width属性不起作用。

这是图片的样子:

Sample image

以下是示例代码:

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

1 个答案:

答案 0 :(得分: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,
            ),
          ),
        ],
      ),
    );

编辑: 如果您要对齐图像而不是对齐中心,可以将其包装在“对齐”小部件内。

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