503 lines
15 KiB
Dart
503 lines
15 KiB
Dart
import 'dart:async';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:agora_rtc_engine/rtc_engine.dart';
|
||
import 'package:permission_handler/permission_handler.dart';
|
||
import 'package:will_play/views/palRoom/PalRoom.dart';
|
||
import 'package:will_play/utils/auth.dart';
|
||
|
||
import '../../utils/http_util.dart';
|
||
import '../../api/part.dart';
|
||
|
||
class PartyPage extends StatefulWidget {
|
||
PartyPage({Key? key}) : super(key: key);
|
||
|
||
@override
|
||
State<PartyPage> createState() => _PartyPageState();
|
||
}
|
||
|
||
class _PartyPageState extends State<PartyPage> {
|
||
final _search = TextEditingController();
|
||
final _tabDataList = [
|
||
Tab(text: '关注'),
|
||
Tab(text: '推荐'),
|
||
Tab(text: '相亲'),
|
||
Tab(text: 'KTV'),
|
||
Tab(text: '交友'),
|
||
Tab(text: '音乐'),
|
||
];
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return DefaultTabController(
|
||
initialIndex: 1, // 默认选中
|
||
length: 6,
|
||
child: Scaffold(
|
||
backgroundColor: Colors.white,
|
||
appBar: AppBar(
|
||
elevation: 0, // z轴阴影
|
||
leading: null,
|
||
titleSpacing: 10, // 标题与其他控件的间隔
|
||
backgroundColor: Colors.white,
|
||
title: Container(
|
||
height: 35,
|
||
margin: EdgeInsetsDirectional.only(end: 25),
|
||
padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
|
||
decoration: BoxDecoration(
|
||
color: Color.fromRGBO(247, 247, 247, 1),
|
||
borderRadius: BorderRadius.circular(30),
|
||
),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
SizedBox(
|
||
child: Padding(
|
||
padding: EdgeInsets.only(right: 5),
|
||
child: Image.asset(
|
||
'images/party/search.png',
|
||
width: 17.0,
|
||
height: 17.0,
|
||
fit: BoxFit.cover,
|
||
),
|
||
),
|
||
),
|
||
Expanded(
|
||
flex: 1,
|
||
child: TextField(
|
||
controller: _search,
|
||
decoration: InputDecoration(
|
||
isDense: true,
|
||
border: InputBorder.none,
|
||
hintText: '搜索房间号',
|
||
hintStyle: TextStyle(
|
||
fontSize: 12,
|
||
color: Color.fromRGBO(203, 203, 203, 1),
|
||
),
|
||
),
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.black,
|
||
),
|
||
textInputAction: TextInputAction.search, // 键盘右下角图标
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
actions: [
|
||
IconButton(
|
||
onPressed: () {
|
||
Navigator.pushNamed(context, 'CreateRoom');
|
||
},
|
||
icon: Image.asset(
|
||
'images/party/create.png',
|
||
fit: BoxFit.cover,
|
||
width: 22.0,
|
||
height: 22.0,
|
||
),
|
||
),
|
||
],
|
||
bottom: TabBar(
|
||
// isScrollable: true,
|
||
indicatorSize: TabBarIndicatorSize.label, // 指示器大小计算方式
|
||
indicatorColor: Color.fromRGBO(255, 255, 255, 0), // 指示器颜色
|
||
labelColor: Colors.black, // 选中label颜色
|
||
labelStyle: TextStyle(fontSize: 18), // 选中label的Style
|
||
unselectedLabelStyle: TextStyle(fontSize: 14), // 未选中label的Style
|
||
unselectedLabelColor:
|
||
Color.fromRGBO(153, 153, 153, 1), // 未选中label颜色
|
||
tabs: _tabDataList,
|
||
enableFeedback: true,
|
||
onTap: (index) {
|
||
print(_tabDataList[index]);
|
||
},
|
||
),
|
||
),
|
||
body: TabBarView(
|
||
children: [
|
||
ViewsWidget(),
|
||
ViewsWidget(),
|
||
ViewsWidget(),
|
||
ViewsWidget(),
|
||
ViewsWidget(),
|
||
ViewsWidget(),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// tab视图页组件
|
||
class ViewsWidget extends StatefulWidget {
|
||
ViewsWidget({Key? key}) : super(key: key);
|
||
|
||
@override
|
||
State<ViewsWidget> createState() => _ViewsWidgetState();
|
||
}
|
||
|
||
class _ViewsWidgetState extends State<ViewsWidget> {
|
||
List _list = [
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小明",
|
||
"num": "12",
|
||
"title": "今日听君歌一曲",
|
||
"type": "music",
|
||
"sex": "0",
|
||
"role": ClientRole.Broadcaster,
|
||
},
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小红",
|
||
"num": "12",
|
||
"title": "成年人的避风港",
|
||
"type": "pal",
|
||
"sex": "1",
|
||
"role": ClientRole.Audience,
|
||
},
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小红",
|
||
"num": "12",
|
||
"title": "成年人的避风港",
|
||
"type": "pal",
|
||
"sex": "1",
|
||
"role": ClientRole.Audience,
|
||
},
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小黑",
|
||
"num": "12",
|
||
"title": "今日听君歌一曲",
|
||
"type": "auction",
|
||
"sex": "0",
|
||
"role": ClientRole.Audience,
|
||
},
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小白",
|
||
"num": "122",
|
||
"title": "今日听君歌一曲",
|
||
"type": "family",
|
||
"sex": "0",
|
||
"role": ClientRole.Audience,
|
||
},
|
||
{
|
||
"photo": "images/party/photo1.png",
|
||
"name": "小白",
|
||
"num": "122",
|
||
"title": "今日听君歌一曲",
|
||
"type": "family",
|
||
"sex": "0",
|
||
"role": ClientRole.Audience,
|
||
},
|
||
];
|
||
int page = 1; // 当前页面
|
||
int size = 10; // 每页N条
|
||
late int total; // 总条数
|
||
bool isLoadmore = false; // 加载更多
|
||
List _data = []; // 列表数据
|
||
// 给ListView加一个 ScrollController 组件，通过事件监听滚动条的高度来显示和隐藏加载更多的组件
|
||
ScrollController _scrollController = new ScrollController();
|
||
|
||
// 判断是否开启权限方法
|
||
Future<void> _handleCameraAndMic(Permission permission) async {
|
||
PermissionStatus status = await permission.request();
|
||
print('权限状态$status');
|
||
if (!status.isGranted) {
|
||
openAppSettings();
|
||
}
|
||
}
|
||
|
||
// 页面跳转方法
|
||
Future<void> _onJoin(agoraToken, userName, channelName, role) async {
|
||
await _handleCameraAndMic(Permission.camera);
|
||
await _handleCameraAndMic(Permission.microphone);
|
||
|
||
await Navigator.push(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (context) => PalRoomPage(
|
||
agoraToken: agoraToken,
|
||
userName: userName,
|
||
channelName: channelName,
|
||
role: role,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// 刷新列表方法
|
||
_onRefresh() {
|
||
_data.clear();
|
||
this.page = 1;
|
||
getList({'page': this.page, 'size': this.size}).then((res) {
|
||
print('_onRefresh：${res.data}');
|
||
setState(() {
|
||
_data.addAll(res.data['content']);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 加载数据方法
|
||
_onLoadmore() {
|
||
this.page++;
|
||
getList({'page': this.page, 'size': this.size}).then((res) {
|
||
setState(() {
|
||
print('_onLoadmore：${res.data}');
|
||
_data.addAll(res.data['content']);
|
||
isLoadmore = false;
|
||
});
|
||
});
|
||
}
|
||
|
||
// 加载中动画组件
|
||
Widget _loadMoreWidget() {
|
||
return Padding(
|
||
padding: EdgeInsets.all(15.0),
|
||
child: Center(child: CircularProgressIndicator()),
|
||
);
|
||
}
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
|
||
getList({'page': this.page, 'size': this.size}).then((res) {
|
||
// print('列表数据：${res.data}');
|
||
print('${res.data['content']}');
|
||
setState(() {
|
||
_data.addAll(res.data['content']!);
|
||
});
|
||
});
|
||
|
||
// _onRefresh();
|
||
// _scrollController.addListener(() {
|
||
// if (_scrollController.position.pixels ==
|
||
// _scrollController.position.maxScrollExtent) {
|
||
// _onLoadmore();
|
||
// }
|
||
// });
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
super.dispose();
|
||
_scrollController.dispose();
|
||
}
|
||
|
||
void _agoraToken(roomId, channelName, role) async {}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// return RefreshIndicator( onRefresh: _onRefresh(),
|
||
return SingleChildScrollView(
|
||
child: Column(
|
||
children: [
|
||
Container(
|
||
padding: EdgeInsets.fromLTRB(15, 15, 15, 0),
|
||
child: GestureDetector(
|
||
child: Image.asset('images/party/banner.png'),
|
||
onTap: () {
|
||
print('Banner on tap');
|
||
},
|
||
),
|
||
),
|
||
_data.length > 0
|
||
? ListView.builder(
|
||
controller: _scrollController,
|
||
itemCount: _data.length,
|
||
shrinkWrap: true,
|
||
itemBuilder: (BuildContext context, int index) {
|
||
// if (index == this.data.length - 1) {
|
||
// return _loadMoreWidget();
|
||
// }
|
||
return GestureDetector(
|
||
onTap: () async {
|
||
var res = await MyHttpUtil()
|
||
.get("/chat/api/auth/agora/token", data: {
|
||
'channelName': _data[index]['id'],
|
||
'role': 2
|
||
});
|
||
|
||
var agoraToken = res.data["token"];
|
||
String uid = await Storage.get('id');
|
||
String userName = await Storage.get('userName'); // 用户名
|
||
|
||
print(agoraToken);
|
||
print(_data[index]['id']);
|
||
|
||
_onJoin(agoraToken, userName, _data[index]['id'],
|
||
ClientRole.Audience);
|
||
},
|
||
child: Container(
|
||
height: 75,
|
||
padding: EdgeInsets.all(5),
|
||
margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
|
||
width: double.infinity,
|
||
decoration: BoxDecoration(
|
||
color: Color.fromRGBO(255, 255, 255, 1),
|
||
borderRadius: BorderRadius.all(Radius.circular(50)),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Color.fromRGBO(0, 0, 0, 0.1),
|
||
offset: Offset(0.0, 1.0), // 阴影xy轴偏移量
|
||
blurRadius: 1.0, // 阴影模糊程度
|
||
spreadRadius: 1.0 // 阴影扩散程度
|
||
)
|
||
],
|
||
),
|
||
child: Row(
|
||
children: [
|
||
ClipOval(
|
||
child: Image.asset(
|
||
'images/party/photo1.png',
|
||
width: 65,
|
||
height: 65,
|
||
),
|
||
),
|
||
SizedBox(
|
||
width: 10,
|
||
),
|
||
Expanded(
|
||
flex: 1,
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
typeElement(type: 'pal'),
|
||
Container(
|
||
child: Text(
|
||
_data[index]['name'],
|
||
overflow: TextOverflow.ellipsis,
|
||
style: TextStyle(
|
||
color: Color.fromRGBO(
|
||
51, 51, 51, 1),
|
||
fontSize: 16),
|
||
),
|
||
)
|
||
],
|
||
),
|
||
SizedBox(height: 9),
|
||
Row(
|
||
children: [
|
||
Image.asset(
|
||
'images/party/live.png',
|
||
width: 17,
|
||
height: 18,
|
||
),
|
||
SizedBox(width: 5),
|
||
Text(
|
||
'${_data[index]['userCount']}人',
|
||
overflow: TextOverflow.ellipsis,
|
||
style: TextStyle(
|
||
color: Color.fromRGBO(
|
||
153, 153, 153, 1),
|
||
fontSize: 12),
|
||
)
|
||
],
|
||
),
|
||
],
|
||
)),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
)
|
||
: Container(
|
||
padding: EdgeInsets.all(15),
|
||
child: Center(
|
||
child: Text('暂无数据～'),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// 房间类型标签小组件
|
||
class typeElement extends StatelessWidget {
|
||
String type;
|
||
|
||
var typeData = {
|
||
"music": {
|
||
'title': "音乐",
|
||
'color': [
|
||
Color.fromRGBO(207, 167, 248, 1),
|
||
Color.fromRGBO(133, 157, 254, 1),
|
||
],
|
||
},
|
||
"pal": {
|
||
"title": "交友",
|
||
'color': [
|
||
Color.fromRGBO(207, 167, 248, 1),
|
||
Color.fromRGBO(133, 157, 254, 1),
|
||
],
|
||
},
|
||
"auction": {
|
||
"title": "拍卖",
|
||
"color": [
|
||
Color.fromRGBO(249, 163, 125, 1),
|
||
Color.fromRGBO(251, 218, 137, 1),
|
||
]
|
||
},
|
||
"family": {
|
||
'title': "家族",
|
||
"color": [
|
||
Color.fromRGBO(85, 221, 236, 1),
|
||
Color.fromRGBO(66, 224, 154, 1),
|
||
]
|
||
},
|
||
};
|
||
|
||
var textData = {"music": '音乐', "pal": '交友', "auction": '拍卖', "family": '家族'};
|
||
|
||
var colorData = {
|
||
"music": [
|
||
Color.fromRGBO(207, 167, 248, 1),
|
||
Color.fromRGBO(133, 157, 254, 1),
|
||
],
|
||
"pal": [
|
||
Color.fromRGBO(254, 174, 205, 1),
|
||
Color.fromRGBO(247, 111, 162, 1),
|
||
],
|
||
"auction": [
|
||
Color.fromRGBO(249, 163, 125, 1),
|
||
Color.fromRGBO(251, 218, 137, 1),
|
||
],
|
||
"family": [
|
||
Color.fromRGBO(85, 221, 236, 1),
|
||
Color.fromRGBO(66, 224, 154, 1),
|
||
],
|
||
};
|
||
|
||
typeElement({Key? key, this.type = ''}) : super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
width: 32,
|
||
height: 16,
|
||
margin: EdgeInsets.only(right: 5),
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.all(
|
||
Radius.circular(8),
|
||
),
|
||
gradient: LinearGradient(
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
colors: colorData[type] ?? [],
|
||
),
|
||
),
|
||
child: Text(
|
||
textData[type] ?? "",
|
||
textAlign: TextAlign.center,
|
||
style: TextStyle(color: Colors.white, fontSize: 10),
|
||
),
|
||
);
|
||
}
|
||
}
|