|
|
import 'package:flutter/material.dart';
|
|
|
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
|
|
|
import 'package:get/get.dart';
|
|
|
import 'package:music_player_miao/api/api_music_return.dart';
|
|
|
import 'package:music_player_miao/models/search_bean.dart';
|
|
|
import 'package:music_player_miao/view/commend_view.dart';
|
|
|
import '../../view_model/home_view_model.dart';
|
|
|
import '../common_widget/Song_widegt.dart';
|
|
|
import '../common_widget/list_cell.dart';
|
|
|
import 'music_view.dart';
|
|
|
|
|
|
class HomeView extends StatefulWidget {
|
|
|
const HomeView({super.key});
|
|
|
|
|
|
@override
|
|
|
State<HomeView> createState() => _HomeViewState();
|
|
|
}
|
|
|
|
|
|
class _HomeViewState extends State<HomeView> {
|
|
|
final homeVM = Get.put(HomeViewModel());
|
|
|
final TextEditingController _controller = TextEditingController();
|
|
|
bool _isSearching = false;
|
|
|
|
|
|
///轮播图
|
|
|
List<Map> imgList = [
|
|
|
{"image": "assets/img/banner.png"},
|
|
|
{"image": "assets/img/banner.png"},
|
|
|
{"image": "assets/img/banner.png"},
|
|
|
];
|
|
|
final List<Song> songs = [
|
|
|
Song(
|
|
|
artistPic: 'assets/img/music_artist.png',
|
|
|
title: 'Chuck',
|
|
|
artist: 'MAMAMOO',
|
|
|
musicurl: 'audio/MAMAMOO.mp3',
|
|
|
pic: 'assets/img/artist_pic.png'),
|
|
|
Song(
|
|
|
artistPic: 'assets/img/music_artist.png',
|
|
|
title: 'FLOWER',
|
|
|
artist: 'Jisoo',
|
|
|
musicurl: 'audio/FLOWER.mp3',
|
|
|
pic: 'assets/img/artist_pic.png'),
|
|
|
Song(
|
|
|
artistPic: 'assets/img/music_artist.png',
|
|
|
title: 'All eyes on me',
|
|
|
artist: 'Jisoo',
|
|
|
musicurl: 'audio/All.mp3',
|
|
|
pic: 'assets/img/artist_pic.png'),
|
|
|
];
|
|
|
List<String> _filteredData = [];
|
|
|
|
|
|
Future<void> _filterData(String query) async {
|
|
|
if (query.isNotEmpty) {
|
|
|
SearchBean bean = await SearchMusic().search(keyword: query);
|
|
|
if (bean.code == 200) {
|
|
|
setState(() {
|
|
|
_filteredData = bean.data
|
|
|
?.map((data) => "${data.name} ") // Adjust this based on your data structure
|
|
|
.toList() ??
|
|
|
[];
|
|
|
_isSearching = true;
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
setState(() {
|
|
|
_isSearching = false;
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
///轮播图
|
|
|
var MySwiperWidget = Swiper(
|
|
|
itemBuilder: (BuildContext context, int index) {
|
|
|
//每次循环遍历时，将i赋值给index
|
|
|
return new Image.asset(
|
|
|
imgList[index]['image'],
|
|
|
fit: BoxFit.fill,
|
|
|
);
|
|
|
},
|
|
|
itemCount: imgList.length,
|
|
|
//指示器
|
|
|
pagination: SwiperPagination(
|
|
|
builder: DotSwiperPaginationBuilder(
|
|
|
color: Colors.white.withOpacity(0.85), // Color of inactive dots
|
|
|
activeColor: const Color(0xff429482), // Color of active dot
|
|
|
),
|
|
|
),
|
|
|
autoplay: true,
|
|
|
autoplayDelay: 3000,
|
|
|
);
|
|
|
return Container(
|
|
|
decoration: const BoxDecoration(
|
|
|
image: DecorationImage(
|
|
|
image: AssetImage("assets/img/app_bg.png"),
|
|
|
fit: BoxFit.cover,
|
|
|
),
|
|
|
),
|
|
|
child: Scaffold(
|
|
|
resizeToAvoidBottomInset: false,
|
|
|
backgroundColor: Colors.transparent,
|
|
|
body: SingleChildScrollView(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
///头部
|
|
|
Container(
|
|
|
padding: const EdgeInsets.only(left: 20, top: 50),
|
|
|
child: const Row(
|
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
|
children: [
|
|
|
Text(
|
|
|
'喵听',
|
|
|
style:
|
|
|
TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
|
|
|
),
|
|
|
SizedBox(
|
|
|
width: 10,
|
|
|
),
|
|
|
Text(
|
|
|
'你的云端音乐库',
|
|
|
style:
|
|
|
TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
|
|
|
///搜索
|
|
|
Container(
|
|
|
padding: const EdgeInsets.only(left: 20, right: 20, top: 10),
|
|
|
child: Column(
|
|
|
children: [
|
|
|
Container(
|
|
|
height: 38,
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xffF9F2AF),
|
|
|
borderRadius: BorderRadius.circular(19),
|
|
|
boxShadow: const [
|
|
|
BoxShadow(
|
|
|
color: Colors.black26,
|
|
|
offset: Offset(0, 1),
|
|
|
blurRadius: 0.1,
|
|
|
)
|
|
|
],
|
|
|
),
|
|
|
child: TextField(
|
|
|
controller: _controller,
|
|
|
onChanged: (query) {
|
|
|
setState(() async{
|
|
|
_filterData(query);
|
|
|
});
|
|
|
},
|
|
|
decoration: InputDecoration(
|
|
|
focusedBorder: InputBorder.none,
|
|
|
enabledBorder: InputBorder.none,
|
|
|
errorBorder: InputBorder.none,
|
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
|
vertical: 4,
|
|
|
horizontal: 20,
|
|
|
),
|
|
|
prefixIcon: Container(
|
|
|
margin: const EdgeInsets.only(left: 20),
|
|
|
alignment: Alignment.centerLeft,
|
|
|
width: 30,
|
|
|
child: Image.asset(
|
|
|
"assets/img/home_search.png",
|
|
|
width: 20,
|
|
|
height: 20,
|
|
|
fit: BoxFit.contain,
|
|
|
),
|
|
|
),
|
|
|
hintText: "大家都在搜《背对背拥抱》",
|
|
|
hintStyle: const TextStyle(
|
|
|
color: Color(0xffA5A5A5),
|
|
|
fontSize: 13,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
if (_isSearching)
|
|
|
Container(
|
|
|
height: 150,
|
|
|
width: 345,
|
|
|
decoration: BoxDecoration(
|
|
|
color: const Color(0xffF9F2AF).withOpacity(0.7),
|
|
|
),
|
|
|
child: ListView.builder(
|
|
|
padding: EdgeInsets.zero,
|
|
|
itemCount: _filteredData.length,
|
|
|
itemBuilder: (context, index) {
|
|
|
return ListTile(
|
|
|
title: Text(_filteredData[index]),
|
|
|
);
|
|
|
},
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
|
|
|
///推荐+轮播图
|
|
|
Container(
|
|
|
padding: const EdgeInsets.only(left: 20, right: 20, top: 10),
|
|
|
child: const Text(
|
|
|
'每日推荐',
|
|
|
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
|
|
|
),
|
|
|
),
|
|
|
Container(
|
|
|
padding: const EdgeInsets.only(left: 20, right: 20, top: 5),
|
|
|
height: 186,
|
|
|
width: double.infinity,
|
|
|
child: MySwiperWidget,
|
|
|
),
|
|
|
|
|
|
///精选歌曲
|
|
|
Container(
|
|
|
alignment: Alignment.topLeft,
|
|
|
padding: const EdgeInsets.only(left: 20, right: 20, top: 5),
|
|
|
child: const Text(
|
|
|
'精选歌曲',
|
|
|
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
|
|
|
),
|
|
|
),
|
|
|
ListView.builder(
|
|
|
padding: EdgeInsets.zero,
|
|
|
itemCount: songs.length,
|
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
|
shrinkWrap: true,
|
|
|
itemBuilder: (context, index) {
|
|
|
return ListTile(
|
|
|
leading: Image.asset(songs[index].pic),
|
|
|
title: Text(
|
|
|
songs[index].title,
|
|
|
style: const TextStyle(fontSize: 18, color: Colors.black),
|
|
|
),
|
|
|
subtitle: Text(
|
|
|
songs[index].artist,
|
|
|
style: const TextStyle(fontSize: 16, color: Colors.black),
|
|
|
),
|
|
|
trailing: InkWell(
|
|
|
onTap: () {
|
|
|
_bottomSheet(context,index);
|
|
|
},
|
|
|
child: Image.asset('assets/img/More.png'),
|
|
|
),
|
|
|
onTap: () {
|
|
|
Navigator.push(
|
|
|
context,
|
|
|
MaterialPageRoute(
|
|
|
builder: (context) => MusicView(
|
|
|
song: songs[index], initialSongIndex: index),
|
|
|
),
|
|
|
);
|
|
|
},
|
|
|
);
|
|
|
},
|
|
|
),
|
|
|
|
|
|
///精选歌单
|
|
|
Container(
|
|
|
padding: const EdgeInsets.only(left: 20, right: 20, top: 5),
|
|
|
child: const Text(
|
|
|
'精选歌单',
|
|
|
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
|
|
|
),
|
|
|
),
|
|
|
SizedBox(
|
|
|
height: 180,
|
|
|
child: ListView.builder(
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
shrinkWrap: true,
|
|
|
padding: const EdgeInsets.only(left: 20),
|
|
|
itemCount: homeVM.listArr.length,
|
|
|
itemBuilder: (context, index) {
|
|
|
var sObj = homeVM.listArr[index];
|
|
|
return ListRow(
|
|
|
sObj: sObj,
|
|
|
onPressed: () {},
|
|
|
onPressedPlay: () {},
|
|
|
);
|
|
|
}),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
Future _bottomSheet(BuildContext context,int index) {
|
|
|
return showModalBottomSheet(
|
|
|
context: context,
|
|
|
backgroundColor: Colors.white,
|
|
|
shape: const RoundedRectangleBorder(
|
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
|
|
|
builder: (context) => Container(
|
|
|
height: 210,
|
|
|
padding: const EdgeInsets.only(top: 20),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
children: [
|
|
|
Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
|
children: [
|
|
|
Column(
|
|
|
children: [
|
|
|
IconButton(
|
|
|
onPressed: () {},
|
|
|
icon: Image.asset("assets/img/list_add.png"),
|
|
|
iconSize: 60,
|
|
|
),
|
|
|
const Text("加入歌单")
|
|
|
],
|
|
|
),
|
|
|
Column(
|
|
|
children: [
|
|
|
IconButton(
|
|
|
onPressed: () {},
|
|
|
icon: Image.asset("assets/img/list_download.png"),
|
|
|
iconSize: 60,
|
|
|
),
|
|
|
const Text("下载")
|
|
|
],
|
|
|
),
|
|
|
Column(
|
|
|
children: [
|
|
|
IconButton(
|
|
|
onPressed: () {},
|
|
|
icon: Image.asset("assets/img/list_collection.png"),
|
|
|
iconSize: 60,
|
|
|
),
|
|
|
const Text("收藏")
|
|
|
],
|
|
|
),
|
|
|
Column(
|
|
|
children: [
|
|
|
IconButton(
|
|
|
onPressed: () {},
|
|
|
icon: Image.asset("assets/img/list_good.png"),
|
|
|
iconSize: 60,
|
|
|
),
|
|
|
const Text("点赞")
|
|
|
],
|
|
|
),
|
|
|
Column(
|
|
|
children: [
|
|
|
IconButton(
|
|
|
onPressed: () {
|
|
|
Get.to(() => CommentView(initialSongIndex: index,));
|
|
|
},
|
|
|
icon: Image.asset("assets/img/list_comment.png"),
|
|
|
iconSize: 60,
|
|
|
),
|
|
|
const Text("评论")
|
|
|
],
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
const SizedBox(
|
|
|
height: 10,
|
|
|
),
|
|
|
ElevatedButton(
|
|
|
onPressed: () {},
|
|
|
child: const Text(
|
|
|
"查看详情页",
|
|
|
style: TextStyle(color: Colors.black, fontSize: 18),
|
|
|
),
|
|
|
style: ElevatedButton.styleFrom(
|
|
|
backgroundColor: const Color(0xffE6F4F1),
|
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
|
shape: const RoundedRectangleBorder(
|
|
|
borderRadius: BorderRadius.zero,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
ElevatedButton(
|
|
|
onPressed: () => Navigator.pop(context),
|
|
|
style: ElevatedButton.styleFrom(
|
|
|
backgroundColor: const Color(0xff429482),
|
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
|
shape: const RoundedRectangleBorder(
|
|
|
borderRadius: BorderRadius.zero,
|
|
|
),
|
|
|
),
|
|
|
child: const Text(
|
|
|
"取消",
|
|
|
style: TextStyle(color: Colors.black, fontSize: 18),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
));
|
|
|
}
|
|
|
}
|
