《Flutter篇第二章》MasonryGridView瀑布流列表

原创

已于 2025-07-30 11:56:09 修改 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2025-07-30 11:48:37 首次发布

学习Flutter ，列表的布局是一个很重要的点，大部分常见的APP 都离不开列表，尤其是瀑布Feed流，其中，很多app 会在列表中嵌套图片、视频和AD 广告，所以今天用MasonryGridView实现了一个列表样式

先看效果：在这里插入图片描述
1、配置

  video_player: ^2.8.0
  chewie: ^1.5.0
  flutter_staggered_grid_view: ^0.7.0

2、卡片widget

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../modules/main/tabs/home/feed_item.dart';
import '../../modules/main/tabs/home/home_controller.dart';


class FeedItemCard extends StatelessWidget {
   
   
  final FeedItem item;

  const FeedItemCard({
   
   super.key, required this.item});

  @override
  Widget build(BuildContext context) {
   
   
    return Card(
      margin: const EdgeInsets.all(0),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      clipBehavior: Clip.antiAlias,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildMediaContent(),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  item.description,
                  style: const TextStyle(fontSize: 14),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 8),
                _buildInteractionRow(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMediaContent() {
   
   
    final controller = Get.find<HomeController>();

    return AspectRatio(
      aspectRatio: item.aspectRatio,
      child: Stack(
        children: [
          if (item.type == 'video')
            _buildVideoPlayer(controller)
          else
            Image.network(
              item.url,
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),

          if (item.type == 'video')
            Positioned(
              bottom: 8,
              right: 8,
              child: Container(
                padding: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 16,
                ),
              ),
            )