Question

我正在尝试在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(),
  ),
);

Answer 1

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

Answer 2

任何想要更改expand_icon颜色的人-根据对expand_icon.dart的更新如果面板颜色较深，则可以将主题亮度更改为暗。这会将图标颜色更改为white54。链接-https://github.com/flutter/flutter/pull/21328/commits/56bc3b066fbfc331619c72b82c0f657000076514

void main() => runApp(new MaterialApp(
home: new HomePage(),
theme: new ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
    accentColor: Color(0xFF0277BD),
   textTheme: new TextTheme(
       body1:new TextStyle(color: Colors.white),
   ),
    ))

图片-enter image description here

如何在Flutter中为ExpansionPanel添加背景颜色

2 个答案: