我如何在 Flutter 中显示一个模态下方的另一个模态？

Question

所以，我目前正在使用 Flutter 开发一个“待办事项列表”应用程序。此应用程序有一个浮动按钮，按下该按钮后，会显示模态底部 sheet 和其他一些按钮。其中一些按钮在按下时也会 returns 模态底部 sheet 带有供用户选择的选项。问题是，我似乎找不到将次要底部 sheet 直接放在主要底部 sheet 下方的方法。换句话说，我想调整主要模态的大小以避免被次要模态重叠。这在 flutter 上可行吗？

应用应如下所示

这是目前的样子

这是主模态底部的代码示例 sheet:

taskModal(BuildContext context) {
  return showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    builder: (context) {
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20), topLeft: Radius.circular(20)),
          color: Colors.white,
        ),
        child: Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                _buildCancelButton(),
                TaskForm(),
                BuildBorder(),
                PriorityButton(),
                BuildBorder(),
                DateButton(),
                BuildBorder(),
                _buildConfirmButton(context)
              ],
            ),
          ),
        ),
      );
    },
  );
}

这是我之前提到的其中一个按钮（特别是优先按钮）的代码示例：

class PriorityButton extends StatefulWidget {
  @override
  _PriorityButtonState createState() => _PriorityButtonState();
}

class _PriorityButtonState extends State<PriorityButton> {
  
  List<String> _priorities = [
    'Nenhuma',
    'Baixa (!)',
    'Média (!!)',
    'Alta (!!!)',
  ];

  String _settledPriority = 'Selecionar';
   
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Padding(
              padding: EdgeInsets.symmetric(horizontal: 6),
              child: Icon(
                Icons.flag,
                color: Color(0xff9DA1A6),
              )),
          Text("Prioridade"),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Padding(
                padding: EdgeInsets.only(
                    right: MediaQuery.of(context).size.width * 0.04),
                child: Text(_settledPriority,
                    maxLines: 1),
              ),
            ),
          ),
        ],
      ),
      onTap: () async => await _buildBottomSheet(),
    );
  }

  _setPriority(String priority) {
    setState(() {
      _settledPriority = priority;
    });
    Navigator.pop(context);
  }



_buildBottomSheet() {
    return showModalBottomSheet(
      context: context,
      builder: (context) {
            return Container(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: _priorities.length,
                itemBuilder: (context, index) => GestureDetector(
                  child: Text(
                    _priorities\[index\],
                  ),
                  onTap: () => _setPriority(_priorities\[index\]),
                ),
              ),
            );
          },
    );
  }

}

Answer 1

你在这里可以做的是使用 LayoutBuilder, then use this value as padding for the first displayed modal. Though by design, the modal seems to appear in a single BottomSheet 获取底部模态框的高度。您可以研究的另一种方法是填充单个模态，而不是在屏幕上使用两个模态。

我如何在 Flutter 中显示一个模态下方的另一个模态？

How can i show a modal below another modal in Flutter?

mobile

resize

modal-dialog

flutter

flutter-layout