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

想要最终看起来像这样，他们有一个漂亮的大方形前导图标，该图标似乎决定了列表对象的高度，而我所做的一切都将图像填充到一个狭窄的方块中。

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

Answer 2

尝试一下：

LIKE

Answer 3

您可以将ListTile与Container包裹在一起，并为其指定宽度和高度

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.'),
),

颤振增加ListTile高度

3 个答案: