我被设计成如下所示的非常沉重的嵌套设计,当我的列表扩展到listview时,问题似乎没有滚动,这是什么原因,底部表单得到了扩展,但是如果我不关注其中的listview,通过触摸“营业时间”文本进行滚动,它开始滚动,但是当它向上时,我不能向下滑动。
_showDialog(BuildContext context) {
print("_showDialog");
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) {
return Container(
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.symmetric(vertical: 8),
height: 8.0,
width: 70.0,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(10.0)))),
SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text('Operational Hours',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: widget.isTab(context)
? TabTextStyles.mediumText
.copyWith()
.fontSize
: PhoneTextStyles.mediumText
.copyWith()
.fontSize)),
),
],
),
ListView(
controller: scrollController,
children: <Widget>[
SizedBox(height: 54.0),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20.0),
Text('Select days to add hours',
style: widget.isTab(context)
? TabTextStyles.mediumText.copyWith()
: PhoneTextStyles.mediumText.copyWith()),
]),
),
DaysList()
],
),
],
),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
),
);
},
);
},
);
}
Column
中,然后将DaysList
包装在Expanded
中,然后将ScrollController
传递给它。 这是您的方法:
void _showDialog(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) {
return Column(
children: <Widget>[
// Put all heading in column.
column,
// Wrap your DaysList in Expanded and provide scrollController to it
Expanded(child: DaysList(controller: scrollController)),
],
);
},
);
},
);
}
这是您的Column
:
Widget get column { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Align( alignment: Alignment.topCenter, child: Container( margin: EdgeInsets.symmetric(vertical: 8), height: 8.0, width: 70.0, decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(10.0)), ), ), SizedBox(height: 16), Padding( padding: const EdgeInsets.symmetric(horizontal: 24), child: Text('Operational Hours', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox(height: 20.0), Text('Select days to add hours'), ], ), ), SizedBox(height: 16), ], ); }
这就是您的DaysList
外观:
class DaysList extends StatelessWidget { final ScrollController controller; const DaysList({Key key, this.controller}) : super(key: key); @override Widget build(BuildContext context) { return ListView.builder( controller: controller, // assign controller here itemCount: 20, itemBuilder: (_, index) => ListTile(title: Text("Item $index")), ); } }
输出: