颤振问题：如何改变 ExpansionTile 的颜色？

Question

我想在“ExpansionTile”打开时更改颜色。 当我打开我的 ExpansionTile 时，此时我得到了白色背景，但打开后我想要浅灰色，看起来像我的第一个屏幕截图 这是我的代码。

我也想增加我的图标大小怎么可能（向上向下箭头）？

import 'package:cwc/constants/constants.dart';
import 'package:flutter/material.dart';

import '../skeleton.dart';

class FAQPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FAQPageState();
  }
}

class FAQPageState extends State<FAQPage> {
  bool isExpand = false;
  var selected;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    isExpand = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff6f7f9),
      appBar: AppBar(
          leading: InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(
                Icons.arrow_back,
                color: Colors.black,
                size: tSize24,
              )),
          centerTitle: true,
          backgroundColor: Colors.white,
          title: Text(
            "FAQs",
            style: TextStyle(color: Colors.black, fontSize: tSize24),
          )),
      body: isFAQLoading == true
          ? ButtonSkeleton()
          : ListView.builder(
              itemCount: faqListData.length,
              itemBuilder: (context, index) {
                return Column(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.grey.shade200,
                                  offset: Offset(1.0, 1.0),
                                  spreadRadius: 0.2)
                            ]),
                        child: Card(
                          elevation: 0,
                          shadowColor: Colors.grey,
                          margin: EdgeInsets.only(
                            bottom: 3,
                          ),
                          child: ExpansionTile(
                              key: Key(index.toString()),
                              //attention
                              initiallyExpanded: index == selected,
                              iconColor: Colors.grey,
                              title: Text(
                                '${faqListData[index]['question']}',
                                style: TextStyle(
                                    color: Color(0xFF444444),
                                    fontSize: tSize14,
                                    fontWeight: FontWeight.w500),
                              ),
                              children: <Widget>[
                                Padding(
                                    padding: EdgeInsets.only(top: 10.0,bottom: 10,left: 17,right: 17),
                                    child: Row(mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${faqListData[index]['answer']}",
                                          style: TextStyle(
                                            color: Color(0xFF444444),
                                            fontSize: 13,
                                          ),
                                          textAlign: TextAlign.start,
                                        ),
                                      ],
                                    ))
                              ],
                              onExpansionChanged: ((newState) {
                                isExpand = newState;
                                print(newState);
                                if (newState)
                                  setState(() {
                                    Duration(seconds: 20000);
                                    selected = index;
                                    // isExpand=newState;
                                  });
                                else
                                  setState(() {
                                    selected = -1;
                                    // isExpand=newState;
                                  });
                                print(selected);
                              })),
                        ),
                      ),
                    ]);
              }),
    );
  }
}

当 ExpansionTile 打开时我想要这样然后我的颜色应该是浅灰色

但是当我打开我的 ExpansionTile 时，我得到了这样的（白色）

Answer 1

将backgroundColor and/or collapsedBackgroundColor设置为你喜欢的样子：

ExpansionTile(
          title: Text('ExpansionTile 1'),
          backgroundColor: Colors.red,
          collapsedBackgroundColor: Colors.blue,
          subtitle: Text('Trailing expansion arrow icon'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 1')),
          ],
        ),

文档： https://api.flutter.dev/flutter/material/ExpansionTile-class.html

Answer 2

///you can set background colour and ExpansionTile has trailing property you can use it for the icon you can use material icons also and increase your icon size accordingly in icon widget 

    import 'package:flutter/material.dart';
    
    class X extends StatefulWidget {
      const X({Key? key}) : super(key: key);
    
      @override
      _XState createState() => _XState();
    }
    
    class _XState extends State<X> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: ExpansionTile(
            backgroundColor: Colors.grey[100],
            initiallyExpanded: true,
            trailing: Icon(Icons.keyboard_arrow_down_sharp),
            iconColor: Colors.grey,
            subtitle: Text(
              "subtitle",
              style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.normal
              ),
            ),
            title: Text(
              "Simple expansion tile",
              style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold
              ),
            ),
            children: [
    
              ListTile(
                title: Text(
                  'body',
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.normal
                  ),
                ),
              )
            ],
          ),
        );
      }
    }