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

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

在我看来，更可取的方法是用 new 包装它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，这样您就不需要维护组件，并获得原生的 flutter 组件。

Answer 2

比所有这些建议更简单的方法是将您的 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 3

如果检查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开箱即用的有很多小部件，但是如果其中任何一个都不符合您的需求，则必须检查源代码并创建自己的小部件。