底部四个切换导航

它分为首页,问答,视频和我的四大模块
创建lib/home/home.dart首页文件,使用的是bottomNavigationBar组件,官网也有介绍

它有一个onTap函数,这个函数会有一个index下标参数,同时准备四个模块页面news.dart,question.dart,video.dart和user.dart;里面的切换过程:定义上面四个页面数组,在body属性中将动态下标传递过去,在事件里更改这个下标即可,同时加上currentIndex动态属性点击效果,注意的是要用StatefulWidget组件.

新闻列表页

顶部搜索

在news/news.dart文件中
顶部的搜索是写入的样式,实际点击是进入另一个页面的,具体实现步骤:在AppBar组件的title中给一个自定义SearchBox组件,在SearchBox.dart组件中写我们的搜索内容:

头部tabBar

使用的是DefaultTabController组件进行重新包装,里面放我们的Scaffold组件,具体如下:

import 'package:flutter/material.dart';class TabBarBtn extends StatelessWidget {final List channel;TabBarBtn(this.channel);@overrideWidget build(BuildContext context) {return Container(color: Colors.white,child: TabBar(labelColor: Colors.black,unselectedLabelColor: Colors.black45,labelStyle: TextStyle(fontSize: 14.0),indicatorColor: Colors.blueAccent,indicatorWeight: 3.0,indicatorSize: TabBarIndicatorSize.label,labelPadding: EdgeInsets.symmetric(horizontal: 20.0),isScrollable: true,tabs: channel.map((value){return Tab(text: value['name'],);}).toList()),);}
}

主页新闻列表news,tabContent

news.dart

