Flutter增加ListTile高度

Question

我希望有一个具有适当大小的前导图像、物品描述和图标的列表瓷砖。

尽管在网上搜索答案，但我发现无论前导图像的高度如何，都无法增加列表瓷砖的高度。

代码：

          ListTile(
            leading: ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 100,
                minHeight: 260,
                maxWidth: 104,
                maxHeight: 264,
              ),
              child: Image.asset('lib/images/burger_texas_angus.jpg', fit: BoxFit.fill),
            ),
            title: Text('Texas Angus Burger'),
            subtitle: Text('With fries and coke.'),
            trailing: Icon(
              Icons.menu,
            ),
            onTap: () {},
            onLongPress: () {},
            dense: false,
          ),

我希望最终看起来像这样，他们有一个漂亮的大正方形图标，似乎决定了列表块的高度，而我所做的一切都将图像塞进了一个狭窄的块中。

- Bisclavret

---

你可以使用Container或SizedBox来实现。这是因为你无法增加ListTile的高度。 - undefined

所以你想完全移除填充并使前导图像控制高度？ - undefined

Answer 1

好的，所以答案是不可能的。ListTile是一个非常基本的内置小部件，只能是特定的高度，你无法做任何事情。

如果您想像我在问题中展示的那样使用图片等任何视觉效果，则必须创建自定义CARD。

以下是我的基本卡片布局的结果代码，它将给出与我发布的图像类似的结果，以防有人需要帮助：

              Container(
                  width: MediaQuery.of(context).size.width * 0.94,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(0.0),
                    ),
                    color: Colors.white70,
                    elevation: 10,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: ConstrainedBox(
                            constraints: BoxConstraints(
                              maxWidth: MediaQuery.of(context).size.width * 0.28,
                              maxHeight: MediaQuery.of(context).size.width * 0.28,
                            ),
                            child: Image.asset(
                                'lib/images/burger_texas_angus.jpg',
                                fit: BoxFit.fill
                            ),
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width * 0.5,
                              child: Padding(
                                padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
                                child: Text(
                                  'Texas Angus Burger',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              width: MediaQuery.of(context).size.width * 0.5,
                              child: Padding(
                                padding: const EdgeInsets.fromLTRB(5, 10, 0, 0),
                                child: Text(
                                  '100% Australian Angus grain-fed beef with cheese and pickles.  Served with fries.',
                                  style: TextStyle(
                                    fontSize: 12,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.fromLTRB(5, 40, 0, 0),
                              child: Text(
                                '\$ 24.00',
                                style: TextStyle(
                                  fontSize: 14,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

- Bisclavret

---

我对这个非常苦恼，你真是个救星！ - undefined

Answer 2

试试这个：

Container(height: 100, child: ListTile(
              title: Text("My Title"),
              trailing: Icon(Icons.arrow_right),
            ));

- Dan Gerchcovich

Answer 3

你可以用Container将ListTile包裹起来，并给它指定宽度和高度。

ListTile(
  leading: Container(
    height: 80,
    width: 80,
    child: CircleAvatar(
      backgroundImage: AssetImage(
          'assets/images/splash_view_images/splash.png'),
    ),
  ),
  title: Text('some text'),
  subtitle:
      Text('some text.'),
),

- Usama Elgendy

---

这个问题无法解决。虽然你可以增加高度，但图像和对齐方式无法适应ListTile。 - undefined