是否有与“选择多个"相同的小部件?HTML中的元素 [英] Is there an equivalent widget in flutter to the "select multiple" element in HTML

问题描述

我在颤振中搜索一个等于

I am searching for a widget in flutter that is equal to

<select multiple=""></select>

在颤抖中.

一个示例实现(用于网络)是 MaterializeCSS Select Multiple

An example implementation (for the web) is MaterializeCSS Select Multiple

如上所示，我应该能够提供一个项目列表(其中一些是预先选择的)，最后检索一个选定项目列表或地图或其他东西.

As seen above I should be able to provide a list of items (with some of them preselected) and at the end retrieve a list of selected items or a map or something else.

非常感谢您提供示例实现或文档链接.

An example implementation or a link to a documentation is very appreciated.

推荐答案

我认为 Flutter 中目前不存在这样的小部件，但您可以自己构建一个.

I don't think that a widget like that currently exists in Flutter, but you can build one yourself.

在屏幕空间有限的手机上，显示带有提交按钮的对话框可能很有意义，例如 这个原生 Android 对话框.

On mobile phones with limited screen space it would probably make sense to display a dialog with a submit button, like this native Android dialog.

这是一个粗略的草图，如何在不到 100 行代码中实现这样的对话框:

Here is a rough sketch how to implement such a dialog in less than 100 lines of code:

class MultiSelectDialogItem<V> {
  const MultiSelectDialogItem(this.value, this.label);

  final V value;
  final String label;
}

class MultiSelectDialog<V> extends StatefulWidget {
  MultiSelectDialog({Key key, this.items, this.initialSelectedValues}) : super(key: key);

  final List<MultiSelectDialogItem<V>> items;
  final Set<V> initialSelectedValues;

  @override
  State<StatefulWidget> createState() => _MultiSelectDialogState<V>();
}

class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
  final _selectedValues = Set<V>();

  void initState() {
    super.initState();
    if (widget.initialSelectedValues != null) {
      _selectedValues.addAll(widget.initialSelectedValues);
    }
  }

  void _onItemCheckedChange(V itemValue, bool checked) {
    setState(() {
      if (checked) {
        _selectedValues.add(itemValue);
      } else {
        _selectedValues.remove(itemValue);
      }
    });
  }

  void _onCancelTap() {
    Navigator.pop(context);
  }

  void _onSubmitTap() {
    Navigator.pop(context, _selectedValues);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('Select animals'),
      contentPadding: EdgeInsets.only(top: 12.0),
      content: SingleChildScrollView(
        child: ListTileTheme(
          contentPadding: EdgeInsets.fromLTRB(14.0, 0.0, 24.0, 0.0),
          child: ListBody(
            children: widget.items.map(_buildItem).toList(),
          ),
        ),
      ),
      actions: <Widget>[
        FlatButton(
          child: Text('CANCEL'),
          onPressed: _onCancelTap,
        ),
        FlatButton(
          child: Text('OK'),
          onPressed: _onSubmitTap,
        )
      ],
    );
  }

  Widget _buildItem(MultiSelectDialogItem<V> item) {
    final checked = _selectedValues.contains(item.value);
    return CheckboxListTile(
      value: checked,
      title: Text(item.label),
      controlAffinity: ListTileControlAffinity.leading,
      onChanged: (checked) => _onItemCheckedChange(item.value, checked),
    );
  }
}

你可以这样使用它:

void _showMultiSelect(BuildContext context) async {
  final items = <MultiSelectDialogItem<int>>[
    MultiSelectDialogItem(1, 'Dog'),
    MultiSelectDialogItem(2, 'Cat'),
    MultiSelectDialogItem(3, 'Mouse'),
  ];

  final selectedValues = await showDialog<Set<int>>(
    context: context,
    builder: (BuildContext context) {
      return MultiSelectDialog(
        items: items,
        initialSelectedValues: [1, 3].toSet(),
      );
    },
  );

  print(selectedValues);
}

这篇关于是否有与“选择多个"相同的小部件?HTML中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！