需求 类似这种
首先 写一个 方法
// 自定义弹窗
void showCustomAlertDialog(
BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true, // 允许自定义弹出框大小
backgroundColor: Colors.transparent, // 背景透明
builder: (BuildContext context) {
return Align(
alignment: Alignment.bottomCenter, // 固定弹出框在底部
child: FractionallySizedBox(
widthFactor: 1, // 宽度占屏幕的占比
child: Container(
padding: const EdgeInsets.all(10.0),
decoration: const BoxDecoration(
color: Colors.transparent,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: BgItem,
borderRadius: BorderRadius.circular(16.0),
),
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: Column(
children: <Widget>[
// 构建选择项列表,并传递索引
...options.asMap().entries.expand((entry) {
int index = entry.key;
String option = entry.value;
if (index < options.length - 1) {
// 只在非最后一个选项后添加分割线
return [
_buildOption(context, option, index), // 传递索引
const Divider(
height: 1,
color: Color.fromRGBO(255, 255, 255, .1),
thickness: 1,
),
];
} else {
// 对于最后一个选项,仅添加选项本身
return [_buildOption(context, option, index)];
}
}).toList(),
],
),
),
),
const SizedBox(height: 10),
Container(
height: 50,
decoration: BoxDecoration(
color: BgItem,
borderRadius: BorderRadius.circular(16.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
// 按钮点击事件
Navigator.of(context).pop(); // 关闭弹出框
},
child: Text(
'自动诊断',
style:
TextStyle(color: Colors.white, fontSize: 16.sp),
),
),
],
),
),
],
),
),
),
);
},
);
}
// 构建每个选择项的Row
Widget _buildOption(BuildContext context, String text, int index) {
return InkWell(
onTap: () {
Navigator.of(context).pop(); // 关闭弹出框
setState(() {
_selectedValue = getSelectString(index);
}
});
},
child: SizedBox(
height: 50, // 高度为60
// margin: EdgeInsets.only(left: 16), // 左边距16
child: Row(
crossAxisAlignment: CrossAxisAlignment.center, // 上下居中
children: [
Text(
text,
style: TextStyle(
color: Colors.white, // 文字颜色白色
fontSize: 14.sp, // 文字大小
),
),
],
),
),
);
}
然后我们在页面的点击事件 直接调用
showCustomAlertDialog(context)即可