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

Question

我曾尝试像小部件一样列出下拉列表，但幸运的是找到了扩展面板列表小部件以使我想要的用户体验感到。

因此，我在我的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使用标高。

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

1. 打开expansion_panel.dart文件，转到build()的_ExpansionPanelListState方法并进行以下更改

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

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

   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 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(...));