flutter 底部内容dialog
Android的话 底部popwoindow
flutter实现
showCupertinoModalPopup + CupertinoPicker
效果图
参数
options 传入List<String> 的数据展示
value 需要默认选中第几个
height dialog的高度，默认300
使用
var result = CommonPick.showPick(
contexts: context,
options:["1","2","3"],
value:0);
//then 方法是延时的 因为 showPick 回来是Future
result?.then((selectedValue) => {
if (selectedValue !=null){print(selectedValue)}
});
class CommonPick {
static Future?showPick(
{BuildContext? contexts,
List<String>? options,
int? value =0,
double height =300}) {
var controller =FixedExtentScrollController(initialItem: value!);
return showCupertinoModalPopup(
context: contexts!,
builder: (context) {
// var controller = FixedExtentScrollController(initialItem: value!);
return Container(
height: height,
color: Colors.grey[200],
child:Column(
children: [
SizedBox(
height:40,
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {
Navigator.of(contexts).pop();
},
child:const Text('取消'),
),
TextButton(
onPressed: () {
Navigator.of(contexts).pop(controller.selectedItem);
},
child:const Text('确定'),
),
],
),
),
Expanded(
child:CupertinoPicker(
scrollController: controller,
// 使用 scaffold 的背景色
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
itemExtent:32, //行高
onSelectedItemChanged: (value) {},
children: options!.map((e) =>Text(e,
style:const TextStyle(color: Colors.black, fontSize:18))).toList()),
)
],
),
);
});
}
}
