Flutter：如何从 ExpansionPanelList 中删除高度？

Question

我试图像小部件一样列出下拉列表，但幸运的是找到了扩展面板列表小部件来获得我想要的用户体验。

所以，我在我的颤振应用程序中使用了 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

将您的整个扩展小部件子组件包裹在 材料小部件 中，并根据扩展子组件是否使用方法扩展来更改高度

   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 2

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

但是，如果您真的想这样做，有 2 个解决方案适合您，您可以创建自己的自定义 ExpansionPanelList，或者准备在源文件中添加几行。我为您提供后一种解决方案。

1. 打开expansion_panel.dart文件，进入_ExpansionPanelListState的build()方法，进行如下修改

   return MergeableMaterial(
     hasDividers: true,
     children: items,
     elevation: 0, // 1st add this line
   );
   

2. 现在打开mergeable_material.dart 文件，导航到_RenderMergeableMaterialListBody 类的_paintShadows 方法并进行以下更改：

   void _paintShadows(Canvas canvas, Rect rect) {
   
     // 2nd add this line
     if (boxShadows == null) return;
   
     for (final BoxShadow boxShadow in boxShadows) {
       final Paint paint = boxShadow.toPaint();
       canvas.drawRRect(kMaterialEdges[MaterialType.card].toRRect(rect), paint);
     }
   }
   

---

截图：

Answer 3

只需添加这一行：

ExpansionPanelList(
      elevation: 0, // this line
      expansionCallback: ...

Answer 4

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

https://dartpad.dev/0412a5ed17e28af4a46f053ef0f7a5c2

Answer 5

我会将其包装在 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 6

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

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