dating_touchme_app/lib/widget/live/live_room_user_header.dart

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

/// 直播间顶部用户信息与操作区域
class LiveRoomUserHeader extends StatelessWidget {
  const LiveRoomUserHeader({
    super.key,
    required this.userName,
    required this.popularityText,
    this.avatarAsset = Assets.imagesUserAvatar,
    this.fireIconAsset = Assets.imagesFireIcon,
    this.closeIconAsset = Assets.imagesCloseArrow,
    this.onFollowTap,
    this.onCloseTap,
  });

  final String userName;
  final String popularityText;
  final String avatarAsset;
  final String fireIconAsset;
  final String closeIconAsset;
  final VoidCallback? onFollowTap;
  final VoidCallback? onCloseTap;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          height: 40.w,
          padding: EdgeInsets.symmetric(horizontal: 3.w),
          margin: EdgeInsets.only(left: 10.w),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(40.w)),
            color: const Color.fromRGBO(0, 0, 0, .25),
          ),
          child: Row(
            children: [
              // 支持网络图片和本地资源
              ClipOval(
                      child: Image.network(
                        avatarAsset,
                        width: 34.w,
                        height: 34.w,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Image.asset(
                            Assets.imagesUserAvatar,
                            width: 34.w,
                            height: 34.w,
                          );
                        },
                      ),
                    ),
              SizedBox(width: 7.w),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    userName,
                    style: TextStyle(
                      fontSize: 13.w,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        GestureDetector(
          onTap: onCloseTap,
          child: Container(
            width: 30.w,
            height: 30.w,
            margin: EdgeInsets.only(right: 15.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30.w)),
              color: const Color.fromRGBO(0, 0, 0, .3),
            ),
            child: Center(
              child: Image.asset(
                closeIconAsset,
                width: 14.w,
                height: 14.w,
              ),
            ),
          ),
        ),
      ],
    );
  }
}