如何在ExpansionPanelList.radio主体中完整显示ListView.separated所有项？

你遇到的问题有两个核心原因，直接修正就能解决：

1. 子ListView的标题传递错误 #

原来的MyOwnListView被错误传入了单个标题，导致所有列表项都显示同一内容；同时_getMyItems里的index变量完全多余，会导致每次只取列表的第一个元素。

2. 嵌套ListView的高度与滚动冲突 #

外层已经有ListView，内层ListView.separated没设置自适应高度，加上给body套了固定高度的SizedBox，导致只能显示部分内容。

修正后的完整代码 #

final _firstCodeTitles = [
  "Open Account",
  "Activate USSD",
  "Deactivate USSD",
  "Activate Payment",
];

final _secondCodeTitles = [
  "Customer Care 1",
  "Customer Care 2",
  "Customer Care 3",
  "Customer Care 4",
];

List<MyItems> _getMyItems() {
  return [
    MyItems(
      title: "First Plans",
      body: MyOwnListView(titles: _firstCodeTitles),
    ),
    MyItems(
      title: "Second Plans",
      body: MyOwnListView(titles: _secondCodeTitles),
    ),
  ];
}

class MyMainScreen extends StatefulWidget {
  const MyMainScreen({
    super.key,
  });

  @override
  State<MyMainScreen> createState() => _MyMainScreenState();
}

class _MyMainScreenState extends State<MyMainScreen> {
  @override
  Widget build(BuildContext context) {
    final List<MyItems> items = _getMyItems();

    return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          Column(
            children: [
              ExpansionPanelList.radio(
                elevation: 6,
                expandedHeaderPadding: const EdgeInsets.all(8.0),
                dividerColor: Colors.teal,
                children: items.map<ExpansionPanelRadio>((MyItems myItems) {
                  return ExpansionPanelRadio(
                    value: myItems.title,
                    canTapOnHeader: true,
                    backgroundColor: const Color(0xffeeeeff),
                    headerBuilder: (context, isExpanded) {
                      return ListTile(
                        title: Text(myItems.title),
                      );
                    },
                    // 去掉固定高度的SizedBox，让body自适应内容
                    body: myItems.body,
                  );
                }).toList(),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MyItems {
  MyItems({
    required this.title,
    required this.body,
    this.isExpanded = false,
  });
  String title;
  Widget body;
  bool isExpanded;
}

class MyOwnListView extends StatelessWidget {
  const MyOwnListView({
    super.key,
    required this.titles, // 修改为接收整个标题列表
  });

  final List<String> titles;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      // 让ListView自适应内容高度
      shrinkWrap: true,
      // 禁用子ListView的滚动，避免和外层滚动冲突
      physics: const NeverScrollableScrollPhysics(),
      itemCount: titles.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text(titles[index]), // 遍历显示每个标题
          ),
        );
      },
      separatorBuilder: (context, index) => const Divider(),
    );
  }
}

关键修改点说明 #

• 移除了多余的index状态变量，修改_getMyItems直接传递完整的标题列表给MyOwnListView
• 重构MyOwnListView的参数，接收整个标题列表，遍历显示每个项
• 去掉了ExpansionPanelRadio body里固定高度的SizedBox，让内容自适应
• 给内层ListView.separated添加shrinkWrap: true（自适应高度）和physics: NeverScrollableScrollPhysics()（禁用独立滚动），解决嵌套滚动冲突

内容的提问来源于stack exchange，提问作者Diraph