Flutter如何实现可左右滚动的运动鞋价格选择组件？

Slider组件更适合连续数值的选择，而你需要的是离散固定价格选项的横向滚动选择器，用横向滚动的列表组件实现更贴合需求，具体方案如下：

核心实现思路 #

• 用SingleChildScrollView或ListView.builder设置横向滚动方向，承载所有价格选项
• 为每个价格项设计选中/未选中的差异化样式（比如背景色、边框、文字颜色）
• 通过状态管理维护当前选中的价格，点击价格项时切换选中状态

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<PriceSelector> createState() => _PriceSelectorState();
}

class _PriceSelectorState extends State<PriceSelector> {
  // 定义可选价格列表
  final List<int> _priceOptions = [100, 200, 300, 400, 500, 600, 700, 800];
  // 当前选中的价格，默认选中第一个
  int? _selectedPrice;

  @override
  void initState() {
    super.initState();
    _selectedPrice = _priceOptions.first;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        children: _priceOptions.map((price) {
          final isSelected = price == _selectedPrice;
          return GestureDetector(
            onTap: () {
              setState(() {
                _selectedPrice = price;
              });
            },
            child: Container(
              margin: const EdgeInsets.only(right: 12),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                color: isSelected ? Colors.blue : Colors.grey[100],
                borderRadius: BorderRadius.circular(20),
                border: isSelected
                    ? Border.all(color: Colors.blue, width: 2)
                    : Border.all(color: Colors.grey[300]!),
              ),
              child: Text(
                '\$$price',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                  color: isSelected ? Colors.white : Colors.black87,
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

// 使用示例
class PriceSelectorDemo extends StatelessWidget {
  const PriceSelectorDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('价格选择器示例')),
      body: const Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('选择运动鞋价格'),
          SizedBox(height: 20),
          PriceSelector(),
        ],
      ),
    );
  }
}

关键细节说明 #

• 横向滚动：通过SingleChildScrollView的scrollDirection: Axis.horizontal实现横向滚动，若价格选项数量较多，用ListView.builder会更高效
• 样式区分：选中项用高亮背景色+白色文字，未选中项用浅灰背景+黑色文字，边框样式同步区分
• 状态更新：点击价格项时调用setState更新_selectedPrice，触发UI重绘切换选中样式
• 自适应布局：每个价格项用Container包裹，设置内边距和外边距，保证点击区域足够大且布局美观

如果需要更复杂的交互（比如自动居中选中项），可以结合ScrollController监听滚动位置，或者用PageView组件实现类似轮播的选中效果，上述基础实现足以覆盖大部分场景需求。

内容的提问来源于stack exchange，提问作者Jian Yuan Ng