Проблема с вложенной прокруткой, когда обе прокрутки всегда видны (стабильный канал Flutter)

Question

Проблема возникает в сети, когда мы пытаемся прокрутить вертикально прокручиваемый виджет, который является дочерним элементом горизонтально прокручиваемого виджета, где полоса прокрутки всегда видна.

When we scroll the horizontally scrollable widget the scroll bar for horizontal scroll is correctly displayed as shown in picture horizontal scroll

But when we scroll the vertically scrollable widget the horizontal scrollbar disappears and new vertical scroll bar is seen at right as shown in screenshotvertical scroll

Code to reproduce the issue.

      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),
    );
  }
}

Checking the notification predicate in the horizontal scroll bar, it detects the depth of scroll as both 0 and 1 when scrolling the vertically scrollable list. Is there a workaround for this problem? The problem started to appear since the upgrade to 2.5.0 for stable channel of flutter.

Answer 1

Возможно, этот пакет поможет вам легко настроить бегунок и прокрутку как по горизонтали, так и по вертикали.

https://pub.dev/packages/cross_scroll