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