dating_touchme_app/lib/pages/home/timeline_info.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<TimelineInfo> createState() => _TimelineInfoState();
}

class _TimelineInfoState extends State<TimelineInfo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "详情"),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: 16.w,
            vertical: 10.w
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Image.asset(
                        Assets.imagesUserAvatar,
                        width: 40.w,
                        height: 40.w,
                      ),
                      SizedBox(width: 8.w,),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "刘美玲",
                            style: TextStyle(
                                fontSize: 13.w,
                                fontWeight: FontWeight.w500
                            ),
                          ),
                          Text(
                            "15:16",
                            style: TextStyle(
                                fontSize: 11.w,
                                color: const Color.fromRGBO(51, 51, 51, .6),
                                fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                  PopupMenuButton<String>(
                    tooltip: "",
                    padding: EdgeInsets.zero,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                    color: Colors.white,
                    elevation: 8,
                    offset: Offset(0, 32.w), // 相对按钮下移一点
                    itemBuilder: (context) => [
                      const PopupMenuItem(value: 'report', child: Text('举报')),
                    ],
                    onSelected: (v) {
                      if (v == 'report') {
                        print("举报");
                      }
                    },
                    child: Icon(
                      Icons.keyboard_control,
                      size: 15.w,
                      color: const Color.fromRGBO(51, 51, 51, 1),
                    ), // 你的小圆按钮
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 11.w),
                child: Text(
                    "你总顾及别人，那谁来顾及你。你总顾及别人，那谁来顾及你。你总顾及别人，那谁来顾及你。你总顾及别人，那谁来顾及你。"
                ),
              ),
              Image.asset(
                Assets.imagesRoseBanner,
                width: 343.w,
              ),
              SizedBox(height: 15.w,),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Row(
                    children: [
                      Image.asset(
                        Assets.imagesLikeIcon,
                        width: 14.w,
                        height: 12.w,
                      ),
                      SizedBox(width: 6.w,),
                      Text(
                        "47",
                        style: TextStyle(
                            fontSize: 11.w,
                            color: const Color.fromRGBO(144, 144, 144, .6)
                        ),
                      )
                    ],
                  ),
                  SizedBox(width: 33.w,),
                  Row(
                    children: [
                      Image.asset(
                        Assets.imagesCommentIcon,
                        width: 15.w,
                        height: 15.w,
                      ),
                      SizedBox(width: 6.w,),
                      Text(
                        "23",
                        style: TextStyle(
                            fontSize: 11.w,
                            color: const Color.fromRGBO(144, 144, 144, .6)
                        ),
                      )
                    ],
                  ),
                ],
              ),
              SizedBox(height: 18.w,),
              Text(
                "全部评论(23)",
                style: TextStyle(
                  fontSize: 13.w,
                  color: const Color.fromRGBO(144, 144, 144, 1),
                  fontWeight: FontWeight.w500
                ),
              ),
              SizedBox(height: 20.w,),
              CommentItem(),
              CommentItem(),
              CommentItem(),
              CommentItem(),
              CommentItem(),
              CommentItem(),
              CommentItem(),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<CommentItem> createState() => _CommentItemState();
}

class _CommentItemState extends State<CommentItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.asset(
                  Assets.imagesUserAvatar,
                  width: 40.w,
                  height: 40.w,
                ),
                SizedBox(width: 8.w,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "刘美玲",
                        style: TextStyle(
                          fontSize: 13.w,
                          color: const Color.fromRGBO(144, 144, 144, 1),
                        ),
                      ),
                      SizedBox(height: 5.w,),
                      SizedBox(
                        child: Text(
                          "看起来还不错！看起来还不错！看起来还不错！看起来还不错！看起来还不错！看起来还不错！看起来还不错！看起来还不错！",
                          style: TextStyle(
                              fontSize: 13.w,
                              fontWeight: FontWeight.w500
                          ),
                        ),
                      ),
                      SizedBox(height: 5.w,),
                      Text(
                        "15:16·回复",
                        style: TextStyle(
                          fontSize: 11.w,
                          color: const Color.fromRGBO(51, 51, 51, .6),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          Image.asset(
            Assets.imagesLikeIcon,
            width: 14.w,
          )
        ],
      ),
    );
  }
}