huixiang_app/lib/home/home_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/hot_item.dart';
import 'package:huixiang/view_widget/item_title.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePage();
  }
}

class _HomePage extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        physics: BouncingScrollPhysics(),
        children: [
          banner(),
          ItemTitle(
            text: S.of(context).jinrihuiyuanrenwu,
            imgPath: "assets/image/icon_today_task.png",
            moreText: S.of(context).renwuzhongxin,
          ),
          InkWell(
            onTap: (){
              Navigator.of(context).pushNamed('/router/integral_page');
            },
            child: signIn(),
          ),
          ItemTitle(
            text: S.of(context).remenwenzhangshipin,
            imgPath: "assets/image/icon_today_task.png",
            moreText: S.of(context).chakangengduo,
            onTap: () {
              Navigator.of(context).pushNamed('/router/hot_article_page');
            },
          ),
          hotList(),
          ItemTitle(
            text: S.of(context).chuangshirendegushi,
            imgPath: "assets/image/icon_today_task.png",
          ),
          founderStory(),
          ItemTitle(
            text: S.of(context).pinpaijieshao,
            imgPath: "assets/image/icon_brand_introduction.png",
          ),
          brands(),
          ItemTitle(
            text: S.of(context).jifenshangcheng,
            imgPath: "assets/image/icon_points_mall.png",
          ),
          integralStore(),
        ],
      ),
    );
  }

  Widget hotList() {
    return AspectRatio(
      aspectRatio: 2.47,
      child: Container(
        height: 151,
        child: Swiper(
          itemCount: 7,
          viewportFraction: 0.95,
          scale: 1,
          loop: false,
          physics: BouncingScrollPhysics(),
          itemBuilder: (context, position) {
            return Container(
              margin: EdgeInsets.symmetric(vertical: 15, horizontal: 4.5),
              child: HotArticleItem(),
            );
          },
        ),
      ),
    );
  }

  Widget founderStory() {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 22, bottom: 30),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withAlpha(12),
            offset: Offset(0, 3),
            blurRadius: 14,
            spreadRadius: 0,
          )
        ],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Stack(
        alignment: Alignment.bottomCenter,
        clipBehavior: Clip.hardEdge,
        children: [
          AspectRatio(
            aspectRatio: 2.1375,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(4),
              child: Image.network(
                "https://t7.baidu.com/it/u=2487758541,1861252964&fm=193&f=GIF",
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.black.withAlpha(153),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(4),
                bottomRight: Radius.circular(4),
              ),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text.rich(
                    TextSpan(children: [
                      TextSpan(
                        text: "李旭清 ",
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      TextSpan(
                        text: "集团创始人",
                        style: TextStyle(
                          fontSize: 8.sp,
                          color: Colors.white,
                        ),
                      ),
                      TextSpan(
                        text: "            简介:1993年，台胞李旭清在台湾创建“一心回乡“",
                        style: TextStyle(
                          fontSize: 10.sp,
                          color: Colors.white,
                        ),
                      ),
                    ]),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  size: 12,
                  color: Colors.white,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget integralStore() {
    return GridView.builder(
      itemCount: 3,
      padding: EdgeInsets.only(left: 13, right: 13, top: 13, bottom: 13),
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        //一行的Widget数量
        crossAxisCount: 3,
        //水平子Widget之间间距
        crossAxisSpacing: 13,
        //垂直子Widget之间间距
        mainAxisSpacing: 16,
        //子Widget宽高比例
        childAspectRatio: 0.67,
      ),
      itemBuilder: (contetx, index) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed('/router/integral_store_page');
          },
          child: buildItem(),
        );
      },
    );
  }

  Widget buildItem() {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(4),
          ),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ],
          color: Colors.white),
      child: Column(
        children: [
          Container(
            child: AspectRatio(
              aspectRatio: 1,
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(4), topRight: Radius.circular(4)),
                child: Image.network(
                  "https://t7.baidu.com/it/u=352502701,346286041&fm=193&f=GIF",
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 8, right: 8, bottom: 12),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "马克杯",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 12),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      S.of(context).yuan(55),
                      style: TextStyle(
                          color: Color(0xFF585858),
                          decoration: TextDecoration.lineThrough,
                          decorationColor: Color(0xFF585858),
                          fontSize: 12),
                    ),
                    Text(
                      S.of(context).jifen_(99),
                      style: TextStyle(
                          color: Color(0xFF32A060),
                          fontSize: 14,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget signIn() {
    return Container(
      padding: EdgeInsets.only(left: 12, top: 8, bottom: 8, right: 12),
      margin: EdgeInsets.all(16),
      decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ],
          borderRadius: BorderRadius.all(Radius.circular(4))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                Icons.calendar_today_sharp,
                size: 20,
              ),
              SizedBox(
                width: 8,
              ),
              Text(
                S.of(context).qiandaolingqujinfen,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                ),
              ),
            ],
          ),
          Text(
            S.of(context).quqiandao,
            style: TextStyle(
              color: Color(0xFF727272),
              fontSize: 12,
            ),
          )
        ],
      ),
    );
  }

  brands() {
    var images = [
      "https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3655946603,4193416998&fm=193&f=GIF"
    ];
    return Container(
      margin: EdgeInsets.only(bottom: 18),
      child: AspectRatio(
        aspectRatio: 4.16,
        child: Swiper(
            loop: false,
            viewportFraction: 0.32,
            scale: 0.70,
            itemBuilder: (context, position) {
              return Container(
                margin: EdgeInsets.symmetric(horizontal: 3, vertical: 15),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(37),
                        offset: Offset(0, 2),
                        blurRadius: 5,
                        spreadRadius: 0)
                  ],
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  child: Image.network(
                    images.elementAt(position),
                    fit: BoxFit.cover,
                  ),
                ),
              );
            },
            itemCount: images.length),
      ),
    );
  }

  banner() {
    var images = [
      "https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3655946603,4193416998&fm=193&f=GIF"
    ];
    return Container(
      margin: EdgeInsets.all(16),
      child: AspectRatio(
        aspectRatio: 2.28,
        child: Swiper(
            pagination: SwiperPagination(
              alignment: Alignment.bottomCenter,
              builder: DotSwiperPaginationBuilder(
                size: 8,
                activeSize: 8,
                space: 5,
                activeColor: Colors.white,
                color: Colors.white.withAlpha(76),
              ),
            ),
            itemBuilder: (context, position) {
              return Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(8))),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    child: Image(
                        fit: BoxFit.cover,
                        image: NetworkImage(images.elementAt(position))),
                  ));
            },
            itemCount: images.length),
      ),
    );
  }
}