dating-touchme-app/lib/pages/chat_page.dart

import 'package:dating_touchme_app/components/home_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {


  List<String> topNav = ["聊天", "好友"];

  List<Map> chatList = [
    {"avatar": "assets/system_notifi.png", "isOnline": false, "userName": "系统通知", "messageNum": 2, "lastMessage": "在干嘛"},
    {"avatar": "assets/user_avatar.png", "isOnline": true, "userName": "林园园", "messageNum": 2, "lastMessage": "在干嘛"},
    {"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李晖", "messageNum": 0, "lastMessage": "好的"},
    {"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李哲", "messageNum": 0, "lastMessage": "在干嘛"},
    {"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李夏", "messageNum": 0, "lastMessage": "在干嘛"},
  ];

  List<Map> topList = [
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
  ];

  void changeNav(int active) {
    print("当前项: $active");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1)
            Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1)
          ],
          stops: [0.0, 1.0],
        ),
      ),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 36.w),
            child: HomeAppbar(topNav: topNav, changeNav: changeNav, right: InkWell(
              onTap: (){
                print("12121");
              },
              child: Image.asset(
                "assets/search.png",
                width: 29.w,
                height: 31.w,
              ),
            ),),
          ),
          Container(
            width: 750.w,
            padding: EdgeInsets.only(
              top: 5.w,
              bottom: 46.w
            ),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(width: 11.w,),
                  ...topList.map((e){
                    return TopItem(item: e);
                  }),
                ],
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 31.w),
            child: Column(
              children: [
                ...chatList.map((e){
                  return ChatItem(item: e);
                }),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class ChatItem extends StatefulWidget {
  final Map item;
  const ChatItem({super.key, required this.item});

  @override
  State<ChatItem> createState() => _ChatItemState();
}

class _ChatItemState extends State<ChatItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 15.w),
      margin: EdgeInsets.only(bottom: 15.w),
      child: Row(
        children: [
          Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(92.w)),
                child: Image.asset(
                  widget.item["avatar"],
                  width: 92.w,
                  height: 92.w,
                ),
              ),
              if(widget.item["isOnline"]) Positioned(
                right: 0,
                bottom: 0,
                child: Container(
                  width: 22.w,
                  height: 22.w,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(22.w)),
                      color: const Color.fromRGBO(43, 255, 132, 1)
                  ),
                ),
              ),
            ],
          ),
          SizedBox(width: 17.w,),
          SizedBox(
            width: 578.w,
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      widget.item["userName"],
                      style: TextStyle(
                          fontSize: 27.w,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                          fontWeight: FontWeight.w500
                      ),
                    ),
                    Text(
                      "19.24",
                      style: TextStyle(
                        fontSize: 23.w,
                        color: const Color.fromRGBO(51, 51, 51, .6),
                      ),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      widget.item["lastMessage"],
                      style: TextStyle(
                        fontSize: 23.w,
                        color: const Color.fromRGBO(51, 51, 51, .6),
                      ),
                    ),
                    if(widget.item["messageNum"] > 0) Container(
                      width: 38.w,
                      height: 38.w,
                      margin: EdgeInsets.only(right: 9.w),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(38.w)),
                        color: const Color.fromRGBO(255, 87, 51, 1)
                      ),
                      child: Center(
                        child: Text(
                          "${widget.item["messageNum"]}",
                          style: TextStyle(
                            fontSize: 23.w,
                            color: Colors.white
                          ),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

class TopItem extends StatefulWidget {
  final Map item;
  const TopItem({super.key, required this.item});

  @override
  State<TopItem> createState() => _TopItemState();
}

class _TopItemState extends State<TopItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      child: Stack(
        children: [
          SizedBox(
            width: 101.w,
            height: 101.w,
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(101.w)),
              child: Container(
                padding: EdgeInsets.all(4.w),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(101.w)),
                    border: Border.all(width: 1, color: widget.item["isFriend"] ? const Color.fromRGBO(115, 143, 255, 1) : const Color.fromRGBO(255, 115, 164, 1))
                ),
                child: Image.asset(
                  "assets/user_avatar.png",
                  width: 92.w,
                  height: 92.w,
                ),
              ),
            ),
          ),
          if(!widget.item["isFriend"]) Positioned(
            bottom: 0,
            left: 13.w,
            child: Container(
              width: 76.w,
              height: 24.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(24.w)),
                color: const Color.fromRGBO(255, 115, 164, 1)
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/blind_data.png",
                    width: 19.w,
                    height: 16.w,
                  ),
                  SizedBox(width: 4.w,),
                  Text(
                    "相亲",
                    style: TextStyle(
                      fontSize: 16.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
          ),
          if(widget.item["isFriend"]) Positioned(
            bottom: 0,
            left: 13.w,
            child: Container(
              width: 76.w,
              height: 24.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(24.w)),
                  color: const Color.fromRGBO(115, 143, 255, 1)
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/make_friend.png",
                    width: 20.w,
                    height: 16.w,
                  ),
                  SizedBox(width: 4.w,),
                  Text(
                    "交友",
                    style: TextStyle(
                        fontSize: 16.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}