Flutter Web 2.0 中的滚动条

Posted 2023-02-23

【中文标题】Flutter Web 2.0 中的滚动条

【英文标题】：Scrollbar in Flutter Web 2.0

【发布时间】：2021-06-21 15:34:45

【问题描述】：

我试图在我的网络应用程序中放置一个滚动条，Scrollbar 出现了，但是当我尝试移动它时，它没有移动。我可以看到栏，但我不能拖动它。我可以使用鼠标滚轮滚动，但不能使用栏。看到this，但没有帮助。是关于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
  ),
);

【问题讨论】：

要显示Scrollbar，它的子元素应该是可滚动的。您是否尝试过将 Container 包裹在 SingleChildScrollView 中？

@rickimaru 不起作用

我不确定你是如何修改你的代码的...试试我下面的答案...

【参考方案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,
      ),
    );
  

【讨论】：

对不起，我没有看到SingleChildScrollView。你在哪里使用了哪个scrollabe child？

@icyNerd 在本例中，我使用ListView 作为child 的CoverWidget。