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

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

- Shashi Kiran

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

- Kirill Shashov

---

谢谢！我会记住的！ - Shashi Kiran

有没有办法改变下拉菜单图标的颜色？ - Shashi Kiran

@ShashiKiran 目前还没有办法更改 ExpandIcon 的颜色：https://github.com/flutter/flutter/issues/18992 - Kirill Shashov

@KirillShashov，你是怎么知道ExpansionPanelList使用了cardColor颜色的？ - Hicham

@KirillShashov 如何仅更改标题的背景颜色？ - Narayan Choudhary

@NarayanChoudhary 我已经很久没有使用Flutter了，但目前似乎无法控制整个标题的颜色（https://github.com/flutter/flutter/blob/0b5d99eae6174b54ecca0a3fef6ba69228adc552/packages/flutter/lib/src/material/expansion_panel.dart#L505）。他们只是执行“headerBuilder”并将结果插入标题。 - Kirill Shashov

Answer 2

ExpansionPanel 有一个名为 backgroundColor 的属性。您可以添加任何颜色，并且它会像这样显示：

ExpansionPanel(
          backgroundColor: Colors.green,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return const ListTile(
              title: Text("Quiz 0"),
            );
          },
          body: const ListTile(
            title: Text("body"),
          ),
          
        ),

- Gergő Csiszár

---

你的回答可以通过添加更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 3

对于想要更改expand_icon颜色的人- 根据更新到expand_icon.dart，如果面板颜色较暗，您可以将主题亮度更改为dark。这将把图标颜色更改为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),
   ),
    ))

图片 - 在此输入图片描述

- cindy

Answer 4

我尝试按照上面建议的方法使用 Brightness.dark 更改下拉箭头颜色，但对我无效。奇怪的是这个可以：disabledColor: const Color(0xFF000000)

随便一试，我会保留它直到下一个应用程序更新。

- GraSim