Question

我正在使用flutter_ffmpeg包来获取歌曲的元数据。在我的应用程序中，用户可以从内部存储中选择歌曲，然后通过存储在本地列表中的flutter_ffmpeg获取元数据。我正在使用这些列表来构建我的自定义窗口小部件（具有艺术家名称，时长等的歌曲块）。在我的情况下，首先用空列表呈现所有窗口小部件，我想在所有选定的歌曲元数据存储在列表中之后呈现窗口小部件，然后能够呈现窗口小部件。如何存档？

由于我没有使用API，所以无法使用Builder小部件。请帮忙。

代码：https://pastebin.com/gwZkuujA CustomSongTile小部件：https://pastebin.com/edit/ZSi25ydz

import 'package:audiobook_player/presentation/pages/widgets/book_info_tile.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ffmpeg/flutter_ffmpeg.dart';

class FilePickerTrial extends StatelessWidget {
  final FlutterFFprobe _flutterFFprobe = new FlutterFFprobe();
  final List<String> audioPaths = [];
  final List<String> audioTitle = [];
  final List<String> audioAuthor = [];
  final List<String> audioDuration = [];
  FilePickerTrial({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      child: Scaffold(
        appBar: AppBar(
          actions: [
            Container(
              width: size.width,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: IconButton(
                        icon: Icon(Icons.sort, color: Colors.black),
                        onPressed: () {},
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.add_circle, color: Colors.black),
                      onPressed: () async {
                        FilePickerResult pathResult = await FilePicker.platform
                            .pickFiles(
                                type: FileType.audio, allowMultiple: true);
                        for (int i = 0; i < pathResult.paths.length; i++) {
                          audioPaths.add(pathResult.paths[i]);
                        }
                        print(
                            'AudioPaths Length ============== ${audioPaths.length} ==============');
                        for (int j = 0; j < audioPaths.length; j++) {
                          await _flutterFFprobe
                              .getMediaInformation(audioPaths[j])
                              .then(
                            (info) {
                              print(
                                  "================Media Information=============");
                              audioTitle.add(
                                  info.getMediaProperties()['tags']['title']);
                              audioAuthor.add(
                                  info.getMediaProperties()['tags']['artist']);
                              audioDuration
                                  .add(info.getMediaProperties()['duration']);
                              print(
                                  '====================> $audioTitle ==============');
                              print(
                                  '====================> $audioAuthor ==============');
                            },
                          );
                        }
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
        body: ListView.builder(
            itemCount: audioPaths.length,
            itemBuilder: (BuildContext context, int index) {
              return BookInfoTile(
                  bookCoverImageURL: 'assets/no_cover.png',
                  bookTitle: audioTitle[index],
                  authorName: audioAuthor[index],
                  bookLength: int.parse(audioDuration[index]),
                  onClick: () {
                    print('Button is Clicked');
                  });
            }),
      ),
    );
  }
}

BookInfoTile代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class BookInfoTile extends StatelessWidget {
  final String bookCoverImageURL;
  final String bookTitle;
  final String authorName;
  final int bookLength;
  final onClick;
  final Function onStop;

  const BookInfoTile(
      {Key key,
      @required this.bookCoverImageURL,
      @required this.bookTitle,
      @required this.authorName,
      @required this.bookLength,
      @required this.onClick,
      this.onStop})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: onClick,
      child: Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(25.0),
              child: Image.asset(
                bookCoverImageURL,
                fit: BoxFit.fill,
                alignment: Alignment.centerLeft,
                height: size.height * 0.22,
                width: size.width * 0.40,
              ),
            ),
            SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    bookTitle,
                    overflow: TextOverflow.visible,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Text(
                    'by $authorName',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.normal,
                      color: Color(0xFF767676),
                    ),
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          alignment: PlaceholderAlignment.middle,
                          child: SvgPicture.asset(
                            'assets/svg/circle-fill.svg',
                            color: Color(0xFFffe564),
                            height: 10,
                            alignment: Alignment.topCenter,
                          ),
                        ),
                        TextSpan(
                          text: " $bookLength",
                        ),
                      ],
                    ),
                  ),
                  RaisedButton(
                    onPressed: onStop,
                    child: Text('Stop'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

尝试使用有状态小部件而不是无状态小部件。然后在您按下的图标按钮的fxn中，用

setState（{

}）;

这有助于重建列表视图，如果音频路径中有内容，它将填充列表视图。

将数据存储到本地数据库而不是通过api后如何显示ListTile？

1 个答案: