Question

我试图像小部件一样列出下拉列表，但是幸运的是找到了扩展面板列表小部件，以使我想要的UX得以体现。

因此，我在flutter应用程序中使用ExpansionPanelList，但不需要它随附的默认标高/边框阴影。

我不知道如何删除它，以使其看起来像是身体的一部分，而不是高架的容器。

当前看起来像这样：

以下是我的代码：

class _PracticetestComp extends State<Practicetest> {
  var listofpracticetest;
  List<Item> _data = [
    Item(
      headerValue: 'Previous Question Papers',
      expandedValue: '',
    )
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffF8FDF7),
        appBar: AppBar(
          backgroundColor: Color(0xffF8FDF7), // status bar color
          brightness: Brightness.light,
          elevation: 0.0,
          leading: Container(
            margin: EdgeInsets.only(left: 17),
            child: RawMaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              child: new Icon(
                Icons.keyboard_backspace,
                color: Colors.red[900],
                size: 25.0,
              ),
              shape: new CircleBorder(),
              elevation: 4.0,
              fillColor: Colors.white,
              padding: const EdgeInsets.all(5.0),
            ),
          ),
        ),
        body: Container(
          // height: 200,
          margin: EdgeInsets.only(top: 40),
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  Container(
                      margin: EdgeInsets.only(top: 30),
                      child: Theme(
                          data: Theme.of(context)
                              .copyWith(cardColor: Color(0xffF8FDF7)),
                          child: _buildPanelPreviousPapers()))
                ],
              )
            ],
          ),
        ));
  }

  Widget _buildPanelPreviousPapers() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = !isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: Container(

            child: ListTile(
              leading: Text(
                'Alegbra',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
              ),

              ),
            ),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    this.expandedValue,
    this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

Answer 1

首先，根据材料设计规范，不建议不要对ExpansionPanelList使用标高。

但是，如果您确实想要这样做，则有两种解决方案供您选择，要么创建自己的自定义ExpansionPanelList，要么准备向源文件添加几行。我为您提供后一种解决方案。

打开expansion_panel.dart文件，转到build()的{{1}}方法并进行以下更改
```
_ExpansionPanelListState
```
现在打开return MergeableMaterial( hasDividers: true, children: items, elevation: 0, // 1st add this line );文件，导航到mergeable_material.dart类的_paintShadows方法并进行以下更改：
```
_RenderMergeableMaterialListBody
```

屏幕截图：

Answer 2

不幸的是ExpansionPanelList高程已硬编码，但是您可以使用ExpansionTile制作相同的小部件，请查看此dartpad示例。

https://dartpad.dev/0412a5ed17e28af4a46f053ef0f7a5c2

Answer 3

将整个扩展小部件子级包装在材料小部件内，并根据扩展子级是否已使用方法更改扩展高度

   Material(
        elevation: isSelected ? 4 : 0,
        child: ExpansionTile(
         onExpansionChanged:(value){
                            isSelected=value;
                            setState(){};
                                   },

         title: getExpantionTitle(context),
          children: getChildrentList(),
              ),
            ),
        ),

如果您不喜欢ExpansionTile磁贴中的分隔线，请执行以下操作

        final theme = Theme.of(context).copyWith(dividerColor: 
        Colors.transparent);
     //use as a child 
 child:Theme(data: theme, child: ExpansionTile(...));

Answer 4

我会将其包装在ClipRect中。

  Widget _buildPanelPreviousPapers() {
    final panel = ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = !isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: Container(
            child: ListTile(
              leading: Text(
                'Alegbra',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
              ),

              ),
            ),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
    return ClipRect(child: panel);
  }

要更改默认卡片背景色，请添加主题覆盖：

    return ClipRect(
      child: Theme(
        data: Theme.of(context).copyWith(cardColor: Colors.pink),
        child: child,
      ),
    );

Answer 5

我能够在构造函数中设置 elevation（默认值为 2），也许这是最近的 API 更改：

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

Flutter：如何从ExpansionPanelList中移除海拔？

5 个答案: