flutter - 如何通过不同的选项卡使一个小部件持久化?
问题描述
所以我想要做的是在我拥有的所有 3 个选项卡中保留最后一行的状态,但我不确定我会怎么做,有什么帮助吗?
如果有意义的话,我想基本上在我拥有的所有选项卡中保留滑块和持续时间等,现在它只能按预期在第一个选项卡上工作
此外,使用提供程序可能比将所有 7 个输入移动到歌曲卡更好的方法,所以如果你也能提供帮助,那就太好了
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:music_playerrrrr/providers/songs.dart';
import 'package:music_playerrrrr/screens/tracks_screen.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => Songs(),
child: DefaultTabController(
length: 3,
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Music Player'),
bottom: TabBar(
tabs: [
Tab(
text: 'Tracks',
),
Tab(
text: 'Albums',
),
Tab(
text: 'lol',
),
],
),
),
body: TabBarView(
children: [
TracksScreen(),
Scaffold(),
Scaffold(),
],
),
),
),
),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(0),
child: ListView.builder(
itemCount: Provider.of<Songs>(context).songsList.length,
itemBuilder: (context, i) {
final song = Provider.of<Songs>(context).songsList[i];
final durationInMs =
Provider.of<Songs>(context).songsList[i].duration;
final duration = millisecondsToMinutes(durationInMs);
final songId = song.id;
final filePath = song.filePath;
return SongCard(
song.title,
song.artist,
duration,
songId,
filePath,
checkIfSongClicked,
player,
);
},
),
),
),
if (isSongClickedOrNot)
Container(
width: MediaQuery.of(context).size.width,
height: 70,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 10,
),
Text(
_position.inSeconds.remainder(60) < 10
? '${_position.inMinutes.toString()}:0${_position.inSeconds.remainder(60).toString()}'
: '${_position.inMinutes.toString()}:${_position.inSeconds.remainder(60).toString()}',
style: TextStyle(color: Colors.white, fontSize: 20)),
Expanded(
child: Slider(
min: 0,
max: _duration.inSeconds.toDouble(),
value: _position.inSeconds.toDouble(),
onChanged: (value) {
setState(() {
seekToSecond(value.toInt());
});
},
),
),
SizedBox(
width: 10,
),
IconButton(
iconSize: 50.0,
icon: isPlayingOrNot
? Icon(Icons.pause)
: Icon(Icons.play_arrow),
onPressed: () {
if (isPlayingOrNot) {
player.pause();
setState(() {
isPlayingOrNot = false;
});
} else {
player.resume();
setState(() {
isPlayingOrNot = true;
});
}
},
)
],
),
),
],
),
);
}
}
解决方案
推荐阅读
- reactjs - 无法在具有特定名称的列表项上使用 getByRole - RTL
- reactjs - react native滚动地图时如何在地图上拖动点
- javascript - 让组件对状态中的数据变化做出反应
- awk - 使用 awk 用该列的平均值标准化列数据
- javascript - 如何防止仅在悬停时显示的图标在您单击它时消失
- excel - Excel - 参考 Networkdays 的列/范围
- python - Python - 无法在运行时获取类方法的对象以提取文档字符串
- r - 使用 geom_path 和 geom_point 时点与线断开连接。已修复但我没有提供摘要函数,默认为 `mean_se()
- rest - Binance API 与网站相比显示错误数据
- javascript - 提交表单时网页失去与 JavaScript 的交互性