为啥所有 Slider 小部件在 ListView.builder 中一起移动？

Posted 2023-02-23

【中文标题】为啥所有 Slider 小部件在 ListView.builder 中一起移动？

【英文标题】：Why are all Slider widgets moving together in ListView.builder?为什么所有 Slider 小部件在 ListView.builder 中一起移动？

【发布时间】：2019-11-11 14:53:35

【问题描述】：

我有一个 ListView.builder() 方法，它构建了多张卡片，其中包含一张图片、一些文本和每张卡片的滑块。问题是，每当我移动一个滑块时，它们都会一起移动，值也是如此。

double _sliderValue = 0.0;

final List<String> cardList = [
    'assets/food.jpg',
    'assets/food.jpg',
    'assets/food.jpg',
  ];

void _setValue(double value) 
    setState(() 
      _sliderValue = value;
    );
  

  Widget _buildFoodCard(BuildContext context, int index) 
    return Container(
      height: 350,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Column(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: Image.asset(
                cardList[index],
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15.0),
              child: Text(
                '$_sliderValue.round()' + ' ITEMS',
                style: TextStyle(color: Colors.white, fontSize: 15.0),
              ),
            ),
            SliderTheme(
              data: SliderTheme.of(context).copyWith(
                  thumbColor: Colors.white,
                  thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
                  activeTrackColor: Color(0xff3ADEA7),
                  inactiveTrackColor: Colors.grey,
                  overlayColor: Colors.transparent,
                  trackHeight: 1.0),
              child: Slider(
                value: _sliderValue,
                onChanged: _setValue,
                min: 0.0,
                max: 150.0,
                divisions: 30,
              ),
            ),
          ],
        ),
        color: Colors.transparent,
        elevation: 0.0,
        margin: EdgeInsets.all(10.0),
      ),
    );
  

  Widget _buildCardList() 
    return ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: _builFoodCard,
      itemCount: cardList.length,
    );
  

SCREENSHOT

我该怎么做才能使每个滑块和值单独移动/增加？

【参考方案1】：

您为每个带有滑块的卡片实现一个状态，并具有自己的滑块状态。

Widget _buildCardList() 
  return ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (BuildContext context, int index) =>
        MyWidgetSlider(cardList[index]),
    itemCount: cardList.length,
  );


class MyWidgetSlider extends StatefulWidget 
  final String data;
  MyWidgetSlider(this.data) : super();

  _MyWidgetSliderState createState() => _MyWidgetSliderState();


class _MyWidgetSliderState extends State<MyWidgetSlider> 
  double _sliderValue;
  @override
  void initState() 
    super.initState();
    _sliderValue = 0.0;
  

  void _setValue(double value) 
    setState(() 
      _sliderValue = value;
    );
  

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 350,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Column(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: Image.asset(
                this.widget.data,
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15.0),
              child: Text(
                '$_sliderValue.round()' + ' ITEMS',
                style: TextStyle(color: Colors.white, fontSize: 15.0),
              ),
            ),
            SliderTheme(
              data: SliderTheme.of(context).copyWith(
                  thumbColor: Colors.white,
                  thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
                  activeTrackColor: Color(0xff3ADEA7),
                  inactiveTrackColor: Colors.grey,
                  overlayColor: Colors.transparent,
                  trackHeight: 1.0),
              child: Slider(
                value: _sliderValue,
                onChanged: _setValue,
                min: 0.0,
                max: 150.0,
                divisions: 30,
              ),
            ),
          ],
        ),
        color: Colors.transparent,
        elevation: 0.0,
        margin: EdgeInsets.all(10.0),
      ),
    );
  

【讨论】：

非常感谢，我需要进一步了解状态管理，以便更好地了解下一次。

@xlsra 如果我现在移动滑块并且值发生变化，如果我要转到不同的选项卡然后返回，如何让它保存相同的值？

您可以将您的状态设置为您的标签小部件的高位，或使用***.com/questions/49087703/…

@xIsra 是否有任何方法可以使用这些滑块与 jsfiddle.net/ankr/L8reK 之类的依赖项

@AmitKumarPawar 在此处搜索您喜欢的任何依赖项：pub.dev