Flutter入门:教程4 ListView

介绍

您好,欢迎阅读Flutter入门系列中的另一篇文章。 在这里,我将探索ListView小部件。 根据Flutter网站

引用:

ListView是最常用的滚动小部件。 它在滚动方向上一个接一个地显示其子级

让我们深入研究充满希望的未来框架。

背景

本文的最终目的是创建如下所示的UI:

在此,我们希望创建一个滚动列表,该列表将城市受欢迎的地标显示为显示图像,其他信息包括城市人口和所处的国家。

教程目的

在本文中,我们将创建基于ListView的应用程序,其中首先显示非常原始的城市列表,然后在此基础上显示城市namepopulation ,所属城市。 第三,我们将其受欢迎的地标显示为图像,最后,我们进一步增强了UI并在用户点击ListItem显示SnackBar (一种类型的小消息通知)。

使用代码

任务1 :让我们从应用程序的第一阶段开始,在该阶段我们创建仅显示城市名称的原始ListView。

首先在model文件夹下创建City类(您必须在lib文件夹内创建该文件夹),它将作为显示的基础模型。 如果您不知道如何创建Flutter项目,我已经详细解释了,请参阅本文以获取一般知识。

 班级城市{ 
  //-城市名称 
最终的字符串名称;
// - 图片
最终的String图片;
//-人口
最后的String人口;
//-国家
最终的String国家;
 城市({this.name,this.country,this.population,this.image}); 
}

在此课程中,我提供基本的骨骼课程,该课程将提供要在图块中显示的模型。让我们在City类别中添加代码以向Cities提供列表,尽管这样做不是很好的做法,但是为了简单起见,在此处进行操作。

 静态List  allCities() 
{
var lstOfCities = new List ();
  lstOfCities.add(新城市(名称:“德里”,国家/地区:“印度”,人口:“ 19磨坊”,图像:“ delhi.png”))); 
lstOfCities.add(新城市(名称:“伦敦”,国家:“英国”,人口:“ 8磨房”,图像:“ london.png”)));
lstOfCities.add(新城市(名称:“ Vancouver”,国家:“ Canada”,人口:“ 2.4 mill”,图像:“ vancouver.png”)));
lstOfCities.add(新城市(名称:“纽约”,国家/地区:“ USA”,人口:“ 8.1 mill”,图像:“ newyork.png”)));
lstOfCities.add(新城市(名称:“巴黎”,国家/地区:“ France”,人口:“ 2.2 mill”,图像:“ paris.png”)));
lstOfCities.add(新城市(名称:“柏林”,国家:“德国”,人口:“ 3.7米尔”,图像:“ berlin.png”)));
返回lstOfCities;
}

这样,我们的City类就完成了,将所有代码保存在city.dart文件中。 现在,通过名称pageslib文件夹中添加另一个文件夹,添加我们唯一的页面homepage.dart 。 由于我们不需要在这里处理状态,因此我们可以简单地构建扩展StatelessWidgetHomePage 。 这是初始代码

 导入'package:flutter / material.dart'; 
导入'package:flutter4_listview / model / city.dart';
  HomePage扩展StatelessWidget { 

最终List _allCities = City.allCities();
 主页() {} 
  @override 
小部件build(BuildContext context){
返回新的脚手架(
appBar:新的AppBar(
标题:新文本(
“世界各地的城市”,
样式:新的TextStyle(
fontSize:18.0,
fontWeight:FontWeight.bold,
颜色:Colors.black87),
),
),
正文:新填充(
填充:EdgeInsets.fromLTRB(0.0,10.0,0.0,0.0),
子代:getHomePageBody(context)));
}
  getHomePageBody(BuildContext context){ 
返回ListView.builder(
itemCount:_allCities.length,
itemBuilder:_getItemUI,
填充:EdgeInsets.all(0.0),
);
}
// 第一次尝试
Widget _getItemUI(BuildContext context,int index){
返回新的Text(_allCities [index] .name);
}
}

现在在上面的代码中,我们正在做以下事情

  • 我包括了类变量_allCities ,它将具有城市的所有数据,尽管上面不是向变量提供数据的正确方法。 更好的方法是使用dependency injection.
  • 我已经创建了简单的材质应用程序scaffold ,通过提供基本的AppBar和将控件放入其中的主体,为应用程序提供了基本框架。
  • 我已经使用ListView.builder方法创建了支架主体,因为它为创建无限列表提供了更好的基础,因为它只动态回调那些将在屏幕上可见的索引,从而提高了性能
  • 我使用普通的文本小部件构建了每个图块,此图块此时仅显示城市名称,我们将在本教程中对其进行进一步扩展。

最后但并非最不重要的一点是,对于task#1 ,从main.dart文件中删除所有内容,并粘贴以下代码以使HomePage类成为应用程序的打开页面。 该文件将没有任何进一步的更改。

 导入'package:flutter / material.dart'; 
导入'package:flutter4_listview / pages / homepage.dart';
  void main()=> runApp(新的MyApp()); 
  MyApp类扩展StatelessWidget { 
//此小部件是应用程序的根。
@override
小部件build(BuildContext context){
返回新的MaterialApp(
标题:“ Flutter演示”,
主题:新的ThemeData(
primarySwatch:Colors.amber,
),
主页:新的HomePage(),
);
}
}

现在在模拟器中运行应用程序并查看结果

这样我就完成了任务1

Task#2在此任务中,我希望显示所有内容,即City类对象公开的所有属性,就像您看到上面的代码一样,显示文本属性相对容易,您可以使用Text小部件并放置任何文本,只需将里面的构造函数。 但是,要显示图像,只需在pubspec.yaml(主配置文件)上进行少量配置即可。 对于这个演示,我从Google图片搜索中收集了不同城市的著名地标。 我将它们保存在根目录下的assets文件夹中,添加图像后,我的文件夹结构如下所示

现在,由于所有这些图像都静态包含在项目中,因此我们需要像这样在pubspec.yaml中包含相同的图像

 资产: 
-资产/berlin.png
-资产/delhi.png
-资产/london.png
-资产/newyork.png
-资产/paris.png
-资产/vancouver.png

请记住,上面的代码会出现在“ flutter部分,并且您应留意间距,否则图像可能无法加载或出现编译错误。 执行上述步骤的最安全方法是在assets:上使用单个制表符assets:在包含以dash (-)图像时,请使用双制表键。

要在页面中加载图像,我们必须使用Image.asset工厂构造Image.asset以及图像的相对路径。 所以基本上我们将使用Card小部件来显示具有其他暴露属性的图像,现在_getItemUi()修改后的代码看起来像这样:-

  Widget _getItemUI(BuildContext context,int index){ 
退还新卡(
子:新列(

子代: [
新的ListTile(
领先:新的Image.asset(
“资产/” + _allCities [index] .image,
适合:BoxFit.cover,
宽度:100.0,
),
 标题:新文本( 
_allCities [index] .name,
样式:new TextStyle(fontSize:14.0,fontWeight:FontWeight.bold),
),
副标题:新栏目(
mainAxisAlignment:MainAxisAlignment.start,
crossAxisAlignment:CrossAxisAlignment.start,
子代: [
新文本(_allCities [index] .country,
样式:新的TextStyle(
fontSize:13.0,fontWeight:FontWeight.normal)),
新文本(“人口:$ {_ allCities [index] .population}”,
样式:新的TextStyle(
fontSize:11.0,fontWeight:FontWeight.normal)),
]),
//尾随:,
onTap :(){
_showSnackBar(上下文,_allCities [index]);
},

],
));
}

在这里,我在上面的代码中做下面的事情

  • 在卡片的引导位置,我使用Image.asset显示图像,固定宽度为100.0
  • 卡标题为城市名称
  • 对于Card Subtitle,我使用列小部件,它提供了将小部件垂直对齐的灵活性,我将Country放在其后是人口
  • 最后但最重要的一点是,我在任何卡片上都显示了点心栏onTap 。 快餐栏的代码如下
  _showSnackBar(BuildContext上下文,城市项目)  Scaffold.of(context).showSnackBar(objSnackbar);  } 

所以最后我们得到了

教程结束

兴趣点

请仔细阅读这些文章。 它可能会给您带来一些进展,实际上是风在这里流动:

  1. 卡:https://material.io/design/components/cards.html
  2. GitHub:https://github.com/thatsalok/FlutterExample/tree/master/flutter4_listview

颤振教程

  1. Flutter入门:教程1基础

历史

  • 2018年7月18日:第一版