Flutter中如何修改ExpansionTile展开时的标题文本样式？

API 探路者

2026-8-29

Flutter 自定义ExpansionTile展开状态下标题样式的实现方案

ExpansionTile没有内置直接设置展开时字体粗细的属性，你可以通过组件自带的展开状态回调，结合状态变量动态切换标题文本样式，实现展开时标题加粗的效果，具体步骤如下：

在对应State类中声明布尔状态变量，记录组件当前是否展开，初始值和组件初始展开状态保持一致即可（默认收起就设为false，设置了initiallyExpanded: true就设为true）

bool _isTileExpanded = false;

给ExpansionTile绑定onExpansionChanged回调，组件展开/收起时会触发这个回调，回调参数就是当前最新的展开状态，在回调里更新状态变量触发UI重建
给title属性传入的Text组件设置动态style，根据当前展开状态切换字体粗细，展开时设为加粗即可

修改后的完整代码如下：

return ExpansionTile(
  textColor: Colors.black,
  // 监听展开状态变化
  onExpansionChanged: (bool expanded) {
    setState(() {
      _isTileExpanded = expanded;
    });
  },
  title: Text(
    _fencingClubDataList[index].Name,
    style: TextStyle(
      // 展开时加粗，收起时使用常规字重
      fontWeight: _isTileExpanded ? FontWeight.bold : FontWeight.normal,
    ),
  ),
  expandedAlignment: Alignment.centerLeft,
  expandedCrossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Table(
      border: TableBorder.all(color: Colors.black),
      defaultVerticalAlignment: TableCellVerticalAlignment.top,
      children: [
        TableRow(children: [
          Text("This is"),
          Text("a sample."),
        ]),
      ],
    ),
  ],
);