135 lines
4.6 KiB
Dart
135 lines
4.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class FriendsScreen extends StatefulWidget {
|
|
const FriendsScreen({super.key});
|
|
|
|
@override
|
|
State<FriendsScreen> createState() => _FriendsScreenState();
|
|
}
|
|
|
|
class _FriendsScreenState extends State<FriendsScreen> {
|
|
final List<Map<String, dynamic>> _followingUsers = [
|
|
{'id': 'linayi', 'name': '林阿姨', 'avatar': 3, 'isFollowing': true},
|
|
{'id': 'huangshu', 'name': '黄叔叔', 'avatar': 7, 'isFollowing': true},
|
|
{'id': 'zhoulaoshi', 'name': '周老师', 'avatar': 12, 'isFollowing': true},
|
|
{'id': 'hejie', 'name': '何姐', 'avatar': 18, 'isFollowing': true},
|
|
{'id': 'sudage', 'name': '苏大哥', 'avatar': 24, 'isFollowing': false},
|
|
{'id': 'taoayi', 'name': '陶阿姨', 'avatar': 31, 'isFollowing': true},
|
|
];
|
|
|
|
final List<Map<String, dynamic>> _fansUsers = [
|
|
{'id': 'baiayi', 'name': '白阿姨', 'avatar': 5, 'isFollowing': false},
|
|
{'id': 'dengshu', 'name': '邓叔', 'avatar': 14, 'isFollowing': true},
|
|
{'id': 'helaoshi', 'name': '贺老师', 'avatar': 19, 'isFollowing': false},
|
|
{'id': 'renjie', 'name': '任姐', 'avatar': 26, 'isFollowing': true},
|
|
{'id': 'luoayi', 'name': '罗阿姨', 'avatar': 38, 'isFollowing': false},
|
|
{'id': 'zhangshu', 'name': '章叔叔', 'avatar': 46, 'isFollowing': true},
|
|
];
|
|
|
|
late final Set<String> _following;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_following = {
|
|
..._followingUsers.where((u) => u['isFollowing'] as bool).map((u) => u['id'] as String),
|
|
..._fansUsers.where((u) => u['isFollowing'] as bool).map((u) => u['id'] as String),
|
|
};
|
|
}
|
|
|
|
void _toggleFollow(String userId) {
|
|
setState(() {
|
|
if (_following.contains(userId)) {
|
|
_following.remove(userId);
|
|
} else {
|
|
_following.add(userId);
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return DefaultTabController(
|
|
length: 2,
|
|
child: Scaffold(
|
|
backgroundColor: const Color(0xFFFFF8F0),
|
|
appBar: AppBar(
|
|
title: const Text('好友'),
|
|
bottom: const TabBar(
|
|
labelColor: Color(0xFFFF8A3D),
|
|
unselectedLabelColor: Color(0xFF999999),
|
|
indicatorColor: Color(0xFFFF8A3D),
|
|
tabs: [
|
|
Tab(text: '关注'),
|
|
Tab(text: '粉丝'),
|
|
],
|
|
),
|
|
),
|
|
body: TabBarView(
|
|
children: [
|
|
_buildUserList(_followingUsers),
|
|
_buildUserList(_fansUsers),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildUserList(List<Map<String, dynamic>> users) {
|
|
return ListView.separated(
|
|
padding: const EdgeInsets.all(16),
|
|
itemCount: users.length,
|
|
separatorBuilder: (_, __) => const SizedBox(height: 10),
|
|
itemBuilder: (context, index) {
|
|
final user = users[index];
|
|
final userId = user['id'] as String;
|
|
final isFollowing = _following.contains(userId);
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 22,
|
|
backgroundColor: const Color(0xFFFFE7CF),
|
|
backgroundImage: NetworkImage('https://i.pravatar.cc/50?img=${user['avatar']}'),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
user['name'] as String,
|
|
style: const TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF333333),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: 34,
|
|
child: TextButton(
|
|
onPressed: () => _toggleFollow(userId),
|
|
style: TextButton.styleFrom(
|
|
backgroundColor: isFollowing ? Colors.white : const Color(0xFFFF8A3D),
|
|
foregroundColor: isFollowing ? const Color(0xFFFF8A3D) : Colors.white,
|
|
side: const BorderSide(color: Color(0xFFFF8A3D)),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
|
|
),
|
|
child: Text(
|
|
isFollowing ? '已关注' : '关注',
|
|
style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 13),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|