flutter中弹出框 在底部 然后有分层

需求 类似这种

首先 写一个 方法

// 自定义弹窗
  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）即可