Question

am试图制作ExpansionPanelList ..的列表，但我想给标题提供一种其颜色与主体颜色不同的颜色..有没有办法实现这一目标？

更新：

例如：

如屏幕截图所示。.我已成功更改标题颜色..但我还需要更改主体的颜色...

这是我的代码：

 const double _kPanelHeaderCollapsedHeight = 45.0;
 const double _kPanelHeaderExpandedHeight = 45.0;

 class CustomExpansionPanelList extends StatelessWidget {
 const CustomExpansionPanelList(
  {Key key,
  this.children: const <ExpansionPanel>[],
  this.expansionCallback,
  this.animationDuration: kThemeAnimationDuration})
  : assert(children != null),
    assert(animationDuration != null),
    super(key: key);

 final List<ExpansionPanel> children;

 final ExpansionPanelCallback expansionCallback;

 final Duration animationDuration;

bool _isChildExpanded(int index) {
return children[index].isExpanded;
}

@override
Widget build(BuildContext context) {
final List<Widget> items = <Widget>[];
const EdgeInsets kExpandedEdgeInsets = const EdgeInsets.symmetric(
    vertical: _kPanelHeaderExpandedHeight - _kPanelHeaderCollapsedHeight);

for (int index = 0; index < children.length; index += 1) {
  if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1))
    items.add(new Divider(
      key: new _SaltedKey<BuildContext, int>(context, index * 2 - 1),
      height: 15.0,
      color: Colors.transparent,
    ));

  final Row header = new Row(
    children: <Widget>[
      new Container(
        margin: const EdgeInsetsDirectional.only(end: 0.0),
        child: new ExpandIcon(
          isExpanded: _isChildExpanded(index),
          padding: const EdgeInsets.all(0.0),
          onPressed: (bool isExpanded) {
            if (expansionCallback != null)
              expansionCallback(index, isExpanded);
          },
        ),
      ),
      new Expanded(
        child: new AnimatedContainer(
          duration: animationDuration,
          curve: Curves.fastOutSlowIn,
          margin: _isChildExpanded(index)
              ? kExpandedEdgeInsets
              : EdgeInsets.zero,
          child: new SizedBox(
            height: _kPanelHeaderCollapsedHeight,
            child: children[index].headerBuilder(
              context,
              children[index].isExpanded,
            ),
          ),
        ),
      ),
    ],
  );

  double _radiusValue = _isChildExpanded(index) ? 8.0 : 8.0;
  items.add(
    new Padding(
      padding: EdgeInsets.only(bottom: 10),
      child: new Container(
        key: new _SaltedKey<BuildContext, int>(context, index * 2),
        child: new Material(
          elevation: 2.0,
          borderRadius:
              new BorderRadius.all(new Radius.circular(_radiusValue)),
          child: new Column(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: const Radius.circular(8.0),
                      topRight: const Radius.circular(8.0)),
                  color: globals.header,
                ),
                child: header,
              ),
              new AnimatedCrossFade(
                firstChild: new Container(height: 0.0),
                secondChild: children[index].body,
                firstCurve:
                    const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                secondCurve:
                    const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                sizeCurve: Curves.fastOutSlowIn,
                crossFadeState: _isChildExpanded(index)
                    ? CrossFadeState.showSecond
                    : CrossFadeState.showFirst,
                duration: animationDuration,
              ),
            ],
          ),
        ),
      ),
    ),
  );

  if (_isChildExpanded(index) && index != children.length - 1)
    items.add(new Divider(
      key: new _SaltedKey<BuildContext, int>(context, index * 2 + 1),
      height: 15.0,
    ));
}

return new Column(
  children: items,
);
 }
}

 class _SaltedKey<S, V> extends LocalKey {
 const _SaltedKey(this.salt, this.value);

 final S salt;
 final V value;

 @override
 bool operator ==(dynamic other) {
 if (other.runtimeType != runtimeType) return false;
 final _SaltedKey<S, V> typedOther = other;
 return salt == typedOther.salt && value == typedOther.value;
 }

 @override
 int get hashCode => hashValues(runtimeType, salt, value);

 @override
 String toString() {
final String saltString = S == String ? '<\'$salt\'>' : '<$salt>';
final String valueString = V == String ? '<\'$value\'>' : '<$value>';
return '[$saltString $valueString]';
}
}

