包裝 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'),
      ),