Multiple scrollbars error not follow the scrolling and Trigger onTapDown event error

[xiaosongmao123]

Multiple scrollbars error not follow the scrolling and Trigger onTapDown event error

When I use multiple scrollbars，on Windows 10 ，desktop app：

1 Multiple scrollbars error not follow the scrolling

Vertical scroll bar display error:

1. Scroll the mouse wheel on the list and scroll down the list. At this time, the right vertical scroll bar does not follow the scroll. Only when you move the mouse over the scroll bar, it will automatically trigger refresh, and the scroll bar will be displayed in the correct position

2. Press the left mouse button on the list and drag up to scroll up the list. At this time, the right vertical scroll bar does not follow the scrolling, only move the mouse over the scroll bar, it will automatically trigger refresh, and the scroll bar will be displayed in the correct position

But The horizontal scroll bar is displayed correctly:

2 Multiple scrollbars Trigger onTapDown event error

Vertical scroll and horizontal scroll have same error

1. Drag the ScrollSlider with the mouse,scroll to the bottom
2. Hold down the left mouse button on the ScrollSlider

Expected: ScrollSlider does not move,because ScrollSlider is for Drag,not for click Reality:ScrollSlider's Parent Widget(GestureDetector) Trigger the onTapDown event,and the ScrollSlider move to position

Whatever it is click or Hold down the left mouse button ,is the same ,ScrollSlider move

i think it's because adaptive_scrollbar.dart line : 188

return !widget.controller!.hasClients || widget.controller!.position.maxScrollExtent == 0
              ? Container()
              : Align(
                  alignment: alignment,
                  child: RotatedBox(
                    quarterTurns: quarterTurns,
                    child: Padding(
                      padding: widget.bottomPadding,
                      child: GestureDetector(
                        onTapDown: (details) {
                          sendToClickUpdate(details.localPosition.dy);
                        },
                        onTapUp: (details) {
                          print("onTapUp");// here Trigger the event to move， Prevent events from bubbling
                          sendToClickUpdate(-1);
                        },
                        child: Container(
                          width: widget.width,
                          decoration: widget.bottomDecoration,
                          child: ScrollSlider(widget.sliderActiveColor!, widget.controller!, widget.sliderPadding,
                              widget.sliderDecoration!, scrollSubject, clickSubject),
                        ),
                      ),
                    ),
                  ),
                );

here is my test code

@override
  Widget build(BuildContext context) {
    return AdaptiveScrollbar(
        controller: verticalScroll,
        width: 12,
        sliderActiveColor: Color(0xdd757575),
        bottomDecoration: BoxDecoration(shape: BoxShape.rectangle, color: Color(0x88e0e0e0)),
        sliderDecoration:
            BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(12), color: Color(0xffaaaaaa)),
        child: AdaptiveScrollbar(
            controller: horizontalScroll,
            width: 13,
            sliderActiveColor: Color(0xdd757575),
            bottomDecoration: BoxDecoration(shape: BoxShape.rectangle, color: Color(0x88e0e0e0)),
            sliderDecoration: BoxDecoration(
                shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(12), color: Color(0xffaaaaaa)),
            position: ScrollbarPosition.bottom,
            bottomPadding: EdgeInsets.only(bottom: 12),
            child: SingleChildScrollView(
              controller: horizontalScroll,
              scrollDirection: Axis.horizontal,
              child: Container(
                  width: 800,
                  child: Container(
                      child: ListView.builder(
                          controller: verticalScroll,
                          itemCount: 30,
                          itemBuilder: (context, index) {
                            return Container(height: 30, child: Text("Line " + index.toString()));
                          }))),
            )));
  }

[rulila52]

I fixed the second error, it was purely my jamb from the very first version. But the error was a bit different. What about onTapDown, it is not a down-click event, it's a mouse button release event, and at this point I end the slider movement. About the first error, I need to think a little, since this appeared exactly after the last update, and I did not change the code associated with this

[xiaosongmao123]

Vertical scroll bar height calculation and display

i use a tree for filelist (click dir name ,show childs)

show issue

1. click dir name ,show childs,height change
2. When the height exceeds the display view for the first time, the scroll bar is not displayed (should be displayed)
3. After that, increase the height for the second time, and the scroll bar will be displayed

