Flutter应用中如何减小迭代行间距

z0qdvdin 于 2023-03-09 发布在 Flutter

关注(0)|答案(2)|浏览(209)

在我的Flutter项目中，我尝试减少行后不必要的间距，我在Flutter项目中使用了以下UI

for (final stuff in stuffs)
    if (stuff.item == item.id)
    Row(
        children: <Widget>[
          const Expanded(
            flex: 1,
            child: Text('Order: '),
          ),
          Expanded(
            flex: 1,
            child: ListTile(
              title: Text(stuff.order.toString()),
            ),
          ),
          const Expanded(
            flex: 1,
            child: Text('Reps: '),
          ),
          Expanded(
            flex: 1,
            child: ListTile(
              title: Text(stuff.repetitions.toString()),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.edit),
            onPressed: () async {},
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () async {},
          ),
        ],
    ),

这是当前的结果：

我的问题和目标是如何减少每次迭代之间的间距，我希望尽可能地减少不必要的间距

flutter

来源：https://stackoverflow.com/questions/75657659/how-to-reduce-spacing-in-an-iterated-row-in-flutter-application

2条答案

按热度按时间

62lalag41#

您可以尝试将Row widget Package 在一个高度较小的SizedBox小部件中。

SizedBox(
  height: 30, // adjust the height as needed
  child: Row(
    children: <Widget>[
      // ...
    ],
  ),
),

赞(0）回复(0）举报 2023-03-09

bzzcjhmw2#

ListTile带有默认高度，对于您的情况，您可以删除ListTile小部件。同时检查IconButton上的填充，您可能只需要InkWell

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;
  }

赞(0）回复(0）举报 2023-03-09

我来回答

Flutter应用中如何减小迭代行间距

2条答案

相关问题

热门标签

最新问答