【问题标题】:How to show only show progress/progress indicator for selected index of a listview.builder?如何仅显示 listview.builder 的选定索引的显示进度/进度指示器?
【发布时间】:2020-08-10 13:06:44
【问题描述】:

因此,我创建了一个代码,用于在按下每个视频下方的下载按钮时显示下载文件(视频)的进度指示器。

进度指示器有效,完美显示进度。

API JSON 结构:https://pastebin.com/raw/JPCyaKMn

问题

点击视频容器下方的下载按钮后,它会显示 ListView.builder 中所有视频的进度。

我只想为点击(选择)的视频容器显示进度,我该怎么做?

我的代码

@override
  Widget build(BuildContext context) {
    return data != null
        ? WillPopScope(
            onWillPop: () async => false,
            child: Scaffold(
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10, top: 50.0, bottom: 10.0),
                      child: Text(
                        "Videos",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 32.0,
                            fontWeight: FontWeight.w700),
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: data.body.videos.length,
                      itemBuilder: (context, index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            InkWell(
                              onTap: () async {},
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  children: <Widget>[
                                    Container(
                                      width: MediaQuery.of(context).size.width -
                                          40,
                                      margin: const EdgeInsets.only(
                                          bottom: 0, top: 20),
                                      height: 70,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(5),
                                            topRight: Radius.circular(5),
                                            bottomLeft: Radius.zero,
                                            bottomRight: Radius.zero),
                                        color: Colors.white,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            downloading ? Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 20),
                              child: LinearProgressIndicator(
                                value: _progress,
                              ),
                            ) : Container(),
                            Center(
                              child: SizedBox(
                                width: 128,
                                child: MaterialButton(
                                  minWidth: 40,
                                  child: Center(
                                    child: Text(
                                      "Download",
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                  height: 40,
                                  color: Colors.red,
                                  onPressed: () async {
                                    _getDownload(data
                                        .body.videos[index].backblazeVideoId);
                                  },
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ],
              ),
              resizeToAvoidBottomPadding: false,
              backgroundColor: thirdcolor,
            ),
          )
        : CircularProgressIndicator();
  }

我的下载功能

// Returns a file (mp4) after the API is given credentials & the fileid of the tapped video
_getDownload(String fileid) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String email = prefs.getString('email');
    String token = prefs.getString('accesstoken');

    final Directory docDir = await getExternalStorageDirectory();

    String docPath = docDir.path;
    File docFile = File('$docPath/$fileid.mp4');
    var dio = Dio();
    var response = await dio.post(
        "https://api.myvideovault.com/profile/downloadVideo",
        data: {
          "email": email,
          "token": token,
          "method": "download",
          "fileid": fileid
        },
        options: Options(contentType: "application/x-www-form-urlencoded"),
        onReceiveProgress: (received, total) {
      String lol = "${((received / total) * 100).toInt()} %";
      double haha = received/total;
      print("${received ~/ total} %");

      setState(() {
        downloading = true;
        _progress = haha;
      });
    });
  }

【问题讨论】:

    标签: android json flutter dart


    【解决方案1】:

    这里的问题是您的downloading 变量会告诉您是否正在下载所有视频。如果您将index 作为参数传递给_getDownload 并保存调用_getDownload 的按钮的index,这将起作用。
    然后,您可以将其用作三元运算符条件来显示线性进度指示器。

    【讨论】:

    • 谢谢,在我猜我做错之前我尝试过类似的方法。现在可以了。
    猜你喜欢
    • 2011-09-29
    • 1970-01-01
    • 1970-01-01
    • 2020-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-01
    相关资源
    最近更新 更多