Question

我竭尽所能地以网格视图的形式显示画廊图像。但是我找不到任何合适的方法。

Answer 1

您可以创建一个小部件列表并将其添加到您的gridview中，如下所示：

List<Widget> images = new List<Widget>();
images.add(Image.asset('assets/image.png', height: 35));
images.add(Image.asset('assets/image.png', height: 35));
images.add(Image.asset('assets/image.png', height: 35));

CustomScrollView(
    primary: false,
    slivers: <Widget>[
      SliverPadding(
        padding: const EdgeInsets.all(3.0),
        sliver: SliverGrid.count(
          mainAxisSpacing: 1, //horizontal space
          crossAxisSpacing: 1, //vertical space
          crossAxisCount: 3, //number of images for a row
          children: images
        ),
      ),
    ],
  ),

Answer 2

您要实现的目标非常复杂（文件夹位置，读取存储在此处的文件，确定您想显示的文件...）

有两种选择：

如果您不是在没有自己的用户界面的情况下不专门开发用于访问存储在用户手机中的照片的应用程序，请使用此插件

https://pub.dev/packages/image_picker

如果您开发的应用程序专门用于访问存储在用户手机中的照片（具有自己的UI）

以下链接可能会帮助您：

https://pub.dev/packages/image_gallery

https://pub.dev/packages/photo_view

甚至还有一个小部件，用于以称为GridView的网格形式显示多个小部件。

我建议将您的问题分解成多个部分，然后以多个问题的形式分别问每个问题，因为您的问题基本上是向整个模型询问应用程序，而这需要大量的解释。

Answer 3

此链接上的示例 https://github.com/follow2vivek/FlutterGallery

https://github.com/follow2vivek/FlutterGallery/blob/master/lib/tabview/image.dart

 @override
   Widget build(BuildContext context) 
  {

    return FutureBuilder(
  future: StoragePath.imagesPath,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      List<dynamic> list = json.decode(snapshot.data);

      return Container(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            ImageModel imageModel = ImageModel.fromJson(list[index]);
            return Container(
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  FadeInImage(
                    image: FileImage(
                      File(imageModel.files[0]),
                    ),
                    placeholder: MemoryImage(kTransparentImage),
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: double.infinity,
                  ),
                  Container(
                    color: Colors.black.withOpacity(0.7),
                    height: 30,
                    width: double.infinity,
                    child: Center(
                      child: Text(
                        imageModel.folderName,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontFamily: 'Regular'
                        ),
                      ),
                    ),
                  )
                ],
              ),
            );
          },
        ),
      );
    } else {
      return Container();
    }
  },
);

}

Answer 4

步骤 1：在 yaml 文件“gallery_view: ^0.0.4”上导入包第 2 步：pub get（安装包）第 4 步：将图像添加为 url 或来自资产图像第三步：最后运行代码b

import 'package:flutter/material.dart';
import 'package:gallery_view/gallery_view.dart';

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

class GalleryGridScreen extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<GalleryGridScreen> {
  String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gallery'),
        ),
        body: GalleryView(
          crossAxisCount: 2,
          imageUrlList: [
"imageurl1",
"imageurl2",
"imageurl3",
"imageurl4",


        ]),
      ),
    );
  }
}

Flutter如何在网格视图中显示画廊图像

4 个答案: