颤振中不同类型的下拉菜单 [英] Different kind of dropdown menu in Flutter

问题描述

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

默认

聚焦

推荐答案

尝试以下代码希望它对您有帮助我已经使用<[3-1]小部件尝试了与您的要求相同的小部件

为TRUE或FALSE语句声明布尔变量

  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(() {});
            },
          ),
        ),
      ],
    ),

点击之前的结果屏幕->；

点击后的结果屏幕->；

这篇关于颤振中不同类型的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！