Flutter - 删除 ExpansionPanelList 中 headerBuilder 和 body 之间的间距

Question

我正在使用 ExpansionPanelList.radio 小部件。 如何删除或减少每个 ExpansionPanelRadio 小部件中 headerBuilder 和正文之间的间距？

该代码只是Flutter DartPad示例代码的修改版本。 每个 ExpansionPanelRadio 小部件都包含一个 ListView 构建器小部件。 我无法使用 Stack 小部件，因为它产生尺寸不有限/视口无界高度错误。

将

Transform.translate(offset: const Offset(0.0, -32.0), child: Text('ABCD')

放在 body() 中即可完成工作，但会在每个 ExpansionPanelRadio 小部件的底部留下 32 个单位的空闲空间。

我可以复制项目中特定的Flutter源文件并修改它们。但我不知道如何在 headerBuilder() 和正文之间添加空间。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    required this.id,
    required this.expandedValue,
    required this.headerValue,
  });

  int id;
  String expandedValue;
  String headerValue;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      id: index,
      headerValue: 'Panel $index',
      expandedValue: 'Panel $index: The quick brown fox jumps over the lazy dog.',
    );
  });
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 2,
      expandedHeaderPadding: const EdgeInsets.all(0.0),
      children: _data.map<ExpansionPanelRadio>((Item item) {
        return ExpansionPanelRadio(
            value: item.id,
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: SizedBox(
              height: 20.0,
              child: Text(item.expandedValue),
            )
        );
      }).toList(),
    );
  }
}

已尝试SO链接中给出的解决方案，但它仅删除当前扩展的ExpansionPanelRadio小部件之前/之后的空间。

有没有办法减少 headerBuilder 和 body 之间的间距？ 它在真实设备上显得更高。

Answer 1

有人找到解决办法吗？

Answer 2

你可以这样使用

    Transform.translate(
        offset: OffSet(0, -10), //you can change y value, like -10
        child: SizedBox(
          height: 20.0,
          child: Text(item.expandedValue),
        ),
      ),