Flutter Expansion Tile -- 标题颜色变化和尾随动画箭头颜色变化 [英] Flutter Expansion Tile -- Header Color Change, and Trailing Animated Arrow Color Change

问题描述

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

I have used the Expansion Tile to generate a Expansion List View. I'm facing some customization issues in 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,
)

我得到了低于结果.

下面是我所期望的.

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

If anyone know a workaround to customize the header color, please advice.

推荐答案

如果查看 ExpansionTitle 的源码，你会发现 header 项是 ListTile ，所以你不能改变背景，因为它没有't 具有颜色属性的父级.我修改了一些类以支持您的需要.

If you check the source code of the ExpansionTitle , you will notice that the header item is a ListTile , so you can't change the background because it hasn't a parent with a color property. I modified a little the class to support what you need.

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

Add this file to your project: https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c

并像这样导入，避免因为同名而发生冲突.

And import like this way to avoid conflicts because the same name.

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

我设置了一个别名自定义"，但您可以更改任何别名.

I put an alias 'custom' but you can change for any alias.

用法:

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

请记住，Flutter 有很多开箱即用的小部件，但如果其中任何一个不符合您的需求，您必须检查源代码并创建自己的小部件.

Remember, Flutter has a lot of Widgets out of the box, but If any of them don't fit what you need, you'll have to check the source code and create your own widget.

这篇关于Flutter Expansion Tile -- 标题颜色变化和尾随动画箭头颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！