Question

有没有办法为ExpansionTile应用自定义主题。在我的情况下，我想为扩展磁贴的标题和子项设置不同的背景颜色但是当ExpansionTile扩展时，标题背景颜色会改变为子颜色？

Answer 1

按照@ user3315892的想法，您可以为ExpansionTile实现自己的有状态小部件，以便可以控制标题展开或折叠时希望标题和子项使用的颜色。

以下示例仅在展开或折叠扩展图块时更改标题的文本前景色和背景色，但是您可以对子控件进行相同的操作。

class CustomExpansionTile extends StatefulWidget {
  @override
  State createState() => CustomExpansionTileState();
}

class CustomExpansionTileState extends State<CustomExpansionTile> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      title: Container(
        child: Text(
          "HEADER HERE",
          style: TextStyle(
            color: isExpanded ? Colors.pink : Colors.teal,
          ),
        ),
        // Change header (which is a Container widget in this case) background colour here.
        color: isExpanded ? Colors.orange : Colors.green,
      ),
      leading: Icon(
        Icons.face,
        size: 36.0,
      ),
      children: <Widget>[
        Text("Child Widget One"),
        Text("Child Widget Two"),
      ],
      onExpansionChanged: (bool expanding) => setState(() => this.isExpanded = expanding),
    );
  }
}

Answer 2

如果您希望ExpansionTile标题无论是关闭还是展开都保持相同的颜色，则可以设置其样式：

ExpansionTile(
  title: Text('HEADER HERE', style: TextStyle(color: Colors.red)),
  ...
),

ExpansionTile的其他样式是一个开放功能要求： Feature request: More styling of ExpansionTile #15427

Answer 3

要将自定义主题应用于任何窗口小部件，只需将其与Theme（）小部件一起包装即可。然后在小部件的数据字段中指定您的自定义主题。

Theme(
    data: ThemeData(/*specify your custom theme here*/),
    child: ExpansionTile() /*or any other widget you want to apply the theme to.*/
)

在您的情况下，要自定义ExpansionTile中的标头，

ExpansionTile关闭时


标题文本的样式，即标题取决于   ThemeData.textTheme.subhead

而箭头图标的样式取决于   在ThemeData.unselectedWidget
上

ExpansionTile打开时


两个小部件的颜色取决于ThemeData.accentColor

以类似的方式，您可以通过调整主题来自定义扩展图块的几乎任何部分。有关更多详细信息，check out this link。

由于颤动的建立要考虑到灵活性。您几乎可以做任何您想做的事。创建几乎任何您想要的UI。

Answer 4

您可以设置标题的颜色，然后在容器中设置body / children，并将颜色设置为该容器。

Answer 5

我使用此代码将尾随的离子色变为黑色。

 Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.black),
      child: ExpansionTile(
        backgroundColor: Colors.white,
        title: Text(
          'Title Exmample',
          style: TextStyle(color: Colors.black),
        ),
        leading: CircleAvatar(
            backgroundColor: Colors.black.withOpacity(.07),
            child: Icon(
              Icons.apps_outlined,
              color: Theme.of(context).primaryColor,
            )),
        children: _buildTiles(Theme.of(context).primaryColor, Colors.black.withOpacity(.07), context),
      ),
    );

Answer 6

我找到了另一种方法。我不知道这是否是最好的方法，但对我来说更简单。

要更改ExpansionTile颜色，可以用Container包裹它并为其指定颜色。这将更改ExpansionTile的整个颜色，包括折叠和展开。

但是，如果您想给孩子使用其他颜色，则也可以用“容器”包装它们，并在其中设置其他颜色。但是，请记住，必须“扩展”该Container才能占用所有可用空间（可以通过正确设置width和height参数来做到这一点）。

顺便说一句，这不会改变箭头的颜色。

Widget expansionTileTest(context) {
    return Container(
      color: Colors.grey,
      child: ExpansionTile(
        title: Text(
          "Title",
          style: TextStyle(color: Colors.black),
        ),
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * 0.1,
            width: MediaQuery.of(context).size.width,
            color: Colors.yellow,
            child: Center(child: Text("Hi")),
          ),
        ],
      ),
    );
  }

Collapsed

Expanded

Expansion Tile Header，Flutter的自定义样式或主题

6 个答案:

ExpansionTile关闭时

ExpansionTile打开时