Flutter扩展图块-标头颜色更改和尾随动画箭头颜色更改 [英] 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,
)

我的成绩低于预期.

我期望的是下面的东西.

What I'm expecting to have is below.

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

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

推荐答案

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

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;

我将别名设置为"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扩展图块-标头颜色更改和尾随动画箭头颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！