import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        HeaderComponent(),
        RoomComponent(),
      ],
    );
  }
}

// 头部
class HeaderComponent extends StatefulWidget {
  HeaderComponent({Key? key}) : super(key: key);

  @override
  State<HeaderComponent> createState() => _HeaderComponentState();
}

class _HeaderComponentState extends State<HeaderComponent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Image.asset(
            'images/home/header.png',
            width: double.infinity,
            height: 140.0,
            fit: BoxFit.cover,
          ),
          Container(
            padding: const EdgeInsets.fromLTRB(12.0, 39.0, 15.0, 0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        ClipOval(
                          child: Image.asset(
                            'images/home/photo.png',
                            width: 56.0,
                            height: 56.0,
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  "以冬",
                                  style: TextStyle(
                                    fontSize: 16.0,
                                    fontWeight: FontWeight.bold,
                                    color: Color.fromRGBO(51, 51, 51, 1),
                                  ),
                                ),
                                SizedBox(
                                  width: 6,
                                ),
                                Container(
                                  padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
                                  decoration: BoxDecoration(
                                      color: Color.fromRGBO(56, 208, 229, 1),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(12),
                                      )),
                                  child: Text(
                                    "1级",
                                    style: TextStyle(
                                        fontSize: 10,
                                        color:
                                            Color.fromRGBO(255, 255, 255, 1)),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Container(
                              padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    const BorderRadius.all(Radius.circular(30)),
                              ),
                              child: Row(
                                children: [
                                  Image.asset(
                                    "images/home/gold.png",
                                    width: 19.0,
                                    height: 19.0,
                                  ),
                                  SizedBox(
                                    width: 6,
                                  ),
                                  Text(
                                    "175",
                                    style: TextStyle(
                                      fontSize: 12.0,
                                      color: Color.fromRGBO(51, 51, 51, 1),
                                    ),
                                  ),
                                  SizedBox(
                                    width: 6,
                                  ),
                                  Image.asset(
                                    "images/home/add.png",
                                    width: 19.0,
                                    height: 19.0,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Image.asset(
                          'images/home/gift.png',
                          width: 28,
                          height: 28,
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text("活动")
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  height: 26,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "优质房间",
                      style: TextStyle(
                        color: Color.fromRGBO(51, 51, 51, 1),
                        fontSize: 16,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                    Row(
                      children: [
                        Text(
                          "更多",
                          style: TextStyle(
                            color: Color.fromRGBO(153, 153, 153, 1),
                            fontSize: 14,
                          ),
                        ),
                        SizedBox(
                          width: 6,
                        ),
                        Image.asset(
                          "images/home/right_arrow.png",
                          width: 6,
                          height: 12,
                        )
                      ],
                    )
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 优质房间
class RoomComponent extends StatefulWidget {
  RoomComponent({Key? key}) : super(key: key);

  @override
  State<RoomComponent> createState() => _RoomComponentState();
}

class _RoomComponentState extends State<RoomComponent> {
  List listData = [
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
  ];
  List<Widget> _getDataList() {
    var list = listData.map(
      (item) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15)),
            boxShadow: [
              BoxShadow(
                  // color: Color.fromRGBO(51, 51, 51, 1),
                  color: Color.fromRGBO(0, 0, 0, 0.1),
                  offset: Offset(0.0, 4.0), //阴影xy轴偏移量
                  blurRadius: 10.0, //阴影模糊程度
                  spreadRadius: 1.0 //阴影扩散程度
                  )
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                  Radius.circular(15),
                )),
                child: Stack(
                  children: [
                    Image.asset(
                      item['imgUrl'],
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      top: 5,
                      left: 10,
                      child: Container(
                        padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(8),
                          ),
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Color.fromRGBO(247, 111, 162, 1),
                              Color.fromRGBO(254, 174, 205, 1),
                            ],
                          ),
                        ),
                        child: Text(
                          "交友",
                          style: TextStyle(
                            color: Color.fromRGBO(255, 255, 255, 1),
                            fontSize: 10,
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 4,
                      left: 4,
                      child: Container(
                        padding: EdgeInsets.fromLTRB(6, 4, 6, 4),
                        decoration: BoxDecoration(
                            color: Color.fromRGBO(0, 0, 0, 0.3),
                            borderRadius: BorderRadius.all(
                              Radius.circular(8),
                            )),
                        child: Row(
                          children: [
                            Image.asset(
                              'images/home/fire.png',
                              width: 8,
                              height: 9,
                            ),
                            SizedBox(
                              width: 4,
                            ),
                            Text(
                              "1122",
                              style: TextStyle(
                                  fontSize: 10,
                                  color: Color.fromRGBO(255, 255, 255, 1)),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 10,
              ), //设置上下的间距
              Container(
                padding: EdgeInsets.only(left: 10),
                child: Text(
                  item['title'],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 12,
                    color: Color.fromRGBO(51, 51, 51, 1),
                    fontWeight: FontWeight.w400,
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridView.count(
        shrinkWrap: true,
        crossAxisCount: 3, //每行的数量
        crossAxisSpacing: 12.0, //左右间距
        mainAxisSpacing: 12.0, //上下间距
        padding: EdgeInsets.all(15),
        childAspectRatio: 0.75,
        children: this._getDataList(),
      ),
    );
  }
}