Flutter水平滚动条不显示问题求助（附代码及环境信息）

问题描述 #

垂直滚动轴功能正常且滚动条可正常显示，但水平滚动轴功能正常却无法显示滚动条。

环境信息 #

Flutter 3.7.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 90c64ed42b (9 days ago) • 2023-03-21 11:27:08 -0500
Engine • revision 9aa7816315
Tools • Dart 2.19.5 • DevTools 2.20.1

问题原因 #

原代码嵌套的Scrollbar未正确区分滚动轴的通知事件，同时布局层级导致水平Scrollbar无法获取正确的滚动范围信息，进而无法正常渲染。

解决方案 #

调整Scrollbar的嵌套结构，为水平Scrollbar添加滚动事件过滤规则，确保两个滚动条各自监听对应轴的滚动行为。

修改后的代码：

final _horizontalScrollController = ScrollController();
final _verticalScrollController = ScrollController();

Widget displayTable(bool isValid) {
  return Column(
    children: [
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: double.infinity,
            color: Colors.white,
            child: Visibility(
              visible: isLoading,
              replacement: RefreshIndicator(
                onRefresh: () {
                  setState(() {
                    isValid = true;
                  });
                  return callMyFunction();
                },
                child: Scrollbar(
                  controller: _verticalScrollController,
                  thumbVisibility: true,
                  trackVisibility: true,
                  child: SingleChildScrollView(
                    controller: _verticalScrollController,
                    child: Scrollbar(
                      controller: _horizontalScrollController,
                      thumbVisibility: true,
                      trackVisibility: true,
                      // 仅监听水平方向的滚动通知
                      notificationPredicate: (notification) => 
                        notification is ScrollUpdateNotification && 
                        notification.metrics.axis == Axis.horizontal,
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        controller: _horizontalScrollController,
                        child: DataTable(
                          columns: const [
                            // columns ...
                          ],
                          rows: [
                            // Rows ...
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              child: const Center(child: CircularProgressIndicator()),
            ),
          ),
        ),
      )
    ],
  );
}

关键修改说明 #

• 添加notificationPredicate：为水平Scrollbar设置该参数，过滤出仅水平方向的滚动通知，避免与垂直滚动条的事件冲突。
• 调整布局层级：让水平Scrollbar作为垂直SingleChildScrollView的直接子元素，确保它能正确获取水平滚动区域的尺寸信息。
• 控制器关联：保持Scrollbar与对应SingleChildScrollView使用同一ScrollController，保证滚动状态同步。

如果上述方案仍不生效，可尝试使用RawScrollbar替代Scrollbar，它支持直接指定滚动轴：

RawScrollbar(
  controller: _horizontalScrollController,
  thumbVisibility: true,
  trackVisibility: true,
  axis: Axis.horizontal,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    controller: _horizontalScrollController,
    child: DataTable(/* 表格内容 */),
  ),
)

内容的提问来源于stack exchange，提问作者mah454