我正在尝试在Flutter中设置ExpansionPanel的样式,但该颜色不适用于整个面板。我已经尝试了Container和Card窗口小部件,颜色没有更新。有任何想法吗?我想添加背景色以覆盖整个ExpansionPanel。有没有一种方法可以将父主题添加到ExpansionPanel。


Card(
  elevation: 2.0,
  color: Theme.of(context).primaryColor,
  margin: EdgeInsets.only(left: 10.0,right: 10.0,top: 10.0),
  child: ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _items[index].isExpanded = !_items[index].isExpanded;
        Timer(Duration(milliseconds: 200), () {
          setState(() {
            _reconfigureFAB();
          });
        });
      });
    },
    children: _items.map((IncludedItem item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return Container(
            padding: EdgeInsets.only(left: 18.0),
            child: Row(children: [
              Text(
                "What's included",
                textAlign: TextAlign.start,
                style: TextStyle(
                    fontFamily: 'Bold',
                    fontSize: 33.0,
                    color: Theme.of(context).backgroundColor),
              ),
            ]),
          );
          ;
        },
        isExpanded: item.isExpanded,
        body: Container(
          child: Text("body"),
        ),
      );
    }).toList(),
  ),
);

容器
Container(
  color: Theme.of(context).primaryColor,
  margin: EdgeInsets.only(left: 10.0,right: 10.0,top: 10.0),
  child: ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _items[index].isExpanded = !_items[index].isExpanded;
        Timer(Duration(milliseconds: 200), () {
          setState(() {
            _reconfigureFAB();
          });
        });
      });
    },
    children: _items.map((IncludedItem item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return Container(
            padding: EdgeInsets.only(left: 18.0),
            child: Row(children: [
              Text(
                "What's included",
                textAlign: TextAlign.start,
                style: TextStyle(
                    fontFamily: 'Bold',
                    fontSize: 33.0,
                    color: Theme.of(context).backgroundColor),
              ),
            ]),
          );
          ;
        },
        isExpanded: item.isExpanded,
        body: Container(
          child: Text("body"),
        ),
      );
    }).toList(),
  ),
);

最佳答案

ExpansionPanelList使用主题中的cardColor颜色。
您可以在MaterialApp(theme属性)中指定它,或在小部件中覆盖它:

Container(
          color: Theme.of(context).primaryColor,
          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
          child: Theme(
            data: Theme.of(context).copyWith(cardColor: Colors.red),
            child: ExpansionPanelList(
                ...

flutter - 如何在Flutter中为ExpansionPanel添加背景色-LMLPHP

10-08 03:35