如何在flutter上创建图片库？

Question

我有一个

Set<String>

变量，其中包含图像文件列表。在

Card

对象中，除了一些

Text

元素之外，我还想创建一个像这样的图像库：

Set<String>

中存储的图像数量是可变的。如果可能的话，我想在角落（右上角）显示当前数字图像和图像总数（例如 1/5）。

图像将从网络服务器中撤回，我不知道将它们保存在缓存中是否更有效。我不想使用存储文件夹来保存图像。

如果可能的话，我会在单个http请求中撤回所有图像，以节省时间。

这里的变量：

Set<String> _photosList = {
'http://myhost.com/image01.jpg',
'http://myhost.com/image02.bmp',
'http://myhost.com/image03.png',
'http://myhost.com/image04.gif',
};

Answer 1

在实际开始编写代码之前，我希望您先探索一些事情。这些是：

• PageView 类，这将帮助您了解这个滚动的东西是如何像 Gallery View 一样工作的。另外，将告诉您

  nextPage

  和

  previousPage

  如何与图标点击配合使用
• PageController 类 页面在

  PageView

中如何工作
• Stack 类，用于将箭头对齐在图库顶部

现在让我们跳到代码，看看它是如何工作的。 关注评论了解每件作品

  // this will keep track of the current page index
  int _pageIndex = 0;
  
  // this is your page controller, which controls the page transition
  final PageController _controller = new PageController();
  
  Set<String> _photosList = {
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqRwpDKN_zJr1C7pPeWcwOa36BtPm4HeLPgA&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSgjZ8pw5WLIGMBibVi_g4CMlSE-EOvrLv7Ag&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQUuMIENOhc1DmruZ6SwLc7JtrR6ZMBRAb3jQ&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzasDrBHWV-84vxbmlX7MTuz3QHqtT8jtTuA&usqp=CAU'
  };

现在是图库视图的 UI。

请注意：此代码支持视图中的滑动功能。如果您想禁用它，只需在您的

Pageview.builder()

中添加此行

physics:new NeverScrollableScrollPhysics()

         Container(
            // use MediaQuery always, it will always adjust the dimensions
            // according to different screens
            height: MediaQuery.of(context).size.height * 0.3,
            width: MediaQuery.of(context).size.width * 0.4,
            // here is your stack
            child: Stack(
              children: [
                // PageView.builder is just the part of PageView, read through
                // Documentation, and you will get to know
                PageView.builder(
                  controller: _controller,
                  // here you can remove swipe gesture. UNCOMMENT IT 
                  // physics:new NeverScrollableScrollPhysics()
                  onPageChanged: (index){ 
                    // with each change updating the index of our variable too
                    setState(() => _pageIndex = index);
                  },
                  itemCount: _photosList.length,
                  // building the view of our gallery
                  itemBuilder: (BuildContext context, int position){
                    return Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(_photosList.elementAt(position))
                          )
                        )
                      )
                    );
                  }
                ),
                
                // this will come over the images, the icon buttons
                Positioned(
                  left: 0.0,
                  right: 0.0,
                  top: MediaQuery.of(context).size.height * 0.12,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      IconButton(
                        onPressed: (){
                          // checking if we are not on pos = 0
                          // then we can always go back else do nothing
                          if(_pageIndex != 0)
                            _controller.previousPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                        },
                        icon: Icon(Icons.arrow_back_ios, color: Colors.white, size: 28.0)
                      ),
                      IconButton(
                        onPressed: (){
                          // checking if we are not on pos = photosList.length - 1
                          // we calculate 0 to length-1
                          // then we can always go forward else do nothing
                          if(_pageIndex < _photosList.length-1)
                            _controller.nextPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                        },
                        icon: Icon(Icons.arrow_forward_ios, color: Colors.white, size: 28.0)
                      ),
                    ]
                  )
                )
              ]
            )
          )

结果

指针：为了在角上显示它们的编号。只需使用代码中已经存在的两个变量即可

• _pageIndex

  ，保持页面变更更新

• _photosList.length

  ，它为您提供图像的总数

执行类似操作，并在同一视图中使用

Container

显示它：

//_pageIndex + 1, because it starts from 0 not 1, and goes up to 4 not 5
Text('${_pageIndex+1}/$_photosList.length')