Полоса прокрутки Flutter, которая находится в горизонтальной прокрутке, не отображает правильно внутреннюю прокрутку

Итак, у меня есть больший вид прокрутки, который прокручивается горизонтально, а внутри - маленькое поле (красный цвет) и меньший вид прокрутки (оранжевый цвет), который прокручивается вертикально. На большом прокрутке есть две полосы прокрутки (1 - для горизонтальной), а вторая - для вертикальной внутренней.

И проблема - вертикальная полоса прокрутки выглядит неправильно, потому что она может идти только так, как показывает синяя стрелка, и я хочу, чтобы она имела либо полную высоту большего прокрутки, либо была прямо рядом с прокручиваемой вертикальной частью, но затем не скрывается при прокрутке горизонтальное направление.

Бегать на дартпаде

      import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ScrollSizingWidget(),
        ),
      ),
    );
  }
}

class ScrollSizingWidget extends StatefulWidget {
  const ScrollSizingWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<ScrollSizingWidget> createState() => _ScrollSizingWidgetState();
}

class _ScrollSizingWidgetState extends State<ScrollSizingWidget> {
  final ScrollController _horizontal = ScrollController();
  final ScrollController _vertical = ScrollController();

  @override
  void dispose() {
    _horizontal.dispose();
    _vertical.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
        controller: _vertical,
        notificationPredicate: (notification) => notification.depth == 1,
        child: Scrollbar(
          controller: _horizontal,
          scrollbarOrientation: ScrollbarOrientation.bottom,
          child: SingleChildScrollView(
            controller: _horizontal,
            scrollDirection: Axis.horizontal,
            child: SizedBox(
              height: 500,
              width: 1000,
              child: Column(
                children:[
                  Container(width: 1000, height: 200, color: Colors.green),
                  Flexible(
                    child: SingleChildScrollView(
                      controller: _vertical,
                      child: Container(
                        height: 700,
                        width: 1000,
                        color: Colors.yellow,
                      )
                    )
                  ),
                  
                ]
              )
            ),
 
        ),
      ),
    );
  }
}

0 ответов

Другие вопросы по тегам