包装 ListView 时从 ScrollBar 移除顶部填充

Question

我尝试添加ScrollBar到ListView在颤振，但ScrollBar依然有填充在上面滚动到开始时ListView 。

我包含了应用程序的快照，以便您可以更好地理解问题。 它在滚动条小部件的指示器中，顶部填充不应该在那里，所以滚动条指示器的开始应该接触蓝色 DrawerHeader 的底部边缘。

这是我的代码：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final sc = ScrollController(initialScrollOffset: 0);

    final res = MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Driver App'),
        ),
        body: null,
        drawer: Drawer(
          child: Container(
            padding: EdgeInsets.zero,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                DrawerHeader(
                  child: Text('Drawer Header'),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  margin: EdgeInsets.zero,
                ),
                Expanded(
                  child: Scrollbar(
                    radius: Radius.circular(30),
                    thickness: 10,
                    controller: sc,
                    isAlwaysShown: true,
                    child: ListView(
                      shrinkWrap: false,
                      controller: sc,
                      padding: EdgeInsets.only(top: 0),
                      children: <Widget>[
                        ListTile(
                          title: Text('Item 2'),
                          onTap: () {
                            // Update the state of the app.
                            // ...
                          },
                        ),
                        ListTile(
                          title: Text('Item 2'),
                          onTap: () {
                            // Update the state of the app.
                            // ...
                          },
                        ),
                        ListTile(
                          title: Text('Item 2'),
                          onTap: () {
                            // Update the state of the app.
                            // ...
                          },
                        ),
                        ListTile(
                          title: Text('Item 2'),
                          onTap: () {
                          },
                        ),
                        ...
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ), // Populate the Drawer in the next step.
        ),
      ),
    );

    return res;
  }
}

滚动位置为 0 时的结果：

Answer 1

使用MediaQuery.removePadding小部件和removeTop: true

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final sc = ScrollController(initialScrollOffset: 0);

    final res = MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Driver App'),
        ),
        body: null,
        drawer: Drawer(
          child: Container(
            padding: EdgeInsets.zero,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                DrawerHeader(
                  child: Text('Drawer Header'),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  margin: EdgeInsets.zero,
                ),
                Expanded(
                  child: MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: Scrollbar(
                      radius: Radius.circular(30),
                      thickness: 10,
                      controller: sc,
                      isAlwaysShown: true,
                      child: ListView(
                        shrinkWrap: false,
                        controller: sc,
                        padding: EdgeInsets.only(top: 0),
                        children: <Widget>[
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                              // Update the state of the app.
                              // ...
                            },
                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                              // Update the state of the app.
                              // ...
                            },
                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                              // Update the state of the app.
                              // ...
                            },
                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                            },

                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                            },

                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                            },

                          ),
                          ListTile(
                            title: Text('Item 2'),
                            onTap: () {
                            },

                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ), // Populate the Drawer in the next step.
        ),
      ),
    );

    return res;
  }
}

Answer 2

滚动条填充设置如下：

  ScrollbarPainter _buildMaterialScrollbarPainter() {
        return ScrollbarPainter(
          color: _themeColor,
          textDirection: _textDirection,
          thickness: widget.thickness ?? _kScrollbarThickness,
          radius: widget.radius,
          fadeoutOpacityAnimation: _fadeoutOpacityAnimation,
          padding: MediaQuery.of(context).padding,
        );
      }

在您的情况下移除填充物的解决方案是将您的 Scaffold 放置在 SafeArea 内。

  home: SafeArea(
    child: Scaffold(
      appBar: AppBar(
        title: Text('Driver App'),
      ),