我想做如下的东西:
底片的初始状态
向上拖动底片时
预期行为 当我向上拖动bottomsheet时,内容将像第二张图片一样显示,当sheet达到提供的最大高度时,只有标题后面的列表可以滚动,但标题和标题上方的白框将固定在他们的位置。
这是我如何设置模态表:
DraggableScrollableSheet(
initialChildSize: 0.05,
minChildSize: 0.05,
maxChildSize: 0.8,
builder: (BuildContext context, ScrollController scrollController){
return SingleChildScrollView(
controller: scrollController,
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 7,
offset: const Offset(0, 3),
),
]
),
height: MediaQuery.of(context).size.height,
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
child: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
width: WidgetScreen.width(context, 70),
height: 7,
)
)
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Text('My cars'),
IconButton(
color: Colors.black,
focusColor: Colors.red,
splashRadius: 20,
onPressed: (){},
icon: const Icon(
CupertinoIcons.add,
size: 15,
)
)
]
),
Expanded(
flex: 1,
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
)
]
),
),
)
);
}
)
SingleChildScrollView
允许我使DraggableScrollableSheet
工作正常因为这个的孩子必须是一个列表才能使拖动行为起作用。
我得到了什么
当工作表达到提供的最大高度时,如果我在列表中滚动,我得到了我想要的,但如果我从标题块滚动,所有内容都像下面一样滚动
注意 我试图找到一个包或使用 flutter 的模态表,但它们都需要一个外部触发器来显示底部表,就像点击某物一样,但我不希望它以这种方式运行。
附言
WidgetScreen.width(context, 70)
是我创建的一些助手所以只需用一些 int 值替换它