如何在flutter上创建图片库?

问题描述 投票:0回答:1

我有一个

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',
};
flutter image-gallery
1个回答
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')
© www.soinside.com 2019 - 2024. All rights reserved.