Question

我有一个eventos.map(async function(evento) { ref = firebase.database().ref("eventos-usuarios/" + evento.id).child(user.uid); dados = await ref.once("value"); botaoAzul = "<button value='" + evento.id + "' class='btn btn-primary text-uppercase font-weight-bold'> Me inscrever <span class='fas fa-user-plus'></span> </button>"; botaoVermelho = "<button value='" + evento.id + "' class='btn btn-primary text-uppercase font-weight-bold'>Cancelar inscrição <span class='fas fa-user-times'></span>"; tabela += "<div class='row mb-5 bg-light'>" + "<div class='col-12'>" + "<h2>" + evento.titulo + "</h2>" + "</div>" + "<div class='col-12'>" + "<img src='" + evento.caminho + "' class='img-fluid'>" + "<span class='fas fa-calendar'></span> " + evento.data + "<br>" + "<span class='fas fa-clock'></span> " + evento.horario + "</div>" + "<div class='col-12'>" + evento.descricao + "</div>" + "<div class='col-6 pt-2 teste'>"; dados.val() ? tabela += botaoVermelho : tabela += botaoAzul; tabela += "</div>" + "<div class='col-6 pt-2'>" + "<button class='btn btn-success text-uppercase font-weight-bold'>" + "Compartilhar <span class='fas fa-share-alt'></span>" + "</button>" + "</div>" + "</div>"; $(".container").append(tabela); $(".btn-primary").on("click", function() { console.log("cc"); if ($(this).hasClass("btn-danger")) { $(this).removeClass("btn-danger"); $(this).html("Me inscrever <span class='fas fa-user-plus'></span>"); } else { ref = firebase.database().ref("eventos-usuarios/" + evento.id + "/" + user.uid); ref.set({ uid: user.uid, nome: user.displayName }).then(() => { $(this).addClass("btn-danger"); $(this).html("Cancelar inscrição <span class='fas fa-user-times'></span>"); }).catch(erro => Notificacao.erro(erro)); } }); tabela = ""; $("#img-loading").removeClass("mx-auto, d-block"); $("#img-loading").css("display", "none"); });，其中显示了各种选项。当前行为将选项显示为DropDown。

如何将DropdownMenuItem切换为显示DropdownMenuItem中所有选项的BottomSheet？

当前代码：

DropDown

编辑：我试图在下拉单击时显示类似于iOS日期选择器的内容。

Answer 1

如果您想自己做一个，这是我自己制作的一个简单示例：

class ModalDropDown extends StatefulWidget {
  @override
  _ModalDropDownState createState() => _ModalDropDownState();
}

class _ModalDropDownState extends State<ModalDropDown> {
  String _selected = '';
  List<String> _items = ['A', 'B', 'C', 'D'];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text('Show Modal'),
            onPressed: () => showModal(context),
          ),
          Text('Selected item: $_selected')
        ],
      ),
    );
  }

  void showModal(context){
    showModalBottomSheet(
      context: context,
      builder: (context){
        return Container(
          padding: EdgeInsets.all(8),
          height: 200,
          alignment: Alignment.center,
          child: ListView.separated(
            itemCount: _items.length,
            separatorBuilder: (context, int) {
              return Divider();
            },
            itemBuilder: (context, index) {
              return GestureDetector(
                child: Text(_items[index]),
                onTap: () {
                  setState(() {
                    _selected = _items[index];
                  });
                  Navigator.of(context).pop();
                }
              );
            }
          ),
        );
      }
    );
  }
}

如果您希望使用Flutter制作的iOS选择器，则可以使用CupertinoPicker

显示底部带有下拉菜单的下拉菜单的选项卡

1 个答案: