BistroFrontend/lib/life.dart

import 'package:bistro/common/global.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

  @override
  State<Life> createState() => _LifeState();
}

class _LifeState extends State<Life> {
  List<Map> _list = [];

  @override
  void initState() {
    super.initState();
    _list = [
      {
        'id': '1',
        'thumbnail': 'res/assets/images/logo.jpg',
        'title': '标题1',
        'author':
            '苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉',
        'hasLiked': false
      },
      {
        'id': '2',
        'thumbnail': 'res/assets/images/dololo.jpg',
        'title': '标题2',
        'author': '启辰',
        'hasLiked': true
      },
      {
        'id': '3',
        'thumbnail': 'res/assets/images/ch4o5.png',
        'title': '标题3',
        'author': '乱世人魔',
        'hasLiked': false
      },
      {
        'id': '4',
        'thumbnail': 'res/assets/images/fire.jpg',
        'title': '标题4',
        'author': 'Singularity',
        'hasLiked': false
      },
      {
        'id': '5',
        'thumbnail': 'res/assets/images/tiefutu.jpg',
        'title': '标题5',
        'author': '浅帅',
        'hasLiked': true
      },
      {
        'id': '6',
        'thumbnail': 'res/assets/images/logo.jpg',
        'title': '标题6',
        'author':
            '苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉苏月桉',
        'hasLiked': false
      },
      {
        'id': '7',
        'thumbnail': 'res/assets/images/dololo.jpg',
        'title': '标题7',
        'author': '启辰',
        'hasLiked': true
      },
      {
        'id': '8',
        'thumbnail': 'res/assets/images/ch4o5.png',
        'title': '标题8',
        'author': '乱世人魔',
        'hasLiked': false
      },
      {
        'id': '9',
        'thumbnail': 'res/assets/images/fire.jpg',
        'title': '标题9',
        'author': 'Singularity',
        'hasLiked': false
      },
      {
        'id': '10',
        'thumbnail': 'res/assets/images/tiefutu.jpg',
        'title': '标题10标题10标题10标题10标题10标题10标题10标题10标题10标题10标题10标题10',
        'author': '浅帅',
        'hasLiked': true
      },
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MasonryGridView.count(
      shrinkWrap: true,
      itemCount: _list.length,
      crossAxisCount: 2,
      itemBuilder: cardBuilder,
      padding: const EdgeInsets.only(top: 8),
      mainAxisSpacing: 6.0,
      // crossAxisSpacing: 4.0,
    );
  }

  Widget cardBuilder(BuildContext context, int index) {
    var item = _list[index];

    return Card(
        key: ValueKey(item["id"]),
        clipBehavior: Clip.antiAlias,
        elevation: 3,
        color: Theme.of(context).colorScheme.tertiary,
        child: GestureDetector(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                item['thumbnail'],
                fit: BoxFit.fitWidth,
              ),
              ListTile(
                title: Text(
                  item["title"].toString(),
                  maxLines: 2,
                  style: const TextStyle(
                    fontSize: 13,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
                // isThreeLine: true,
                subtitle: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    ConstrainedBox(
                      constraints: const BoxConstraints(maxWidth: 100),
                      child: Text(
                        item['author'].toString(),
                        softWrap: true,
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                        style: const TextStyle(
                          fontSize: 11,
                        ),
                      ),
                    ),
                    GestureDetector(
                      excludeFromSemantics: true,
                      child: Icon(
                        item["hasLiked"]
                            ? Icons.favorite
                            : Icons.favorite_border,
                        color: Theme.of(context).primaryColor,
                      ),
                      onTap: () {
                        setState(() {
                          _list[index]["hasLiked"] = !item["hasLiked"];
                        });
                      },
                    ),
                  ],
                ),
              )
            ],
          ),
          onTap: () {
            printWhenDebug(123);
          },
        ));
  }
}