dart - Flutter Expansion Tile -- 标题颜色变化，尾随动画箭头颜色变化

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

我得到低于结果。

下面是我期望的内容。

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

Answer 1

如果您检查 ExpansionTitle 的源代码，您会注意到 header 项是一个 ListTile ，因此您无法更改背景，因为它没有具有颜色属性的父项。我对类(class)进行了一些修改以支持您的需要。

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

然后像这样导入，避免同名冲突。

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

我输入了一个“自定义”别名，但您可以更改任何别名。

用法:

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

请记住，Flutter 有很多开箱即用的 Widget，但如果其中任何一个不适合您的需要，您将不得不检查源代码并创建您自己的 widget。