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 小部件内，并根据扩展子项是否扩展来更改标高

   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(
      elevation: 0, // this line
      expansionCallback: ...

Answer 3

ExpansionPanelList首先，根据 Material Design 规范，不建议不使用海拔。

但是，如果您确实想这样做，有两种解决方案适合您，要么创建自己的自定义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);
     }
   }
   

截屏：