Flutter で Nas 音楽プレーヤーを作成する (4)

 1return CustomScrollView(
 2      slivers: <Widget>[
 3        //这个是套首页文本的
 4        SliverToBoxAdapter(
 5          child: Container(
 6              padding: leftrightPadding,
 7              child: Text(indexLocal, style: titleText1)),
 8        ),
 9        if (_albums != null && _albums!.length > 0)
10          SliverToBoxAdapter(
11            //这个套横向的标题栏，包括文本和左右按钮，我写了个公共文件方便套用
12              child: MySliverControlBar(
13            title: "随机专辑",
14            controller: _randomAlbumcontroller,
15          )),
16        if (_albums != null && _albums!.length > 0)
17          SliverToBoxAdapter(
18            //这个套横向的滚动图片，我写了个公共文件方便套用
19              child: MySliverControlList(
20            controller: _randomAlbumcontroller,
21            albums: _albums!,
22            url: _imageURL!,
23          ))
24        ]
25  );

1controller.animateTo(controller.offset - _size.width / 2,
2                        duration: Duration(milliseconds: 200),
3                        curve: Curves.ease);

1ValueNotifier<double> windowsWidth =
2    ValueNotifier<double>(window.physicalSize.width / window.devicePixelRatio);
3
4ValueNotifier<double> windowsHeight =
5    ValueNotifier<double>(window.physicalSize.height / window.devicePixelRatio);

1//当不是移动端的时候使用这个可以动态监听窗体变化
2    //如果是移动端的话，窗体不会变化
3    if (!isMobile.value) {
4      windowsWidth.value = MediaQuery.of(context).size.width;
5      windowsHeight.value = MediaQuery.of(context).size.height;
6    }

 1Stack(
 2        children: <Widget>[
 3          ConstrainedBox(
 4              constraints: const BoxConstraints.expand(),
 5              child: ValueListenableBuilder<Map>(
 6                  valueListenable: activeSong,
 7                  builder: ((context, value, child) {
 8                    return ClipRRect(
 9                      //这里设置背景图片，其实可以直接Image的，不需要做个圆角矩形，我是复制过来的，无所谓啦
10                      borderRadius: BorderRadius.circular(15),
11                      child: (value.isEmpty)
12                          ? Image.asset("assets/images/logo.jpg")
13                          : CachedNetworkImage(
14                              imageUrl: value["url"],
15                              fit: BoxFit.cover,
16                              placeholder: (context, url) {
17                                return AnimatedSwitcher(
18                                  child: Image.asset("assets/images/logo.jpg"),
19                                  duration:
20                                      const Duration(milliseconds: imageMilli),
21                                );
22                              },
23                            ),
24                    );
25                  }))),
26          Center(
27            child: ClipRect(
28              child: BackdropFilter(
29                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
30                child: Container(
31                  width: windowsWidth.value,
32                  height: windowsHeight.value,
33                  decoration:
34                      BoxDecoration(color: Colors.black.withOpacity(0.8)), //这里是控制透明度的，然后前面的颜色设置成白色和黑色有不同的效果，都可以调整
35                  child:... //放上层控件

1  var lyricModel =
2      LyricsModelBuilder.create().bindLyricToMain(normalLyric).getModel();  //歌词文件normalLyric就是个字符串，照着抄就行
3  var lyricUI = UINetease();  //拿到UI文件，这个后面也可以自己改，字体颜色等等
4  var lyricPadding = 40.0;    //直接复制了，可以改
5  var playing = true;         //这个是控制歌词播放的，作者用来联动按钮控制歌词高亮，我不需要联动直接传了true，后面需要加到自己的暂停按钮里面去（其实不加好像也行...就一直true呗）

1    lyricUI.highlight = true;  //设置高亮

 1  Widget _buildReaderWidget() {
 2    return StreamBuilder<PositionData>(
 3        stream: _positionDataStream,
 4        builder: (context, snapshot) {
 5          final positionData = snapshot.data;
 6          final position = positionData?.position.inMilliseconds ?? 0;
 7          //我的定位信息是用StreamBuilder控制的，所以要套个头
 8          return LyricsReader(
 9            padding: EdgeInsets.symmetric(horizontal: lyricPadding),
10            model: lyricModel,  //这里需要注意的是，因为这个StreamBuilder是一直在跑的，这里面可不敢放变量赋值，不然会一直run，如果跟我一样做了歌词的全局变量来读的话，检测值一定要放到StreamBuilder的外层！！！否则字幕会一直闪烁
11            position: position,
12            lyricUi: lyricUI,
13            playing: playing,
14            //设置大小
15            size: Size(windowsWidth.value / 2, windowsHeight.value / 2),
16            emptyBuilder: () => Center(
17              child: Text(
18                "No lyrics",
19                style: lyricUI.getOtherMainTextStyle(),
20              ),
21            ),
22            selectLineBuilder: (progress, confirm) {
23              return Row(
24                children: [
25                  IconButton(
26                      onPressed: () {
27                        LyricsLog.logD("点击事件");
28                        confirm.call();
29                        //这里是更新seek的位置，不过我那个进度条做好了监听，所以不需要setState,直接改就可以了
30                        //setState(() {
31                        widget.player.seek(Duration(milliseconds: progress));
32                        // });
33                      },
34                      icon: Icon(Icons.play_arrow, color: kGrayColor)),
35                  Expanded(
36                    child: Container(
37                      decoration: BoxDecoration(color: kGrayColor),
38                      height: 1,
39                      width: double.infinity,
40                    ),
41                  ),
42                  Text(
43                    //这是自己写的方法，用于把Duration改成小时、分钟、秒这样的字符串
44                    formatDurationMilliseconds(progress),,
45                    style: TextStyle(color: kGrayColor),
46                  )
47                ],
48              );
49            },
50          );
51        });
52  }
53
54String formatDurationMilliseconds(int _duration) {
55  Duration _dura = Duration(milliseconds: _duration);
56  if (_dura.inHours != 0) {
57    String hours = _dura.inHours.toString().padLeft(0, '2');
58    String minutes = _dura.inMinutes.remainder(60).toString().padLeft(2, '0');
59    String seconds = _dura.inSeconds.remainder(60).toString().padLeft(2, '0');
60    return "$hours:$minutes:$seconds";
61  } else {
62    String minutes = _dura.inMinutes.remainder(60).toString().padLeft(2, '0');
63    String seconds = _dura.inSeconds.remainder(60).toString().padLeft(2, '0');
64    return "$minutes:$seconds";
65  }
66}