Question

我已使用扩展图块生成扩展列表视图。我在扩展图块标题中遇到了一些自定义问题。

下面是我的代码。

ExpansionTile(           
    title: Container(
        child: Text(
            getCategory(i),
            style: TextStyle(
            color: Colors.white,
            ),
        ),
        color: Colors.black
    ),

    children: <Widget>[
        new Container(
            height: 60.0,
            margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 10.0),
            decoration: BoxDecoration(                    
            color: Colors.blue,
            borderRadius: new BorderRadius.all(  Radius.circular(5.0) ),
            ),
        ),
        new Container(
            height: 60.0,
            margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 0.0),
            decoration: BoxDecoration(                    
            color: Colors.green,
            borderRadius: new BorderRadius.all(  Radius.circular(5.0) ),
            ),
        )
    ],
    backgroundColor: Colors.white,
)

我的成绩低于预期。

我期望的是下面的东西。

如果有人知道解决方法来自定义标题颜色，请提出建议。

Answer 1

如果检查ExpansionTitle的源代码，您会注意到标题项是ListTile，因此您不能更改背景，因为它没有具有color属性的父项。我对类进行了一些修改以支持您的需求。

将此文件添加到您的项目中：https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c

并以这种方式导入以避免名称相同。

    import 'package:nameofyourapp/custom_expansion_tile.dart' as custom;

我将别名设置为“ custom”，但您可以更改任何别名。

用法：

    custom.ExpansionTile(
              headerBackgroundColor: Colors.black,
              iconColor: Colors.white,
              title: Container(
              ...

请记住，Flutter内置了许多小部件，但是如果其中任何一个都不符合您的需要，则必须检查源代码并创建自己的小部件。

Answer 2

我认为，更可取的方法是用新的Theme包装它，以便它可以按预期工作：

Theme(
  data: Theme.of(context).copyWith(accentColor: ColorPalette.fontColor, unselectedWidgetColor:  ColorPalette.fontColor..withOpacity(0.8)),
  child: ListView(
    children: <Widget>[
      ExpansionTile(
        title: Text("Padding"),
        children: <Widget>[
          Text("Left"),
          Text("Top"),
          Text("Right"),
          Text("Bottom"),
        ],
      )
    ],
  ),
)

检查源代码，而不是复制完整的类以进行自定义，您可以找到更多要覆盖的Theme属性。

    _borderColorTween
      ..end = theme.dividerColor;
    _headerColorTween
      ..begin = theme.textTheme.subhead.color
      ..end = theme.accentColor;
    _iconColorTween
      ..begin = theme.unselectedWidgetColor
      ..end = theme.accentColor;
    _backgroundColorTween
      ..end = widget.backgroundColor;

如果您想要更具动画性的小部件或其他东西，我建议使用diegoveloper的答案。否则，只需用Theme包装它，这样就无需维护Component并获取本机的flutter组件。

Answer 3

我认为此解决方案比自定义列表磁贴更好。

  Widget customTheme(Widget child, BuildContext context) => Theme(
    data: Theme.of(context).copyWith(
        dividerColor: Colors.transparent,
        dividerTheme: DividerThemeData(
            color: Theme.of(context).colorScheme.background)),
    child: child,
  );

Code Gist

Answer 4

另一个可行的选择是将整个扩展图块和每个单独的容器都包装在Card（）小部件中，因为它们具有color属性。缺点是扩展的背景将与标题一起被着色，但是，如果您为子卡设置颜色，则它们不会受到父卡的影响，因此可以根据需要进行单独着色。

Answer 5

要更改后退箭头图标的颜色，您可以在扩展图块上包裹主题，并使主题变亮，并将accet颜色和原色设置为深色，这将起作用。

return Theme(
            data: ThemeData.light()
                .copyWith(accentColor: darkAccent, primaryColor: darkAccent),
            child: ExpansionTile(
              title: Text(
                data['number'],
                style:
                    TextStyle(color: darkAccent, fontWeight: FontWeight.bold),
              ),

Answer 6

我起诉了这个很棒的小插件，它比Flutter Material灵活得多。您可以更改背景和边框，并具有用于打开和关闭状态的自定义图标。 https://pub.dev/packages/configurable_expansion_tile

Answer 7

比建议的所有方法都简单得多的方法是将ExpansionTile封装在ListTileTheme中。

执行此操作后，可以将backgroundColor更改为所需的任何颜色。就我而言，我对ExpansionTile中的ListTiles做过同样的事情，以便标头可以使用一种颜色，而子项可以使用另一种颜色。

return ListTileTheme(
                  tileColor: Colors.grey.shade300,
                  child: ExpansionTile(
                    leading: Padding(
                      padding: const EdgeInsets.only(top:4.0),
                      child: Text('Outer Tile'),
                    ),
                    title: null,
                    children: [
                      Slidable(
                        actionPane: SlidableDrawerActionPane(),
                        child: ListTileTheme(
                          tileColor: Colors.white,
                          child: ListTile(
                            title: Text('Inner Tile'),
                            subtitle: Text('subtitle'),
                            leading: FlutterLogo(),
                          ),
                        ),
                      )
                    ],
                  ),
                );

我认为这比挖掘文档来查找哪些Theme元素对应于各个ListTile参数更容易。

Answer 8

关于箭头颜色的问题：注意它是一个 ExpandIcon，定义为 _ExpansionPanelListState.build() 中的 local Widget expandIconContainer。

当您的 ExpansionPanel 使用 canTapOnHeader: true 时，您会得到 ExpandIcon(onPressed: null)，因此用于 underlying IconButton 的颜色由 Theme#disabledColor 决定。

Flutter扩展图块-标头颜色更改和尾随动画箭头颜色更改

8 个答案: