Flutter系列教程之(6)——Tab导航与ListView使用

目录

Tab导航

ListView的使用


Tab导航

效果图:

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

Dart 复制代码
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方法

Dart 复制代码
@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),),
      ],
    );
  }

代码效果如图所示:

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

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

相关推荐
jiushiapwojdap9 小时前
Flutter上手记:为什么我的按钮能同时在iOS和Android上跳舞?[特殊字符][特殊字符]
android·其他·flutter·ios
木子雨廷13 小时前
Flutter 局部刷新小组件汇总
前端·flutter
恋猫de小郭16 小时前
iOS 26 正式版即将发布,Flutter 完成全新 devicectl + lldb 的 Debug JIT 运行支持
android·前端·flutter
君赏18 小时前
Petrel(雨燕)Flutter 热更新如何在我们项目应用
flutter
JulyYu20 小时前
Flutter混合栈适配安卓ActivityResult
android·flutter
海的天空16611 天前
Flutter旧版本升级-> Android 配置、iOS配置
android·flutter·ios
小蜜蜂嗡嗡1 天前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
ai_xiaogui1 天前
反催收APP开发思路:用Flutter打造证据链管理工具
flutter·反催收app开发·flutter证据链管理·跨平台维权工具
木子雨廷2 天前
Flutter 开发一个plugin
前端·flutter
苦逼的搬砖工2 天前
Network Kit Lite:一个基于 SOLID 原则的 Flutter 网络框架架构设计
flutter