Flutter展开状态ExpansionTile上下边框问题及消除方法

原因分析 #

你看到的展开状态下的上下边框，是ExpansionTile组件的默认Material Design样式：ExpansionTile在展开后，会自动在标题栏下方、内容区域底部添加分割线，用来区分不同区域，这是组件自带的默认行为。

解决方法 #

方法1：直接隐藏分割线（最简单）

给ExpansionTile添加dividerColor: Colors.transparent属性，把默认分割线设为透明，就能消除视觉上的边框：

ExpansionTile makeExpansionTile() => ExpansionTile(
      title: const Text("Title"),
      dividerColor: Colors.transparent, // 核心设置：隐藏分割线
      children: const <Widget>[Text("content")],
    );

方法2：通过Theme全局/局部移除分割线

如果需要更彻底地控制分割线样式（比如全局禁用这类分割线），可以用Theme组件包裹ExpansionTile，覆盖分割线的厚度为0：

Card makeCard() => Card(
      child: Container(
        child: Theme(
          data: ThemeData(
            dividerTheme: const DividerThemeData(thickness: 0), // 移除分割线厚度
          ),
          child: makeExpansionTile(),
        ),
      ),
    );

额外优化（可选）

如果Card和ExpansionTile之间存在细微的视觉间隙，可以调整Card的margin或者ExpansionTile的tilePadding参数来优化布局，比如给Card添加margin: EdgeInsets.zero，或者给ExpansionTile设置tilePadding: EdgeInsets.symmetric(horizontal: 16)来对齐内容。

内容的提问来源于stack exchange，提问作者Jaczura Zoltán