[英]Remove the top padding from ScrollBar when wrapping ListView
I am trying to add ScrollBar
to ListView
in Flutter but the ScrollBar
still have padding on top when scrolling to the start of the ListView
.我尝试添加
ScrollBar
到ListView
在颤振,但ScrollBar
依然有填充在上面滚动到开始时ListView
。
I included a snapshot of the application so you can understand the problem better.我包含了应用程序的快照,以便您可以更好地理解问题。 it`s in the indicator of the scrollbar widget the top padding should not be there ,so the start of the scrollbar indicator should touch the bottom edge of the blue DrawerHeader.
它在滚动条小部件的指示器中,顶部填充不应该在那里,所以滚动条指示器的开始应该接触蓝色 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;
}
}
use MediaQuery.removePadding widget with removeTop: true
使用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;
}
}
Scrollbar padding is set as follows:滚动条填充设置如下:
ScrollbarPainter _buildMaterialScrollbarPainter() {
return ScrollbarPainter(
color: _themeColor,
textDirection: _textDirection,
thickness: widget.thickness ?? _kScrollbarThickness,
radius: widget.radius,
fadeoutOpacityAnimation: _fadeoutOpacityAnimation,
padding: MediaQuery.of(context).padding,
);
}
The solution to remove the padding in your case would be to place your Scaffold inside the SafeArea.在您的情况下移除填充物的解决方案是将您的 Scaffold 放置在 SafeArea 内。
home: SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.