flutter - Flutter Web 2.0 中的滚动条

Question

我试图在我的网络应用程序中放置一个滚动条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
  ),
);}}

标签： flutterdartscrollbarflutter-webflutter2.0

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