Flutter中TreeView横竖滚动异常问题求助

问题描述 #

使用flutter_simple_treeview包实现TreeView的横向+纵向滚动时遇到两个问题：

• 横向滚动无法触发，内容始终停留在初始位置
• 纵向滚动条未显示，即使已设置thumbVisibility: true
  尝试将Expanded替换为SizedBox，问题仍未解决。

当前效果 #

• 横向滚动条无法正常工作
• 纵向滚动条未显示，尽管已设置thumbVisibility为true

预期效果 #

修复后的代码 #

import 'package:flutter/material.dart';
import 'package:flutter_simple_treeview/flutter_simple_treeview.dart';

class HorizontalVerticalScroll extends StatelessWidget {
  HorizontalVerticalScroll({super.key});

  // 为两个滚动视图分别创建控制器
  final _verticalController = ScrollController();
  final _horizontalController = ScrollController();

  @override
  Widget build(BuildContext context) {
    final containerSize = MediaQuery.of(context).size.width / 3;

    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: containerSize,
          height: containerSize,
          color: Colors.lightBlue,
          // 移除多余的Expanded，Container已有固定宽高
          child: Scrollbar(
            controller: _verticalController,
            thumbVisibility: true,
            // 纵向滚动条包裹横向滚动结构
            child: SingleChildScrollView(
              controller: _verticalController,
              child: Scrollbar(
                controller: _horizontalController,
                thumbVisibility: true,
                // 横向滚动条包裹TreeView所在的约束容器
                child: SingleChildScrollView(
                  controller: _horizontalController,
                  scrollDirection: Axis.horizontal,
                  // 添加约束，确保TreeView宽度至少等于容器宽度，超出时触发横向滚动
                  child: ConstrainedBox(
                    constraints: BoxConstraints(minWidth: containerSize),
                    child: TreeView(nodes: [
                      TreeNode(content: Text("root1")),
                      TreeNode(
                        content: Text("root2"),
                        children: [
                          TreeNode(content: Text("child21")),
                          TreeNode(content: Text("child22")),
                          TreeNode(
                            content: Text("root23"),
                            children: [
                              TreeNode(
                                  content: Text(
                                      "child231111111111111111111111111111111119999999999999999"),
                                  children: [
                                    TreeNode(
                                      content: Text(
                                          "child231111111111111111111111111111111119999999999999999"),
                                    )
                                  ]),
                              TreeNode(
                                  content: Text(
                                      "child231111111111111111111111111111111119999999999999999")),
                              TreeNode(
                                  content: Text(
                                      "child231111111111111111111111111111111119999999999999999")),
                              TreeNode(
                                  content: Text(
                                      "child231111111111111111111111111111111119999999999999999")),
                              TreeNode(
                                  content: Text(
                                      "child231111111111111111111111111111111119999999999999999")),
                            ],
                          ),
                          TreeNode(
                            content: Text("root23"),
                            children: [
                              TreeNode(content: Text("child231")),
                            ],
                          ),
                          TreeNode(
                            content: Text("root23"),
                            children: [
                              TreeNode(content: Text("child231")),
                            ],
                          ),
                          TreeNode(
                            content: Text("root23"),
                            children: [
                              TreeNode(content: Text("child231")),
                            ],
                          ),
                          TreeNode(
                            content: Text("root23"),
                            children: [
                              TreeNode(content: Text("child231")),
                            ],
                          ),
                        ],
                      ),
                    ]),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

问题分析与修复要点 #

1. 移除多余的Expanded组件：
   Container已经指定了固定宽高，Expanded仅适用于Flex布局（如Row/Column），嵌套在Container内会破坏布局约束，导致滚动视图无法正确获取可用空间。

2. 为Scrollbar绑定对应ScrollController：
   嵌套的Scrollbar需要明确绑定各自的ScrollController，否则Flutter无法正确关联滚动条与对应的滚动视图，导致纵向滚动条不显示。

3. 添加横向滚动的约束条件：
   给纵向SingleChildScrollView的子级添加ConstrainedBox，设置minWidth等于容器宽度，确保TreeView内容宽度超出容器时能触发横向滚动，避免内容被压缩到最小宽度。

内容的提问来源于stack exchange，提问作者Yao Jing Quek