Question

我有一个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

我该怎么做才能使每个滑块和值分别移动/递增？

Answer 1

您可以为每个带有滑条的卡及其滑条状态实现状态。

recvfrom

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

1 个答案: