Flutter TreeSliver布局问题：实现节点左缩进且右侧元素对齐

要实现树状节点按层级缩进且右侧图标对齐，核心是利用节点的层级深度控制文本缩进，同时固定图标在右侧位置，具体调整如下：

• 用层级深度计算缩进：treeNodeBuilder的第三个参数depth代表当前节点的层级（根节点为0），以此为依据给文本添加左侧缩进，实现不同层级的缩进差异。
• 分离文本与图标布局：将文本放入Expanded组件中，让文本区域自动填充行内剩余空间，图标组件保持固定位置，确保所有图标对齐在同一水平线。
• 拆分padding设置：避免全局左右padding干扰缩进计算，将上下padding与文本的左侧缩进分开配置。

修改后的完整代码：

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      TreeSliver<PartLocator>(
        tree: nodes,
        controller: controller,
        // 接收节点层级depth参数
        treeNodeBuilder: (context, node, depth) {
          final part = node.content as PartLocator;
          final expanded = controller.isExpanded(node);
          return Material(
            color: Colors.transparent,
            child: InkWell(
              borderRadius: BorderRadius.circular(4),
              onTap: () => controller.toggleNode(node),
              // 仅保留上下方向的padding
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Row(
                  children: [
                    Expanded(
                      child: Padding(
                        // 基础左侧padding + 层级缩进（每层16px，可按需调整）
                        padding: EdgeInsets.only(left: 8.0 + depth * 16.0),
                        child: Text(
                          part.serialNumber ??
                              'No serial number for part ${part.id}',
                        ),
                      ),
                    ),
                    if (node.children.isNotEmpty)
                      Icon(
                        expanded
                            ? Icons.arrow_drop_up
                            : Icons.arrow_drop_down,
                      ),
                    if (node.children.isEmpty)
                      Icon(Icons.add, size: 15),
                    // 给图标添加右侧间距，避免贴边
                    const SizedBox(width: 8.0),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    ],
  );
}

关键说明 #

1. 层级缩进调整：depth * 16.0是每层缩进的像素值，可根据UI需求修改，基础的8.0是为了匹配原代码的左右padding规格。
2. Expanded的作用：强制文本区域占满行内除图标外的所有空间，确保图标始终固定在行的最右侧，不受文本长度影响。
3. 默认缩进处理：如果TreeSliver组件本身自带左侧缩进，需先禁用该默认功能（查看组件文档中的indent类参数），避免缩进重复叠加。

内容的提问来源于stack exchange，提问作者Yoeri van Zwol