0

当我们尝试滚动垂直可滚动小部件时，问题出在网络上，该小部件是水平可滚动小部件的子部件，其中滚动条始终可见。

当我们滚动水平滚动小部件时，水平滚动的滚动条正确显示，如图 水平滚动所示

但是当我们滚动垂直滚动小部件时，水平滚动条消失，并且在右侧看到新的垂直滚动条，如屏幕截图 垂直滚动所示

重现问题的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Issue Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Scroll Issue Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _horizontalController = ScrollController();

  final List<ScrollController> _verticalController = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 6; i++) {
      _verticalController.add(ScrollController());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            child: _buildHorizontalScroll(),
          )
        ],
      ),
    );
  }

  Widget _buildHorizontalScroll() {
    return Scrollbar(
      isAlwaysShown: true,
      controller: _horizontalController,
      notificationPredicate: (predicate) {
        return predicate.depth == 0;
      },
      child: ListView.separated(
          controller: _horizontalController,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) => Container(
                margin: const EdgeInsets.all(30),
                width: 300,
                color: Colors.black12,
                child: Column(
                  children: [
                    Expanded(
                      child: _buildVerticalScroll(index),
                    )
                  ],
                ),
              ),
          separatorBuilder: (context, index) => const Divider(
                height: 30,
              ),
          itemCount: 6),
    );
  }

  Widget _buildVerticalScroll(int index) {
    return Scrollbar(
      scrollbarOrientation: ScrollbarOrientation.right,
      isAlwaysShown: true,
      controller: _verticalController[index],
      child: ListView.separated(
          controller: _verticalController[index],
          itemBuilder: (context, index) => Container(
                margin: const EdgeInsets.all(30),
                height: 100,
                color: Colors.green,
              ),
          separatorBuilder: (context, index) => const Divider(
                height: 30,
              ),
          itemCount: 200),
    );
  }
}

检查水平滚动条中的通知谓词，当滚动垂直可滚动列表时，它检测滚动深度为 0 和 1。有解决此问题的方法吗？升级到 2.5.0 稳定通道后问题开始出现。

4

1 回答 1

0

也许这个包将帮助您轻松自定义水平和垂直的拇指和滚动轨道

https://pub.dev/packages/cross_scroll

于 2022-02-08T18:57:34.843 回答