有没有办法在颤动中向 DropdownButton 添加标签？答案

【问题标题】：Is there a way to add a label to a DropdownButton in flutter?有没有办法在颤动中向 DropdownButton 添加标签？
【发布时间】：2020-03-20 22:26:08
【问题描述】：

我正在尝试这种设计：1
[标签] : [下拉列表]
[标签] : [文本字段]
[标签] : [下拉列表]

我已经能够使用以下代码实现下拉菜单：

  List<String> _locations = ['Cita', 'Junta', 'Proyecto', 'Examen', 'Otro']; // Option 2
  String _selectedLocation; // Option 2

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Crear Evento'),
      ),
      body: Center(
        child: Container(
          width: double.infinity,
          height: 400,
          padding: EdgeInsets.symmetric(horizontal: 20),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              new Text('Categoría'),
              DropdownButton(
                hint: Text('Categoría'), // Not necessary for Option 1
                value: _selectedLocation,
                onChanged: (newValue) {
                  setState(() {
                    _selectedLocation = newValue;
                  });
                },
                items: _locations.map((location) {
                  return DropdownMenuItem(
                    child: new Text(location),
                    value: location,
                  );
                }).toList(),
              ),
            ],
          ),
        ),
      ),
    );

但是，这个输出不是我想要的，因为输出的格式是：2
[标签]

PS.：我知道它不是一个正确的标签，因为它只是一个文本，如果有人可以帮助我，那就太好了，提前谢谢。

【问题讨论】：

标签： android ios flutter mobile

【解决方案1】：

如果我得到了你想要的，你将需要使用 Row（阅读更多 here）来做到这一点，就像下面的例子一样，使用你的代码：

List<String> _locations = ['Cita', 'Junta', 'Proyecto', 'Examen', 'Otro']; // Option 2
  String _selectedLocation; // Option 2

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Crear Evento'),
      ),
      body: Center(
        child: Container(
          width: double.infinity,
          height: 400,
          padding: EdgeInsets.symmetric(horizontal: 20),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Categoría'),
                  Container(width: 8),
                  DropdownButton(
                    hint: Text('Categoría'), // Not necessary for Option 1
                    value: _selectedLocation,
                    onChanged: (newValue) {
                      setState(() {
                        _selectedLocation = newValue;
                      });
                    },
                    items: _locations.map((location) {
                      return DropdownMenuItem(
                        child: new Text(location),
                        value: location,
                      );
                    }).toList(),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

产生这个：

【讨论】：

【解决方案2】：

我知道这不是问题的答案，但任何想在 FormFields 中添加 labelText 的人（之前和我一样）都可以使用 InputDecorator。

class ChecklistAddNewRepatDropdown extends StatelessWidget {
  final Map<int, List> tasks;
  final ChecklistAddNewState state;
  final int index;

  const ChecklistAddNewRepatDropdown({
     Key key,
     @required this.tasks,
     @required this.index,
     @required this.state,
   }) : super(key: key);

  @override
  Widget build(BuildContext context) {
 
 return InputDecorator(
  decoration: (state.emptyTasks.indexOf(index) == -1)
      ? inputDecoration('Repeat')
      : inputErrorDecoration('Repeat'),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
      
      value: (tasks[index] == null || tasks[index][1] == "")
          ? 'One'
          : tasks[index][1],

      isExpanded: true,
      
      isDense: true,
      
      style: inputTextStyle(),
      
      icon: Icon(
        Icons.arrow_drop_down,
        color: Colors.black,
      ),
      
      iconSize: 24,

      onChanged: (value) {
        if (tasks[index] != null) {
          tasks[index][1] = value;
        } else {
          tasks[index] = ["", value];
        }
        checklistAddNewBloc.add(
          TasksTaskWhileChangingEvent(tasks),
        );
      },

      items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    ),
  ),
);

你可以这样使用它。（代码可能有错误，我只是想举例说明一下如何使用InputDecorator）。

【讨论】：