flutter 问题: How to change color of 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 和/或 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