Flutter学习(6)——Tab导航与ListView使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

本篇主要讲解在Flutter中如何实现一个Tab导航以及常用的列表组件(ListView)的使用

注:本篇代码保存在github

Tab导航

效果图:

Tab导航效果图

与原生的Android不同,flutter中使用Tab的步骤还算简单,不用写Adapter

return DefaultTabController(
  //必传参数1
  length: 2,
  child: Scaffold(
	appBar: AppBar(
	  title:
	  Text('tab演示', style: TextStyle(color: Colors.white, fontSize: 18)),
	  centerTitle: true,
	  //必传参数2
	  bottom: TabBar(tabs: [
		Tab(
		  text: "标签1",
		),
		Tab(
		  text: "标签2",
		),
	  ],indicatorColor: Colors.white,labelStyle: TextStyle(fontSize: 16),),
	),
	//必传参数3
	body: TabBarView(children: [
	  TabContentPage("标签1"),
	  TabContentPage("标签2"),
	]),
  ),
);

当然,你可以根据自己需求封装个方法,必传的参数由length,TabBar和TabBarView

length表示有几个标签页,TabBar则表示上头的选项卡,你可以增加相关的参数来修改选项卡的样式,TabBarView则是选项卡对应的内容

PS:Tab这个Widget有个icon的参数,通过这个属性我们可以设置图标

TabBar这个Widget中,也是有多个参数,便于我们设置选项卡下方的横线指示器的颜色宽度边距,以及选项卡文字颜色等属性

ListView的使用

ListView使用的方式有多种,这里介绍一下简单的一种吧,使用ListView.builder构造ListView

ListView.builder中重要的两个参数为itemCount和itemBuilder,itemCount为子项item的数量,而itemBuilder则是子项的构造器,其类似于RecyclerViewAdapter的onBindViewHolder方法

@override
  Widget build(BuildContext context) {
    return MyMaterialPage("listview的演示",_listView());
  }
  Widget _listView(){
    //构造数据
    var nameList = ["张三"];
    for(var i=0;i<50;i++){
      nameList.add("张三$i");
    }
    return new ListView.builder(
      //listview的子项item数量
      itemCount: nameList.length,
      padding: new EdgeInsets.all(5.0),
      itemBuilder: (BuildContext context, int index) {
        //返回每个子项item的widget
        //这里我只是简单拿到数据列表中的数据,并以此为参数构造成了显示姓名的Widget
        return _listItemView(nameList[index]);
      },
    );
  }
  Widget _listItemView(String name){
    return Row(
      children: [
        Center(child: Text(name),),
      ],
    );
  }

代码效果如图所示:

ListView的效果图

我写的demo中,为了方便起见,都是使用的StatelessWidget,一般来说,ListView使用的情形是根据网络请求获得数据,之后再将数据以列表的形式显示

这里简单的介绍一下吧,代码就不放出了,我们只需要让页面继承StatefulWidget,之后在请求数据之后使用setState去修改数据,从而实现页面的改变,详情请看Flutter学习(4) 自定义Widget控件及相关知识

Flutter学习(6)——Tab导航与ListView使用

Tab导航

ListView的使用

参考