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

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.dart 的更新更改 expand_icon 颜色的任何人如果面板颜色较深，您可以将主题亮度更改为深色。这会将图标颜色更改为 white54。 link - 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

Answer 3

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

Answer 4

我尝试按照上面的建议使用 Brightness.dark 更改下拉箭头颜色，但它对我不起作用。奇怪的是：disabledColor: const Color(0xFF000000)

Yolo，我会保留它直到下一次应用更新

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

How to add background color for ExpansionPanel in Flutter

expansion

flutter

flutter-layout