Flutter：ExpansionPanelList圆角边框边角未着色问题求助

你当前的问题是外层容器的圆角被ExpansionPanel的默认白色背景遮挡，且面板本身未配置圆角与边框样式，导致边角没有颜色。以下是具体解决方法和修改后的代码：

核心思路 #

1. 让ExpansionPanel本身适配圆角，避免外层容器的圆角被面板背景覆盖
2. 通过Theme统一配置面板的边框颜色、圆角参数，无需逐个面板设置
3. 可选优化：让首尾面板保留完整圆角，中间面板无缝衔接

修改后的完整代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.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(),
      ),
    );
  }
}

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<Item> _data = generateItems(8);
  final double _borderRadius = 20;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Theme(
        data: Theme.of(context).copyWith(
          expansionPanelTheme: ExpansionPanelThemeData(
            // 设置面板边框颜色
            borderColor: Colors.red,
            // 面板背景色与页面背景统一，避免遮挡圆角
            backgroundColor: Theme.of(context).scaffoldBackgroundColor,
            // 收起状态下的圆角
            collapsedBorderRadius: BorderRadius.circular(_borderRadius),
            // 展开状态下的圆角
            expandedBorderRadius: BorderRadius.circular(_borderRadius),
          ),
        ),
        child: ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _data[index].isExpanded = !isExpanded;
            });
          },
          children: _data.map<ExpansionPanel>((Item item) {
            int index = _data.indexOf(item);
            return ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text(item.headerValue),
                );
              },
              body: ListTile(
                  title: Text(item.expandedValue),
                  subtitle: const Text('要删除此面板，请点击垃圾桶图标'),
                  trailing: const Icon(Icons.delete),
                  onTap: () {
                    setState(() {
                      _data.removeWhere((Item currentItem) => item == currentItem);
                    });
                  }),
              isExpanded: item.isExpanded,
              // 可选优化：首尾面板保留完整圆角，中间面板无缝衔接
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(index == 0 ? _borderRadius : 0),
                topRight: Radius.circular(index == 0 ? _borderRadius : 0),
                bottomLeft: Radius.circular(index == _data.length -1 ? _borderRadius : 0),
                bottomRight: Radius.circular(index == _data.length -1 ? _borderRadius : 0),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键修改说明 #

• 移除了外层带边框的Container，改用Theme配置ExpansionPanel的样式，彻底解决背景遮挡问题
• 通过expansionPanelTheme统一设置边框颜色、背景色和圆角参数，所有面板样式保持一致
• 可选的borderRadius配置，让首尾面板显示完整圆角，中间面板取消上下圆角，实现整体无缝衔接的视觉效果

内容的提问来源于stack exchange，提问作者Francesco - FL