hide issue

1. click dir name ,hide childs,height change
2. When the height less then the display view for the first time, the scroll bar is not hide (should be hide)
3. After that, change the height for the second time, and the scroll bar will be hide

[xiaosongmao123]

Look at the picture carefully，we can find out, When clicking dirname,show the childs (height changed) the ScrollSlider‘s height is not correct ,because when me move the mouse hover on ScrollSlider, it's height will auto refresh

not follow the scrolling，height calculation and display They all seem to be one issue -- need a last refresh

[rulila52]

As I understand it, the remaining problems are related to the fact that old data remains in the controller. The problem is that before the update it most likely worked correctly, so at the moment there are difficulties with the fix. I will try to fix it as soon as i can

[xiaosongmao123]

i test to change the first AdaptiveScrollbar to position: ScrollbarPosition.bottom (horizontalScroll) the second AdaptiveScrollbar be right (verticalScroll)

now all the issue change to horizontal Scrollbar ,（horizontal Scrollbar not follow the scrolling）

@override
  Widget build(BuildContext context) {
    //return _buildTreeView();
    return AdaptiveScrollbar(
        controller: horizontalScroll,
        width: 12,
        sliderActiveColor: Color(0xdd757575),
        bottomDecoration: BoxDecoration(shape: BoxShape.rectangle, color: Color(0x88e0e0e0)),
        sliderDecoration:
            BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(12), color: Color(0xffaaaaaa)),

//changed
        position: ScrollbarPosition.bottom,
        bottomPadding: EdgeInsets.only(bottom: 12),
//changed

        child: AdaptiveScrollbar(
          controller: verticalScroll,
          width: 12,
          sliderActiveColor: Color(0xdd757575),
          bottomDecoration: BoxDecoration(shape: BoxShape.rectangle, color: Color(0x88e0e0e0)),
          sliderDecoration: BoxDecoration(
              shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(12), color: Color(0xffaaaaaa)),
          child: SingleChildScrollView(

[xiaosongmao123]

Anyway, thanks for your work, it helped me a lot

[xiaosongmao123]

[xiaosongmao123]

i found why Scrollbar don't work well

//1. onscroll
onNotification: (ScrollNotification notification) {
        print('onNotification  ' + notification.metrics.pixels.toString());
        return sendToScrollUpdate(notification.metrics.pixels);
      }
//2.add event
  sendToScrollUpdate(double position) {
    print("sendToScrollUpdate " + position.toString());
    scrollSubject.add(true);
    return true;
  }
//3.recive event
streamSubscriptionScroll = widget.scrollSubject.listen((value) {
      print('streamSubscriptionScroll ' + value.toString());
      onScrollUpdate();
    });

//4 update ScrollSlider

code is right , but 3.recive event Does not trigger

i don't know why,but as the same work , streamSubscriptionClick = widget.clickSubject.listen((value) { work well

I debugged it several times，scrollSubject don't work, clickSubject work well

I've also tried convert scrollSubject to BehaviorSubject （make it same with clickSubject ）(don't work

)

  /// Used for transmitting information about scrolls to the [ScrollSlider].
  BehaviorSubject<double> scrollSubject = BehaviorSubject<double>();

  /// Used for transmitting information about clicks to the [ScrollSlider].
  BehaviorSubject<double> clickSubject = BehaviorSubject<double>();

I've also tried use clickSubject to transmit event,then clickSubject don’t work too

  sendToScrollUpdate(double position) {
    print("sendToScrollUpdate " + position.toString());
    scrollSubject.add(position);
    clickSubject.add(-999999);
    return true;
  }

====== Maybe it's because Notification add too often？ Maybe rxdart error? (20210507 0.27.0)

[rulila52]

I think that the scroll events that are sent to the NotificationListener are caught only in the one widget, and do not reach the second NotificationListener. And this problem appeared after the update. I think how to fix it.

[rulila52]

I seem to have fixed both issues. you can view and test version 1.0.1

[rulila52]

And what about your problem with tree for filelist? i can't have any similar code to test. I solved these 2 problems, but I don't know if the scrollbar reacts to the size change when opening your tree

[xiaosongmao123]

i tested, it's ok ,

I've used it in the project

Thank you for your help and Thank you for your time