Flutter中如何在元素间添加点分隔符（仿YouTube样式）

方法一：基础Wrap+手动插入分隔符 #

适合固定数量的元素，快速实现效果：

Wrap(
  spacing: 8.0, // 元素与分隔符的间距
  runSpacing: 4.0, // 换行后的行间距
  children: const [
    Text('科技', style: TextStyle(fontSize: 14)),
    Text('•', style: TextStyle(fontSize: 16, color: Colors.grey)),
    Text('科普', style: TextStyle(fontSize: 14)),
    Text('•', style: TextStyle(fontSize: 16, color: Colors.grey)),
    Text('2024', style: TextStyle(fontSize: 14)),
  ],
)

方法二：封装可复用组件 #

如果需要多处使用，封装成通用组件更高效：

class DotSeparatorWrap extends StatelessWidget {
  final List<Widget> items;
  final Widget separator;
  final double spacing;

  const DotSeparatorWrap({
    super.key,
    required this.items,
    this.separator = const Text('•', style: TextStyle(color: Colors.grey)),
    this.spacing = 8.0,
  });

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: spacing,
      children: _insertSeparators(),
    );
  }

  List<Widget> _insertSeparators() {
    if (items.isEmpty) return [];
    final result = <Widget>[];
    for (int i = 0; i < items.length; i++) {
      result.add(items[i]);
      if (i != items.length - 1) result.add(separator);
    }
    return result;
  }
}

// 使用示例
DotSeparatorWrap(
  items: const [
    Text('科技'),
    Text('科普'),
    Text('2024'),
  ],
)

方法三：处理动态数据列表 #

如果元素是接口返回的动态列表，可通过遍历自动插入分隔符：

final List<String> dynamicTags = ['科技', '科普', '2024', '数码'];

// 构建动态分隔列表
Wrap(
  spacing: 8.0,
  children: dynamicTags.asMap().entries.map((entry) {
    final index = entry.key;
    final tag = entry.value;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(tag),
        if (index != dynamicTags.length - 1)
          const Text('•', style: TextStyle(color: Colors.grey)),
      ],
    );
  }).toList(),
)

注意事项 #

• 用Wrap替代Row可避免元素过多时溢出屏幕，自动换行适配不同屏幕
• 可根据需求自定义分隔符的颜色、大小，甚至换成图标
• 若需要点击交互，将Text替换为GestureDetector或InkWell即可

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