如何在Flutter中实现CSS p:first-of-type同等的首段落样式效果

Flutter没有内置类似CSS :first-of-type 的伪类选择器，要实现和你给出的CSS效果完全一致的首段落样式，可根据使用场景选择对应实现方式：

场景1：固定布局的多段落内容 #

直接给第一个Text组件单独设置字重属性即可：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 首个段落
    Text(
      '首个段落内容',
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w600, // 对应CSS的font-weight: 600
      ),
    ),
    SizedBox(height: 12),
    // 后续段落使用默认样式
    Text(
      '第二个段落内容',
      style: TextStyle(fontSize: 16),
    ),
    SizedBox(height: 12),
    Text(
      '第三个段落内容',
      style: TextStyle(fontSize: 16),
    ),
  ],
)

场景2：动态渲染段落列表 #

如果段落是从接口、富文本解析等动态获取的列表，遍历的时候通过索引判断单独给首个段落设置样式即可：

// 动态段落数据源示例
final List<String> paragraphList = [
  '第一个动态段落内容',
  '第二个动态段落内容',
  '第三个动态段落内容'
];

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: List.generate(paragraphList.length, (index) {
      return Padding(
        padding: const EdgeInsets.only(bottom: 12),
        child: Text(
          paragraphList[index],
          style: TextStyle(
            fontSize: 16,
            // 仅索引为0的首个段落设置w600字重
            fontWeight: index == 0 ? FontWeight.w600 : FontWeight.normal,
          ),
        ),
      );
    }),
  );
}

如果你使用第三方富文本渲染库渲染HTML内容，也可以通过同样的索引判断逻辑，在自定义样式配置中给首个p标签设置600字重。

内容的提问来源于stack exchange，提问作者Paul Arnaud Deguenon