Flutter中如何实现Dropdown的这种设计答案

【问题标题】：How to achieve this design of Dropdown in flutterFlutter中如何实现Dropdown的这种设计
【发布时间】：2019-01-09 04:22:28
【问题描述】：

我想实现这种下拉设计，但不确定如何获得这种类型的下拉我试过这样做

 Container(
             padding: EdgeInsets.all(10.0),
             child: DropdownButtonHideUnderline(
               child: DropdownButton<String>(
                  items:_locations.map((String val){
                    return DropdownMenuItem<String>(
                      value: val,
                      child: Container(
                          margin: EdgeInsets.only(left: 10.0,right: 10.0),
                          child: new Text(val)
                      ),
                    );
                  }).toList(),
                  hint:Text(_SelectdType),
                  onChanged:(String val){
                    _SelectdType = val;
                    setState(() {});
                  }
           ),
             ),
           )

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

DropdownButton 的 hint 和 DropdownMenuItem 的 child 和其他所有东西一样都是小部件，因此您可以在其中放置任何您想要的东西。

此示例使用Map 来提供文本和图标：

final Map<String, IconData> _data = Map.fromIterables(
    ['First', 'Second', 'Third'],
    [Icons.filter_1, Icons.filter_2, Icons.filter_3]);
String _selectedType;
IconData _selectedIcon;
...

Container(
  padding: EdgeInsets.all(10.0),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
        items: _data.keys.map((String val) {
          return DropdownMenuItem<String>(
            value: val,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10.0),
                  child: Icon(_data[val]),
                ),
                Text(val),
              ],
            ),
          );
        }).toList(),
        hint: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0),
              child:
                  Icon(_selectedIcon ?? _data.values.toList()[0]),
            ),
            Text(_selectedType ?? _data.keys.toList()[0]),
          ],
        ),
        onChanged: (String val) {
          setState(() {
            _selectedType = val;
            _selectedIcon = _data[val];
          });
        }),
  ),
),

【讨论】：

是的，只要把它们改成你想要的。

【解决方案2】：

您可以使用 Row 来构建您的 DropdownMenuItem。

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.redAccent,
      ),
      onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
      },
      items: <String>['One', 'Two', 'Free', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Row(children: [
            
           IconButton(
              icon: Icon(Icons.home),
              color: Colors.redAccent,
            ),
            
            Text(value),

          ]),
        );
      }).toList(),
    );
  }
}

【讨论】：

【解决方案3】：

你可以像这样使用它：

 import 'package:flutter/material.dart';

class SettingsWidget extends StatefulWidget {
 SettingsWidget({Key key}) : super(key: key);

@override
_SettingsWidgetState createState() => new _SettingsWidgetState();
}

 class _SettingsWidgetState extends State<SettingsWidget> {

  List _cities =
 ["Cluj-Napoca", "Bucuresti", "Timisoara", "Brasov", "Constanta"];

 List<DropdownMenuItem<String>> _dropDownMenuItems;
 String _currentCity;

 @override
 void initState() {
 _dropDownMenuItems = getDropDownMenuItems();
 _currentCity = _dropDownMenuItems[0].value;
 super.initState();
}

List<DropdownMenuItem<String>> getDropDownMenuItems() {
List<DropdownMenuItem<String>> items = new List();
for (String city in _cities) {
  items.add(new DropdownMenuItem(
      value: city,
      child: new Text(city)
  ));
}
return items;
}

@override
Widget build(BuildContext context) {
 return new Container(
   color: Colors.white,
    child: new Center(
         child: new Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           new Text("Please choose your city: "),
           new Container(
             padding: new EdgeInsets.all(16.0),
           ),
            new DropdownButton(
            value: _currentCity,
            items: _dropDownMenuItems,
            onChanged: changedDropDownItem,
          )
        ],
      )
  ),
);
  }

void changedDropDownItem(String selectedCity) {
 setState(() {
   _currentCity = selectedCity;
});
 }

 }

【讨论】：

这不是你自己的代码，你忘了提到作者。
我相信原来的答案是this one here