现在我已经到了这一点..我根据自己的需要做了一个自定义类..但是我不知道如何改变身体的颜色？例如我想要它是蓝色的..该怎么做？

Answer 1

您可以执行与标头相同的操作，只需将主体包裹在具有指定颜色的Container中即可。

工作示例：

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomExpansionPanelList(
          expansionCallback: (index, isExpanded) {
            print("$index: expanded=$isExpanded");
          },
          children: [
            ExpansionPanel(
              isExpanded: true,
              headerBuilder: (context, isExpanded) {
                return Text("Header");
              },
              body: Center(
                child: Text("Hello"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

const double _kPanelHeaderCollapsedHeight = 45.0;
const double _kPanelHeaderExpandedHeight = 45.0;

class CustomExpansionPanelList extends StatelessWidget {
  const CustomExpansionPanelList(
      {Key key,
      this.children: const <ExpansionPanel>[],
      this.expansionCallback,
      this.animationDuration: kThemeAnimationDuration})
      : assert(children != null),
        assert(animationDuration != null),
        super(key: key);

  final List<ExpansionPanel> children;

  final ExpansionPanelCallback expansionCallback;

  final Duration animationDuration;

  bool _isChildExpanded(int index) {
    return children[index].isExpanded;
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> items = <Widget>[];
    const EdgeInsets kExpandedEdgeInsets = const EdgeInsets.symmetric(
        vertical: _kPanelHeaderExpandedHeight - _kPanelHeaderCollapsedHeight);

    for (int index = 0; index < children.length; index += 1) {
      if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1))
        items.add(new Divider(
          key: new _SaltedKey<BuildContext, int>(context, index * 2 - 1),
          height: 15.0,
          color: Colors.transparent,
        ));

      final Row header = new Row(
        children: <Widget>[
          new Container(
            margin: const EdgeInsetsDirectional.only(end: 0.0),
            child: new ExpandIcon(
              isExpanded: _isChildExpanded(index),
              padding: const EdgeInsets.all(0.0),
              onPressed: (bool isExpanded) {
                if (expansionCallback != null) {
                  expansionCallback(index, isExpanded);
                }
              },
            ),
          ),
          new Expanded(
            child: new AnimatedContainer(
              duration: animationDuration,
              curve: Curves.fastOutSlowIn,
              margin: _isChildExpanded(index)
                  ? kExpandedEdgeInsets
                  : EdgeInsets.zero,
              child: new SizedBox(
                height: _kPanelHeaderCollapsedHeight,
                child: children[index].headerBuilder(
                  context,
                  children[index].isExpanded,
                ),
              ),
            ),
          ),
        ],
      );

      double _radiusValue = _isChildExpanded(index) ? 8.0 : 8.0;
      items.add(
        new Padding(
          padding: EdgeInsets.only(bottom: 10),
          child: new Container(
            key: new _SaltedKey<BuildContext, int>(context, index * 2),
            child: new Material(
              elevation: 2.0,
              borderRadius:
                  new BorderRadius.all(new Radius.circular(_radiusValue)),
              child: new Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(8.0),
                          topRight: const Radius.circular(8.0)),
                      color: Colors.red,
                    ),
                    child: header,
                  ),
                  new AnimatedCrossFade(
                    firstChild: new Container(height: 0.0),
                    /*** START - NEW CODE ***/
                    secondChild: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                            bottomLeft: const Radius.circular(8.0),
                            bottomRight: const Radius.circular(8.0)),
                        color: Colors.blue,
                      ),
                      child: children[index].body,
                    ),
                    /*** END - NEW CODE ***/
                    firstCurve:
                        const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                    secondCurve:
                        const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                    sizeCurve: Curves.fastOutSlowIn,
                    crossFadeState: _isChildExpanded(index)
                        ? CrossFadeState.showSecond
                        : CrossFadeState.showFirst,
                    duration: animationDuration,
                  ),
                ],
              ),
            ),
          ),
        ),
      );

      if (_isChildExpanded(index) && index != children.length - 1)
        items.add(new Divider(
          key: new _SaltedKey<BuildContext, int>(context, index * 2 + 1),
          height: 15.0,
        ));
    }

    return new Column(
      children: items,
    );
  }
}

为ExpansionPanelList的标题和正文提供不同的颜色

1 个答案: