huixiang_app/lib/mine/vip_card_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/coupon.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class VipCardPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VipCardPage();
  }
}

class _VipCardPage extends State<VipCardPage> {
  RefreshController _refreshController;

  @override
  void initState() {
    super.initState();
    _refreshController = RefreshController(initialRefresh: false);
  }

  int pageNum = 1;
  List<Coupon> coupons = [
    Coupon(),Coupon(),Coupon(),Coupon()
  ];

  void _onRefresh() async {
    pageNum = 1;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SmartRefresher(
          enablePullDown: true,
          enablePullUp: true,
          header: ClassicHeader(),
          footer: CustomFooter(
            builder: (context, mode) {
              Widget body;
              if (mode == LoadStatus.idle) {
                body = Text("pull up load");
              } else if (mode == LoadStatus.loading) {
                body = CupertinoActivityIndicator();
              } else if (mode == LoadStatus.failed) {
                body = Text("Load Failed!Click retry!");
              } else if (mode == LoadStatus.canLoading) {
                body = Text("release to load more");
              } else {
                body = Text("-" + S.of(context).meiyougengduohuiyuanka + "-");
              }
              return Container(
                height: 55.0,
                child: Center(child: body),
              );
            },
          ),
          controller: _refreshController,
          onRefresh: _onRefresh,

          child: ListView.builder(
            itemBuilder: (context, position) {
              return GestureDetector(
                onTap: () {
                  Navigator.of(context).pushNamed('/router/vip_details_page');
                },
                child: vipCardItem(),
              );
            },
            itemCount: coupons.length,
          ),
        ),
      ),
    );
  }

  Widget vipCardItem() {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
      // margin: EdgeInsets.all(16),
      child: Stack(
        // alignment: Alignment.center,
        children: [
          Image.asset(
            "assets/image/icon_vip_bj.png",
            fit: BoxFit.contain, //填充剩余空间
            height: 185,
          ),
          Container(
            padding: EdgeInsets.only(left: 16,right: 16),
            child:Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 16),
                Row(
                  children: [
                    ClipOval(
                      child:Image.asset(
                        "assets/image/icon_vip_name.png",
                      ),
                      clipBehavior: Clip.hardEdge,
                    ),
                    SizedBox(
                      width: 12,
                    ),
                    Expanded(
                      child: Container(
                        height: 54,
                        child: Column(
                          mainAxisAlignment:
                          MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  "百年川椒火锅店",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black,
                                  ),
                                ),
                                Image.asset(
                                  "assets/image/icon_vip.png",
                                ),
                              ],
                            ),
                            Text.rich(
                              TextSpan(children: [
                                TextSpan(
                                  text: "会员卡",
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black),
                                ),
                              ]),
                              textDirection: TextDirection.ltr,
                            ),
                          ],
                        ),
                      ),
                      flex: 1,
                    )
                  ],
                ),
                SizedBox(height: 50),
                Row(
                  textDirection: TextDirection.rtl,
                  children: [
                    Icon(
                      Icons.chevron_right,
                      color: Colors.black,
                      size: 24,
                    ),
                    Text.rich(
                      TextSpan(children: [
                        TextSpan(
                          text: "查看详情",
                          style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold, color: Colors.black),
                        ),
                      ]),
                    ),
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      flex: 1,
                      child: Text.rich(
                        TextSpan(children: [
                          TextSpan(
                            text: "No.202107021324199",
                            style: TextStyle(fontSize: 14, color: Colors.black),
                          ),
                        ]),
                      ),
                    ),
                    Text.rich(
                      TextSpan(children: [
                        TextSpan(
                          text: "有效期限:",
                          style: TextStyle(fontSize: 12, color: Colors.black),
                        ),
                      ]),
                    ),
                    Text.rich(
                      TextSpan(children: [
                        TextSpan(
                          text: "长期有效",
                          style: TextStyle(fontSize: 12, color: Colors.black),
                        ),
                      ]),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}