Полоса прокрутки в Flutter Web 2.0

Я пытаюсь добавить полосу прокрутки в свое веб-приложение, и я думаю, что на какое-то время мне это удалось, т.е. Scrollbarпоявилось на секунду, и когда я попытался переместить его, сначала он не двигался, а затем полностью исчез. Видел это, но это не помогло. Это о ScrollController? controller или что?

Вот мой код:

      class CoverWidget extends StatelessWidget {
final widget;
const CoverWidget({Key key, @required this.widget}) : super(key: key);

@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;

return Scrollbar(
  isAlwaysShown: true,
  child: Container(
      margin: EdgeInsets.only(left: 15, right: 15, top: 15),
      padding: EdgeInsets.only(
        left: w * 0.05,
        right: w * 0.20,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(0),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.grey[300], blurRadius: 10, offset: Offset(3, 3))
        ],
      ),
      child: widget
  ),
);}}

1 ответ

Вот пример кода для ScrollBar с прокручиваемым дочерним элементом.

      import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: CoverWidget(
            child: ListView(
              children: List.generate(
                100,
                (index) => ListTile(
                  title: Text('This is item #$index'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class CoverWidget extends StatelessWidget {
  CoverWidget({
    required this.child,
    Key? key,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      isAlwaysShown: true,
      child: Container(
        margin: EdgeInsets.only(left: 15, right: 15, top: 15),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.grey,
              blurRadius: 10,
              offset: Offset(3, 3),
            )
          ],
        ),
        child: child,
      ),
    );
  }
}
Другие вопросы по тегам