class News extends StatefulWidget {@override_NewsState createState() => _NewsState();
}class _NewsState extends State<News> {List channels = [];_getChannels () async{print('关闭之后刷新复机');var data = await PubMoudle.httpRequest('get', '/getchannels');// print(data.data['data']['channels']);setState(() {channels = data.data['data']['channels'];});}@overridevoid initState() {super.initState();_getChannels();}@overrideWidget build(BuildContext context) {return channels.length == 0 ?SizedBox():DefaultTabController(length: channels.length,child: Scaffold(appBar: AppBar(title: SearchBox(),elevation: 0.0,bottom: PreferredSize(preferredSize: Size.fromHeight(50.0),child: TabBarBtn(channels))),body: TabBarView(children: channels.map((value){return TabBarContent(value['id']);}).toList()),drawer: DrawerList(_getChannels),),);}
}

tabContent.dart
使用listView组件,横线使用SizeBox,图片是使用Row结合网络图片,AspectRadio组件可以让子组件等比缩放,第三个Row左文字右图片方式布局,左文字使用灵活布局Expanded布局,图片使用SizeBox限制固定大小.

class TabBarContent extends StatefulWidget {final int id;TabBarContent(this.id);@override_TabBarContentState createState() => _TabBarContentState();
}class _TabBarContentState extends State<TabBarContent> {List<Article> _list = [];int page = 1;ScrollController _controller = ScrollController();_getData([type]) async{var data = await PubMoudle.httpRequest('post', '/getarticles', {'id': widget.id, 'page': page});print(data.data['data']['results']);List jsonlist = data.data['data']['results'];List<Article> listData = jsonlist.map((value) => Article.fromJson(value)).toList();if(type == 1){setState(() {_list.addAll(listData);   });}else{setState(() {_list = listData;});}}Future _refresh() async{//走接口_getData();// setState(() {// });}@overridevoid initState() {super.initState();_getData();_controller.addListener((){var maxScroll = _controller.position.maxScrollExtent;var pixels = _controller.position.pixels;if(maxScroll == pixels){//s刷新了_getData(1);}});}@overrideWidget build(BuildContext context) {return RefreshIndicator(onRefresh: _refresh,child: Padding(padding: EdgeInsets.all(15.0),child: ListView.builder(itemCount: _list.length,itemBuilder: (context, index){return GestureDetector(onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(_list[index].artId)));},child: NewsItem(_list[index]),);},controller: _controller,),),);}
}class NewsItem extends StatelessWidget {final Article article;NewsItem(this.article);@overrideWidget build(BuildContext context) {return Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[article.imgType == 1?Row(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Expanded(child: Text(article.title,style: TextStyle(color: Colors.black,fontSize: 18.0),),),//图片SizedBox(width: 100.0,height: 100.0,child: Image.network(article.images[0],fit: BoxFit.cover,),)],): Text(article.title,style: TextStyle(color: Colors.black,fontSize: 18.0),),SizedBox(height: 6.0,),article.imgType == 3 ? Row(children: article.images.map((value){return Expanded(child: AspectRatio(aspectRatio: 4/3,child: Image.network(value,fit: BoxFit.cover,),),);}).toList()): SizedBox(height: 6.0,),RichText(text: TextSpan(text: '${article.isTop==1?"置顶  ":""}',style: TextStyle(color: Colors.red,),children: [TextSpan(text: '${article.autName}  ',style: TextStyle(color: Colors.grey,),),TextSpan(text: '${article.commCount}评论  ',style: TextStyle(color: Colors.grey,),),TextSpan(text: timeago.format(DateTime.parse(article.pubdate)),style: TextStyle(color: Colors.grey,),)]),),Divider(height: 30.0,),],);}
}

渲染tab数据

在news.dart里写一个获取数据的方_getChannels法,在初始化声明周期里调用这个方法,将数据放在TabBarBtn和TabBarContent里,因为第一次调用是空数据,所以做了三元判断加载DefaultTabController,在map数组循环里用toList()转换

渲染新闻内容

根据上面tab个数渲染TabBarContent,将id传递过来,因为涉及到数据所以需要改用StatefulWidget,在生命周期里调用新闻数据_getData方法,同一页面获取别的组件id参数获取方法用widget.id,在响应体里判断是否字符串和数字的方法,使用序列化,创建article.dart文件,里面用类似构造函数的方法,在dart中跟类写法很像,里面用formJson方法用json进行处理,在响应体里调用,用List listData保留起来,最后将数据放到页面中,在数据定义的时候使用list

进行声明,用setData进行赋值,这样在页面中就可以使用比较简单的ListView.builder来进行构造,返回NewsItem(),定义NewsItem组件,里面用数据填充,数字判断置顶用三元判断,图片和左右布局都有用到三元判断.

查看全文

http://www.taodudu.cc/news/show-3064252.html

Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试
用python建立三元一次方程组的解法_三元一次方程组的解法及运用
学习笔记---高等数学前置知识---数列、排列组合、解不等式
数据科学和机器学习中的优化理论与算法（上）
小甲鱼课后作业_【第九讲勤思课后作业】二元一次方程组的解法巩固加油站
Algorithm之PrA：PrA之LP线性规划算法经典案例剖析+Matlab编程实现
＜＜数值分析＞＞第二章线性方程组的直接解法
学数答题160904-不等式
LeetCode 第7题：整数反转（Python3解法）
线性和非线性方程数值解法_数值分析计算方法
数值计算方法第三章—线性方程组的数值解法知识点总结
运筹优化（六）--目标规划定义及解法
（一）1.线性规划之化标准型和图解法
算法学习笔记2：凸包及其解法
不等式选讲习题
【考研数学】一文搞定不等式
线性代数方程组数值解法
切比雪夫不等式例题讲解_2019高考数学大题押题（名师视频讲解，高考最后的提分机会）...
曼哈顿距离（值得收藏）
各种不等式的解法收集【初级辅导和中级辅导】
含有max、绝对值等式化简汇总
[AcWing] 104. 货仓选址（C++实现）贪心---绝对值不等式例题
【算法基础26】贪心下——哈夫曼树、排序不等式、绝对值不等式、推公式的思路与应用
matlab求不等式的方法,求解变分不等式的matlab程序我需要
电子计算机与多媒体课件背景,演示型多媒体课件应用与设计原则
电子计算机与多媒体课件背景,《多媒体CAI课件制作》教学课件（全套）.ppt
python课件百度文库_python教-教学课件.doc
计算机演示文稿教学实例课件,ppt课件制作基本要求及ppt教学案例
html网页课件,HTML网页制作-教学课件.ppt
互动课件制作 html,互动教学课件制作神器，从此丢掉PPT

Flutter黑马头条项目开发(二.底部切换导航和新闻页面开发)相关推荐

黑马头条项目一项目设计及基础搭建
黑马头条项目之项目设计及基础搭建一.概述工程基于Spring-boot 2.1.5.RELEASE 版本构建,工程父项目为heima-leadnews,并通过继承方式集成Spring-boot. ...
前端基础第五天项目社交媒体黑马头条项目-文章模块和评论
七.文章详情创建组件并配置路由 1.创建 views/article/index.vue 组件 <template><div class="article-contain ...
前端基础第四天项目社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装使 ...
新黑马头条项目经验（黑马）
swagger (1)简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务(API Documentation & Design ...
软件测试项目实战32讲,软件测试入门-黑马头条项目实战
课程简介本课程以黑马头条实战项目为例,将项目的整个测试流程做了详细的介绍,并带着大家一起进行产品需求评审,项目测试计划编写,测试需求分析,以及测试用例的设计编写和执行操作,通过完成实际的功能业务测试 ...
黑马头条项目 JWT—4.3 头条项目实施方案（生成token接口测试）
头条项目实施方案需求设置有效期,但有效期不宜过长,需要刷新. 如何解决刷新问题? 手机号+验证码(或帐号+密码)验证后颁发接口调用token与refresh_token(刷新token) Toke ...
GIS地图开发，LBS开发，室内/外导航，三维地图开发的首选
新一年新气象,随着2015年的到来,电子地图领域也将迎来一场新的发展浪潮,特别是最近国家宣布将加大对信息通信技术的资金投入力度,这无疑是一剂强心剂. 众所周知,GIS这些年,虽然看上去是一直在发展,但 ...
Vuex——黑马头条项目（vuex体验版）
1.搭建项目 1.1通过vue-cli脚手架搭建项目:vue create toutiao (选择 vuex/eslint(standard)/pre-cssprocesser(less)) 1.2在 ...
【Vue项目】二、去哪儿网APP——首页开发
首页开发中的重难点重点思想:页面组件化页面组件化下的组件引入及使用 flex:1 使用iconfont图标使用vue-awesome-swiper实现轮播效果实现带有分页器的轮播实现有分页效 ...

Flutter黑马头条项目开发(二.底部切换导航和新闻页面开发)