Flutter 中不同类型的下拉菜单答案

【问题标题】：Different kind of dropdown menu in FlutterFlutter 中不同类型的下拉菜单
【发布时间】：2021-10-05 19:51:15
【问题描述】：

我一直在尝试在 Flutter 中制作这样的下拉小部件。我尝试了正常的下拉菜单、文本字段覆盖和菜单。有什么建议吗？

默认

专注

【问题讨论】：

标签： flutter drop-down-menu flutter-layout dropdown

【解决方案1】：

您可以通过使用ExpansionPanelList 小部件来完成您正在寻找的东西：

https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

【讨论】：

【解决方案2】：

试试下面的代码希望它对你有帮助我已经尝试过与你的要求相同的使用 ExpansionPanel 小部件

为真假声明声明布尔变量

  bool? isExpanded;
  bool _expanded = false;

声明在下拉列表中显示您的列表小部件

  List<String> data = [
    "Administrative Assistance",
    "Autonomous Driving",
    "Brand",
    "Business Intelligence",
    "Customer Service",
  ];

声明你的小部件

Column(
      children: [
        Container(
          margin: EdgeInsets.all(20),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
          ),
          child: ExpansionPanelList(
            animationDuration: Duration(
                milliseconds: 1000), //change duration on your need here
            children: [
              ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text(
                      'Department',
                      style: TextStyle(color: Colors.black),
                    ),
                  );
                },
                body: Column(
                  children: [
                    Divider(
                      height: 1,
                      color: Colors.green,
                    ),
                    ListView.separated(
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text(
                              data[index],
                            ),
                          );
                        },
                        separatorBuilder: (context, index) => Divider(
                              height: 1,
                              color: Colors.black,
                            ),
                        itemCount: data.length),
                  ],
                ),
                isExpanded: _expanded,
                canTapOnHeader: true,
              ),
            ],
            dividerColor: Colors.grey,
            expansionCallback: (panelIndex, isExpanded) {
              _expanded = !_expanded;
              setState(() {});
            },
          ),
        ),
      ],
    ),

点击前您的结果屏幕 ->

点击后您的结果屏幕 ->

【讨论】：