Flutter web 中是不是有相当于 `overflow:scroll` 的功能？

Posted 2023-02-23

【中文标题】Flutter web 中是不是有相当于 `overflow:scroll` 的功能？

【英文标题】：Is there an equivalent to `overflow:scroll` in Flutter web?Flutter web 中是否有相当于 `overflow:scroll` 的功能？

【发布时间】：2020-11-23 23:15:07

【问题描述】：

我正在尝试访问浏览器的本机滚动条（在此处查看右侧的内容）。通常，如果一个小部件的内容超出了视口，Flutter 会抛出一个错误，如：A RenderFlex overflowed by 445 pixels on the bottom. 是否有设置或其他东西可以告诉 Flutter web 让那个特定的小部件可滚动？如果我们使用 Scrollbar 小部件，它就不能拖动，而且 DraggableScrollbar 小部件看起来很奇怪，并且实现代码远远超过我的工资等级。我只想要我祖父母习惯的普通滚动条。

【问题讨论】：

这能回答你的问题吗？ scrollbar with drag effect in flutter

那个是不可拖动的，长官。但是下面的确实回答了我的问题（这就是我将其标记为这样的原因）。谢谢你的出现。你戴口罩并保持安全吗？

【参考方案1】：

我写了完整的步骤，因为也许有人会第一次使用DraggableScrollbar 小部件。

1. 将此添加到 pubspec.yaml 依赖项：

draggable_scrollbar: ^0.0.4

2. 导入包：

import 'package:draggable_scrollbar/draggable_scrollbar.dart';

3.定义一个ScrollController：

final ScrollController _scrollController = ScrollController();

4.用法：

@override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Center(
          child: DraggableScrollbar.rrect(
            controller: _scrollController,
            heightScrollThumb: 100,
            backgroundColor: Colors.yellow,
            child: ListView.builder(
              controller: _scrollController,
              itemExtent: 150.0,
              itemCount: 50,
              itemBuilder: (context, index) 
                return Container(
                  child: Card(
                    child: Center(
                      child: Text(index.toString()),
                    ),
                  ),
                );
              ,
            ),
          ),
        ),
    );
  

【讨论】：

谢谢。我看到一堆嵌套在彼此内部的小部件。我放置实际内容的确切位置在哪里？是在最后一个Container里面吗？

您希望它可滚动的小部件是什么？您需要将ListView.builder 替换为该小部件（将ScrollableBar.rrect 的子级设置为可滚动小部件）。 @Andreişăranu

我只想要一个包含一堆容器的列，只要它有空间呈现，它就会滚动。所以我猜 SingleChildScrollView 会代替 ListView 工作。我可以给它同样的_scrollController。对吗？

用ListView 包装容器并将ListView 设置为ScrollableBar.rrect 的子级。 @Andreişăranu

别忘了为ListView设置控制器。如果您遇到任何问题，请告诉我。 @Andreişăranu