Flutter - 如何使用网格 UI 制作省略的小部件

Question

这里是颤振新手，

尝试制作一个与上图完全相同的照片网格 UI。

只能放置 3 个盒子，并且每个盒子都是一张照片卡。 如果我有 4 张图片，右下角的暗框会显示 +1，如果有 5 张，则显示 +2，依此类推。

不少于3个，最少4个，只需处理网格布局完全相同的3个盒子（上面的屏幕截图）和数字（灰色盒子上）。

不太确定是否要省略它来呈现列表。

提前致谢。

Answer 1

您可以使用 GridView.count 这是您可以尝试实现它的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo Grid',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // Add more images as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Grid'),
      ),
      body: GridView.count(
        crossAxisCount: 3,
        children: List.generate(3, (index) {
          if (index < images.length) {
            return PhotoCard(image: images[index]);
          } else if (index == 3) {
            return OverflowBox(
              minWidth: 100.0,
              minHeight: 100.0,
              maxWidth: 150.0,
              maxHeight: 150.0,
              child: Container(
                color: Colors.grey.withOpacity(0.5),
                child: Center(
                  child: Text(
                    '+${images.length - 3}',
                    style: TextStyle(fontSize: 24.0),
                  ),
                ),
              ),
            );
          } else {
            return SizedBox.shrink();
          }
        }),
      ),
    );
  }
}

class PhotoCard extends StatelessWidget {
  final String image;

  const PhotoCard({Key key, this.image}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: DecorationImage(
          image: AssetImage(image),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}