求Flutter中水平可滚动ListViewBuilder选中值高亮的逻辑/代码

核心思路 #

通过维护一个选中状态变量，在ListView.builder构建每个列表项时，根据当前项是否为选中项切换样式（如背景色、文字颜色），点击列表项时更新选中状态，即可实现仅高亮选中值的效果。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<HighlightSelectedNumberList> createState() => _HighlightSelectedNumberListState();
}

class _HighlightSelectedNumberListState extends State<HighlightSelectedNumberList> {
  // 存储当前选中的数字，初始可设为null（无选中）或列表首个元素
  int? selectedNumber;
  // 模拟数字列表数据源
  final List<int> numbers = List.generate(20, (index) => index + 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("选中高亮数字列表")),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Container(
          height: 60,
          color: Colors.grey[100],
          padding: const EdgeInsets.symmetric(horizontal: 10),
          // 水平滚动的ListView.builder
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: numbers.length,
            itemBuilder: (context, index) {
              final number = numbers[index];
              // 判断当前项是否为选中项
              final isSelected = selectedNumber == number;
              return GestureDetector(
                // 点击更新选中状态
                onTap: () {
                  setState(() {
                    selectedNumber = number;
                  });
                },
                child: Container(
                  width: 50,
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    // 根据选中状态切换背景色
                    color: isSelected ? Colors.blue : Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.grey[300]!),
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    "$number",
                    // 根据选中状态切换文字样式
                    style: TextStyle(
                      color: isSelected ? Colors.white : Colors.black87,
                      fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

关键逻辑说明 #

• 选中状态管理：用int? selectedNumber变量记录当前选中的数字，状态更新时通过setState触发UI重建。
• 样式切换：在itemBuilder中通过isSelected判断当前项是否被选中，以此切换背景色、文字颜色、字体粗细等样式，实现高亮区分。
• 交互处理：给每个列表项绑定GestureDetector，点击时更新选中状态，完成高亮切换。

扩展方向 #

• 若需多选功能，可将selectedNumber改为Set<int> selectedNumbers，点击时添加/移除数字，选中判断改为selectedNumbers.contains(number)。
• 可自定义高亮样式，比如添加阴影、边框颜色变化等，增强视觉反馈。

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