ListView.Builder 播放/暂停按钮颤动答案

【问题标题】：ListView.Builder play/Pause buttom flutterListView.Builder 播放/暂停按钮颤动
【发布时间】：2020-12-09 06:47:41
【问题描述】：

我正在使用 ListView.builder 创建一个音频列表，当我选择它时，我需要将播放按钮暂停单独更改为一个项目，我尝试了一个布尔值，但播放或暂停会更改列表中的所有项目，有人可以帮忙吗？？

【问题讨论】：

标签： flutter

【解决方案1】：

import 'package:flutter/material.dart';

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Column(
            children: [
              IconButton(
                  icon: Icon(isPressed
                      ? Icons.play_circle_filled
                      : Icons.pause_circle_filled),
                  onPressed: () {
                    setState(() {
                      isPressed = !isPressed;
                    });
                  }),
              IconButton(
                  icon: Icon(isPressed
                      ? Icons.play_circle_filled
                      : Icons.pause_circle_filled),
                  onPressed: () {
                    setState(() {
                      isPressed = !isPressed;
                    });
                  }),
              PlayPause(
                isPressed: isPressed,
              ),
              PlayPause(),
            ],
          )
        ],
      ),
    );
  }
}

class PlayPause extends StatefulWidget {
  const PlayPause({
    Key key,
    this.isPressed = false,
  }) : super(key: key);
  final bool isPressed;

  @override
  _PlayPauseState createState() => _PlayPauseState();
}

class _PlayPauseState extends State<PlayPause> {
  bool _isPressed;
  @override
  void initState() {
    super.initState();
    _isPressed = widget.isPressed;
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
        icon: Icon(
            _isPressed ? Icons.play_circle_filled : Icons.pause_circle_filled),
        onPressed: () {
          setState(() {
            _isPressed = !_isPressed;
          });
        });
  }
}

【讨论】：

【解决方案2】：

您可能有一个布尔值列表来保存选择了哪个按钮，然后将布尔值作为参数传递给音频小部件，并使用布尔值来更改图标。

还要传递一个回调函数来改变bool列表，因为你要从父widget改变列表，所以需要一个回调函数。

 List<bool> audioSelectedList = List.generate(AudioList.length, (i) => false);

// This is a callback function that Audio will call when the button is clicked.
  selected(int index){
// set only one bool to be true
    setState(() {
      audioSelectedList=List.generate(AudioList.length, (i) => false);// set all to false
      audioSelectedList[index]=true;  // set the selected index to be true
    });
  }

列表视图：

ListView.builder(
          itemCount: AudioList.length,
          itemBuilder: (context, index) => Audio(
            selected: selected, // pass the callback function
            index: index, // use to call selected(index)
            isSelected: audioSelectedList[index], // only one bool is true in the list which is the selected index.
          ),
        ),

【讨论】：

你能把代码解释清楚一点吗
嘿@sleepingkit，你能帮帮我吗，在我的情况下，我正在使用 from.Json 这样并将其传递给另一个小部件。 PostModel 帖子 = PostModel.fromJson(post[index].data()); return Padding( padding: const EdgeInsets.all(10.0), child: UserPost(post: posts), // 我这里用的是帖子 );

【解决方案3】：

不要对所有音频都使用一个 bool，您可以使用集合为 audioList 中的所有内容定义一个 bool，并在单击时更改音频的 bool。

【讨论】：