列表砖限制的前导

Question

我想要实现一个大的圆圈头像领导使用小部件卡在列表瓷砖属性。但是我在继续扩大半径的时候，圆圈的头像却不是变大了，反而它一直在左边，可以建议我在引导上做一个大圆圈的小部件吗？

我已经用了“大小箱”和“电梯按钮法”，但也发生了同样的事情。

 return Card(
     // elevation: 0,
      child: ListTile(
        dense: true, 
        visualDensity: VisualDensity(vertical: 4, horizontal: 4),
        leading: CircleAvatar(
          backgroundColor: const Color.fromARGB(255, 3, 80, 144),
          radius: 60,
          child: Icon(widget.leading, color: Colors.white, size: 30),
        ),

Answer 1

你可以得到<=64的高度在这种情况下，可以得到30 on图标大小将工作良好。所以当你不断增加尺寸的时候，它是从左向右移动。

最好为这种情况创建带有行和列的自定义ListTile。

您可以检查这个TileHeight方法。这个提供高度。

 double get _defaultTileHeight {
    final bool hasSubtitle = subtitle != null;
    final bool isTwoLine = !isThreeLine && hasSubtitle;
    final bool isOneLine = !isThreeLine && !hasSubtitle;

    final Offset baseDensity = visualDensity.baseSizeAdjustment;
    if (isOneLine)
      return (isDense ? 48.0 : 56.0) + baseDensity.dy;
    if (isTwoLine)
      return (isDense ? 64.0 : 72.0) + baseDensity.dy;
    return (isDense ? 76.0 : 88.0) + baseDensity.dy;
  }

  @override
  double computeMinIntrinsicHeight(double width) {
    return math.max(
      _defaultTileHeight,
      title!.getMinIntrinsicHeight(width) + (subtitle?.getMinIntrinsicHeight(width) ?? 0.0),
    );
  }

你可以试试这

child: ListView.builder(
    itemCount: 33,
    itemBuilder: (context, index) => 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),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),