![](/img/trans.png)
[英]Stop scrolling in DraggableScrollableSheet in flutter
[英]Listview inside DraggableScrollableSheet not scrolling in flutter
我设计了非常重的嵌套设计,如下所示,我的列表扩展列表视图时的问题似乎没有滚动这是什么原因,底部表被扩展但没有关注其中的列表视图,如果我滚动触摸“营业时间”文本,它开始滚动,但当它向上时,我无法向下滑动。
_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")),
);
}
}
输出:
截屏:
调用这个方法:
void showMyBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) {
return DraggableScrollableSheet(
maxChildSize: 0.8,
expand: false,
builder: (_, controller) {
return Column(
children: [
Container(
width: 100,
height: 8,
margin: EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
),
Expanded(
child: ListView.builder(
controller: controller,
itemCount: 100,
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
),
),
],
);
},
);
},
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.