Flutter Expansion Tile -- Header 颜色变化，尾随动画箭头颜色变化

Question

我已经使用 Expansion Tile 生成了 Expansion List View。我在 Expansion Tile Header.

中遇到了一些自定义问题

下面是我的代码。

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

我低于结果。

下面是我期待的内容。

如果有人知道自定义 header 颜色的解决方法，请指教。

Answer 1

如果您查看 ExpansionTitle 的源代码，您会注意到 header 项是一个 ListTile ，因此您无法更改背景，因为它没有 parent一种颜色属性。我稍微修改了 class 以支持您的需要。

将此文件添加到您的项目中：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 有很多开箱即用的 Widget，但如果其中任何一个不适合您的需要，您将不得不检查源代码并创建自己的 widget。

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"),
        ],
      )
    ],
  ),
)

与其复制完整的 class 进行自定义，不如查看源代码，您可以找到更多要覆盖的 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;

如果你想要一个更具动画效果的小部件或其他东西，我会推荐 diegoveper 的答案。否则，直接用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() 小部件中，因为它们具有颜色属性。缺点是扩展的背景和标题都会有颜色，但如果你为 child 卡片设置颜色，它们将不会受到 parent 的影响，所以它们可能是颜色随心所欲。

Answer 5

要更改尾随箭头图标的颜色，您可以使用主题包裹扩展图块并使主题变亮，并将访问颜色和原色设置为深色，这样就可以了。

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.

中

完成此操作后，您可以将背景颜色更改为您喜欢的任何颜色。在我的例子中，我对 ExpansionTile 内部的 ListTiles 做了同样的事情，这样 header 可以有一种颜色，children 可以有另一种颜色。

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

我认为这比通过文档挖掘以查找哪些主题元素对应于各个 ListTile 参数更容易。

Answer 8

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

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

Answer 9

ExpansionTile好像变了，现在可以直接配置很多颜色了。例如，对于箭头：

    return ExpansionTile(
      // sets the color of the arrow when collapsed
      collapsedIconColor: Colors.red,
      // sets the color of the arrow when expanded
      iconColor: Colors.green,
    );

Flutter Expansion Tile -- Header 颜色变化，尾随动画箭头颜色变化

Flutter Expansion Tile -- Header Color Change, and Trailing Animated Arrow Color Change

dart

flutter

flutter-layout