DIgitalLife/lib/views/social.dart

import 'package:flutter/material.dart';

class SocialPage extends StatefulWidget {
  const SocialPage({super.key});

  @override
  State<SocialPage> createState() => _SocialPageState();
}

class _SocialPageState extends State<SocialPage> {
  final List<Map<String, dynamic>> posts = [
    {
      "user": "邻居A",
      "likes": 360,
    },
    {
      "user": "邻居B",
      "likes": 280,
    },
    {
      "user": "邻居C",
      "likes": 420,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },
    {
      "user": "邻居D",
      "likes": 150,
    },

  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.75,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
        ),
        itemCount: posts.length,
        itemBuilder: (context, index) {
          final post = posts[index];
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PostDetailPage(post: post),
                ),
              );
            },
            child: Card(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Placeholder(
                    fallbackHeight: 150,
                    color: Colors.grey,
                  ),
                  Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(post['user'], style: const TextStyle(fontSize: 16)),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                const Icon(Icons.favorite, color: Colors.grey, size: 10,),
                                const SizedBox(width: 5),
                                Text(post['likes'].toString()),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 社交帖详情页面
class PostDetailPage extends StatelessWidget {
  final Map<String, dynamic> post;

  PostDetailPage({super.key, required this.post});

  // 假数据，用户评论
  final List<Map<String, dynamic>> comments = [
    {
      "username": "用户1",
      "date": "2024-08-24",
      "content": "这是一个很有趣的帖子！",
      "likes": 120,
    },
    {
      "username": "用户2",
      "date": "2024-08-23",
      "content": "我很喜欢这个内容。",
      "likes": 89,
    },
    {
      "username": "用户3",
      "date": "2024-08-22",
      "content": "赞同楼上的看法。",
      "likes": 45,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(post['user'], style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                const SizedBox(height: 10),
                const Text("发布时间: 2024-08-24"),
                const SizedBox(height: 20),
                const Text("这是社交帖的内容。这是一段假数据。", style: TextStyle(fontSize: 16)),
              ],
            ),
          ),
          const Divider(),
          Expanded(
            child: ListView.builder(
              itemCount: comments.length,
              itemBuilder: (context, index) {
                final comment = comments[index];
                return ListTile(
                  leading: const CircleAvatar(
                    child: Placeholder(),
                  ),
                  title: Text(comment['username']),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(comment['content']),
                      const SizedBox(height: 5),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(comment['date'], style: const TextStyle(fontSize: 12, color: Colors.grey)),
                          Row(
                            children: [
                              const Icon(Icons.favorite, color: Colors.red, size: 16),
                              const SizedBox(width: 4),
                              Text(comment['likes'].toString()),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          const Divider(),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                const Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: '发表评论...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("发布"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}