如何在Flutter的ListTile中設置圖片的高度？

Question

我的 Flutter 應用程序中有一個列表，我正在嘗試調整主要圖像的大小以重新組合列表，如下所示。 但是，我無法理解如何修復縱橫比以使高度等於寬度並使框成為正方形。

這是我的 ListView 代碼：

Expanded(
            child: ListView.builder(
              itemExtent: 100.0,
              //   padding: EdgeInsets.all(10.0),
              itemCount: filteredUsers.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    leading: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(4.0)),
                      child: Image.network(
                        "https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg",
                      ),
                    ),
                    title: Text("Taj Mahal"),
                    subtitle: Text("India"));
              },
            ),
          ),

這是它的樣子：

這就是我想要實現的目標：

Answer 1

您必須指定尺寸並適合您的圖像才能實現此目的。

Image.network(
   "https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg",
   width: 50,
   height: 50,
   fit: BoxFit.cover,
),

Output：

Answer 2

要在 ListTile 上創建方形圖像，您可以使用AspectRatio小部件將孩子的縱橫比定義為 (1 / 1) 以制作正方形，然后將Image.network fit 設置為BoxFit.cover 。

ListView.builder(
  itemCount: 20,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: AspectRatio(
        aspectRatio: 1,
        child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(4.0)),
          child: Image.network(
            'https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      title: Text('Title $index'),
      subtitle: Text('Subtitle $index'),
    );
  },
),