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

【问题标题】：How to add background color for ExpansionPanel in Flutter如何在 Flutter 中为 ExpansionPanel 添加背景颜色
【发布时间】：2018-12-21 18:25:11
【问题描述】：

我正在尝试在 Flutter 中设置 ExpansionPanel 的样式，但颜色不适用于整个面板。我已经尝试过 Container 和 Card 小部件，颜色没有更新。有任何想法吗？我想添加背景颜色以覆盖整个扩展面板。有没有办法将父主题添加到扩展面板。

卡片

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

【问题讨论】：

标签： flutter expansion flutter-layout

【解决方案1】：

ExpansionPanel 有一个名为 backgroundColor 的属性。您可以为此添加任何颜色，它看起来像这样：

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢！！我会记住的！！
有没有办法改变下拉图标的颜色？
@ShashiKiran 目前无法更改ExpandIcon的颜色：github.com/flutter/flutter/issues/18992
@KirillShashov 你怎么知道ExpansionPanelList 使用cardColor 颜色
@KirillShashov 如何仅更改标题的背景颜色？