我试图在Flutter中构建滚动条,但我找到了一个自定义程序包,但它仍然没有我需要的所有功能。例如,我希望它具有边框,而对于当前边框,我无法将其放在列表视图的末尾。
到目前为止,我的代码是,但即使没有边框,它也不会按预期的那样工作,当列表扩展时,滚动条几乎位于扩展列表的中间:
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: DraggableScrollbar.rrect(
controller: myScrollController,
alwaysVisibleScrollThumb: true,
heightScrollThumb: MediaQuery.of(context).size.width * 0.5,
backgroundColor: AppColors().barColor,
padding: EdgeInsets.only(left: 150, right: 50),
child: ListView.builder(
controller: myScrollController,
shrinkWrap: true, //Added
itemCount: zones.length,
itemBuilder: (BuildContext context, int index) {
Zone zone = zones[index];
List<Place> places = zone.places;
return Column(
children: <Widget>[
ExpansionTile(
onExpansionChanged: (bool expanding) =>
setState(() => zone.isExpanded = expanding),
trailing: Icon(
Icons.arrow_downward,
color: Colors.transparent,
),
title: Container(
padding: EdgeInsets.only(
left: 20.0, top: 10, bottom: 10),
decoration: BoxDecoration(
color: zone.isExpanded
? Colors.black12
: Colors.transparent,
borderRadius: BorderRadius.circular(15.0),
),
child: Row(
children: <Widget>[
Text(
'${zone.name}',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
),
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount: zone.places.length,
itemBuilder: (BuildContext context,
int nestedIndex) {
return Column(
children: <Widget>[
Container(
child: ListTile(
title: Row(
children: <Widget>[
Text(
'${places[nestedIndex].name}',
style:
TextStyle(fontSize: 20),
),
],
mainAxisAlignment:
MainAxisAlignment.center,
),
))
],
);
})
],
)
],
);
})))
],
),
);