Flutter ListTile 前导高度

Question

我想要一个 listtile，其中leading的小部件只是一个半透明的白色容器。 让我用一个例子来澄清一下

我设法创建了上面的布局（2 ListTile的）。 但是正如您所看到的，当title属性包含一个大文本时，就像它在第一个（绿色）图块中所做的那样， leading小部件的高度没有按照应有的方式跟随。 下面的代码返回一个给定Label的ListTile ，它是我自己的一个类，它只包含文本、文本颜色和背景颜色。

ListTile(
        contentPadding: EdgeInsets.zero,
        dense: true,
        minLeadingWidth: 15,
        tileColor: label.bgColor,
        textColor: label.textColor,
        horizontalTitleGap: 0,
        minVerticalPadding: 0,
        trailing: getPopUpMenuButton(label),
        leading: Container(
          height: double.maxFinite,
          width: 15,
          color: Colors.white54,
        ),
        title: Padding(
          padding: EdgeInsets.all(4),
          child: Text(
            label.title,
          ),
        ),
      )

所以总结一下：如何使leading高度跟随ListTile的高度？

Answer 1

ListTile为 UI 提供了特定的规则。 至于前导这个 Size 在源代码中定义为

    final BoxConstraints maxIconHeightConstraint = BoxConstraints(
      //...
      maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,
    );
    final BoxConstraints looseConstraints = constraints.loosen();
    final BoxConstraints iconConstraints = looseConstraints.enforce(maxIconHeightConstraint);

    final double tileWidth = looseConstraints.maxWidth;
    final Size leadingSize = _layoutBox(leading, iconConstraints);
    final Size trailingSize = _layoutBox(trailing, iconConstraints);

高度来自

maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,

我们可以使用行和列创建自定义小部件，

body: Center(
  child: ListView.builder(
    itemCount: 33,
    itemBuilder: (context, index) => Padding( //use separate builder to and remove the padding
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius:
              BorderRadius.circular(defaultBorderRadiusCircular),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                    color: Colors.cyanAccent,
                    borderRadius: BorderRadius.only(
                      bottomRight:
                          Radius.circular(defaultBorderRadiusCircular),
                      topRight:
                          Radius.circular(defaultBorderRadiusCircular),
                    )),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        "I managed to create the layout above (2 ListTile's). But as you can see, when the title property contains a large text as it is doing in the first (the green) tile, the height of the leading widget is not following as it should. The below code returns a ListTile given a Label which is a class of my own that simply contains text, textcolor and backgroundcolor.",
                        softWrap: true,
                        maxLines: 13,
                        style: TextStyle(),
                      ),
                    ),
                    Icon(Icons.menu),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),