flutter - 如何在 Flutter 上创建图片库?
问题描述
我有一个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',
};
解决方案
在真正跳入代码之前,我希望您探索某些事情。这些都是:
- PageView 类,这将帮助你了解这个滚动的东西是如何像画廊视图一样工作的。此外,将告诉您
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, cos it starts from 0 not 1, and goes up to 4 not 5
Text('${_pageIndex+1}/$_photosList.length')
推荐阅读
- javascript - 网页加载时的 Anime.js SVG 填充颜色动画
- python - Python语音识别很慢
- node.js - How to add delay in nodejs
- sql - PostgreSQL function dropped but is still available
- report - 使用 Cucable 插件并行执行黄瓜脚本时,Extent 报告仅显示一个测试用例结果
- google-chrome-devtools - Missing Link between Call Tree and Bottom-up in Chrome Devtools
- nginx - 删除不需要的参数
- python - 如何有条件地运行@property getter,例如用于过滤目的
- asp.net-mvc - Using multiple paginated lists on one HTML page
- javascript - 在反应中管理数组道具