category_item.dart 7.29 KB
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:Parlando/category/models/category_item_entity.dart';
import 'package:Parlando/poem/poem_router.dart';
import 'package:Parlando/res/gaps.dart';
import 'package:Parlando/res/resources.dart';
import 'package:Parlando/routers/fluro_navigator.dart';
import 'package:Parlando/extension/int_extension.dart';

class CategoryItem extends StatelessWidget {
  const CategoryItem({
    Key? key,
    required this.item,
    required this.index,
    required this.selectIndex,
  }) : super(key: key);

  final CategoryItemEntity item;
  final int index;
  final int selectIndex;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        NavigatorUtils.push(context, '${PoemRouter.poemDetailPage}?id=100');
      },
      child: item.bgImage != null && item.bgImage != ""
          ? Container(
              margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
              width: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(item.bgImage!),
                  fit: BoxFit.fill,
                ),
                border: Border.all(
                  color: Colors.grey,
                  width: 0.5,
                ), //
              ),
              child: Padding(
                padding: EdgeInsets.all(10.px),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      //交叉轴的布局方式,对于column来说就是水平方向的布局方式
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Text(item.flag ?? "此地"),
                        // Icon(
                        //   Icons.query_builder_outlined,
                        //   size: 15.0,
                        // ),
                        Wrap(
                          crossAxisAlignment: WrapCrossAlignment.center,
                          children: [
                            Icon(
                              Icons.room_outlined,
                              size: 15.px,
                            ),
                            Text(
                              item.timeLunar ?? "北京 海淀 万泉庄",
                              maxLines: 3,
                            ),
                          ],
                        ),
                        Text(
                          item.period ?? "冬",
                          style: const TextStyle(
                            fontSize: 30,
                            fontFamily: "ZhiMangXing",
                          ),
                        ),
                      ],
                    ),
                    Gaps.vGap16,
                    Text(
                      item.poem ?? "前不见古人,后不见来者。\n念天地之悠悠,独怆然而涕下。\n",
                      style: TextStyle(
                        fontSize: 22.px,
                        fontFamily: "ZCOOLXiaoWei",
                      ),
                    ),
                    Gaps.vGap5,
                    Container(
                      width: double.infinity,
                      alignment: Alignment.centerRight,
                      child: Text(
                        item.author ?? "[唐] 陈子昂《登幽州台歌》",
                        maxLines: 1,
                      ),
                    ),
                  ],
                ),
              ),
            )
          : Container(
              margin: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.grey.shade200.withOpacity(0.1),
                border: Border.all(
                  color: Colors.grey,
                  width: 0.5,
                ), // 边色与边宽度
              ),
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 10.0,
                    sigmaY: 10.0,
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.grey.shade200.withOpacity(0.1),
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(10.px),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            mainAxisSize: MainAxisSize.max,
                            //交叉轴的布局方式,对于column来说就是水平方向的布局方式
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Text(item.flag ?? "此地"),
                              // Icon(
                              //   Icons.query_builder_outlined,
                              //   size: 15.0,
                              // ),
                              Wrap(
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  Icon(
                                    Icons.room_outlined,
                                    size: 15.px,
                                  ),
                                  Text(
                                    item.timeLunar ?? "北京 海淀 万泉庄",
                                    maxLines: 3,
                                  ),
                                ],
                              ),
                              Text(
                                item.period ?? "冬",
                                style: const TextStyle(
                                  fontSize: 30,
                                  fontFamily: "ZhiMangXing",
                                ),
                              ),
                            ],
                          ),
                          Gaps.vGap16,
                          Text(
                            item.poem ?? "前不见古人,后不见来者。\n念天地之悠悠,独怆然而涕下。\n",
                            style: TextStyle(
                              fontSize: 22.px,
                              fontFamily: "ZCOOLXiaoWei",
                            ),
                          ),
                          Gaps.vGap5,
                          Container(
                            width: double.infinity,
                            alignment: Alignment.centerRight,
                            child: Text(
                              item.author ?? "[唐] 陈子昂《登幽州台歌》",
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
    );
  }
}