Flutter 中的自定义大纲下拉列表

Question

我想在 flutter 中重新创建此 drop-down 设计，但我发现很难将 DropDown 格式化为这样的格式。

Answer 1

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

为真或假语句声明布尔变量

bool? isExpanded;
bool expanded = false;

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

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

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

List<String> subTitle = [
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
  ];

您的小部件：

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        margin: EdgeInsets.all(10),
        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(
                    'Select Benificiary',
                    style: TextStyle(color: Colors.black),
                  ),
                );
              },
              body: Column(
                children: [
                  Divider(
                    height: 1,
                    color: Colors.green,
                  ),
                  ListView.builder(
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        leading: CircleAvatar(
                          child: Text(
                            data[index][0],
                          ),
                        ),
                        title: Text(
                          data[index],
                        ),
                        subtitle: Text(
                          subTitle[index],
                        ),
                      );
                    },
                    itemCount: data.length,
                  ),
                ],
              ),
              isExpanded: expanded,
              canTapOnHeader: true,
            ),
          ],
          dividerColor: Colors.grey,
          expansionCallback: (panelIndex, isExpanded) {
            expanded = !expanded;
            setState(() {});
          },
        ),
      ),
    ],
  ),

您的结果屏幕->

你的Dropdown/ExpansionList->

你可以参考我同样的回答here

Flutter 中的自定义大纲下拉列表

Custom Outline Dropdown in Flutter

dart

drop-down-menu

dropdown

flutter