主要实现详情和评论的tab

provide定义变量

自己做一个tab然后用provide去控制

定义两个变量来判断是左侧选中了还是右侧选中了。并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值

新建组件页面

details_page/details_tabbar.dart

然后定义方法_myTabbarLeft

左侧tab的点击事件,调用provide内的change方法传入是left

把_myTabbarLeft方法复制一个改成_myTabbarRight然后把参数什么的也修改为右侧的

build内合并方法

显示声明两个变量 从provide中获取isLeft和isRight

详情添加引用这个组件

先引入组件:

import './details_page/details_tabbar.dart';

然后直接调用就可以了

修改成ListView组件,防止溢出

效果展示

最终代码:

provide/details_info.dart

import 'package:flutter/material.dart';
import '../model/details.dart';
import '../service/service_method.dart';
import 'dart:convert'; class DetailsInfoProvide with ChangeNotifier{
//商品详情的变量
DetailsModel goodsInfo=null; bool isLeft=true;
bool isRight=false;
//tabbar的切换方法
changeLeftAndRight(String changeState){
if(changeState=='left'){
isLeft=true;
isRight=false;
}else{
isLeft=false;
isRight=true;
}
notifyListeners();//通知
} //从后台获取商品数据
getGoodsInfo(String id){
var formData={'goodId':id};
request('getGoodDetailById',formData:formData).then((val){
var responseData=json.decode(val.toString());
print(responseData);//打印出返回的json数据
goodsInfo=DetailsModel.fromJson(responseData); notifyListeners();//通知
});
}
}

details_page/details_tabbar.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsTabbar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<DetailsInfoProvide>(
builder: (context,child,val){
var isLeft=Provide.value<DetailsInfoProvide>(context).isLeft;
var isRight=Provide.value<DetailsInfoProvide>(context).isRight; return Container(
margin: EdgeInsets.only(top:15.0),
child: Row(
children: <Widget>[
_myTabbarLeft(context,isLeft),
_myTabbarRight(context,isRight)
],
),
);
},
);
} Widget _myTabbarLeft(BuildContext context,bool isLeft){
return InkWell(
onTap: (){
Provide.value<DetailsInfoProvide>(context).changeLeftAndRight('left');
},
child: Container(
padding: EdgeInsets.all(10.0),
alignment: Alignment.center,
width: ScreenUtil().setWidth(375),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 1.0,
color: isLeft?Colors.pink:Colors.black12
)
)
),
child: Text(
'详情',
style: TextStyle(
color: isLeft?Colors.pink:Colors.black
),
),
),
);
}
//右侧tabbar的方法
Widget _myTabbarRight(BuildContext context,bool isRight){
return InkWell(
onTap: (){
Provide.value<DetailsInfoProvide>(context).changeLeftAndRight('right');
},
child: Container(
padding: EdgeInsets.all(10.0),
alignment: Alignment.center,
width: ScreenUtil().setWidth(375),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 1.0,
color: isRight?Colors.pink:Colors.black12
)
)
),
child: Text(
'评论',
style: TextStyle(
color: isRight?Colors.pink:Colors.black
),
),
),
);
} }

details_page.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.dart';
import './details_page/details_expain.dart';
import './details_page/details_tabbar.dart'; class DetailsPage extends StatelessWidget {
final String goodsId; DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数 @override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: (){
Navigator.pop(context);//返回上一个页面
},
),
title: Text('商品详细页'),
),
body: FutureBuilder(
future: _getBackInfo(context),
builder: (context,snapshot){
//判断是否有数据
if(snapshot.hasData){
//如果有数据返回一个Container
return Container(
child: ListView(
children: <Widget>[
DetailsTopArea(),
DetailsExplain(),
DetailsTabbar()
],
),
);
}else{
return Text('加载中......');//没有数据的情况
}
},
),
);
} Future _getBackInfo(BuildContext context) async{
await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
//print('加载完成...........');
return '完成加载';
} }

.

Flutter移动电商实战 --(46)详细页_自定义TabBar Widget的更多相关文章

  1. Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget

    46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...

  2. Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏

    一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...

  3. Flutter移动电商实战 --(47)详细页_Flutter_html插件的使用

    详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 flutter_html:用这个插件 先解决之前一个 ...

  4. Flutter移动电商实战 --(45)详细页_说明区域UI编写

    pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; ...

  5. Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写

    把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...

  6. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  7. Flutter移动电商实战 --(42)详细页_UI主页面架构搭建

    详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future 把我们的方法修改为返回的类型为F ...

  8. Flutter移动电商实战 --(40)路由_Fluro的全局注入和使用方法

    路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细 ...

  9. Flutter移动电商实战 --(48)详细页_详情和评论的切换

    增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; i ...

随机推荐

  1. Vue框架之组件与过滤器的使用

    一.组件的使用 局部组件的使用 ​ 打油诗: 1.声子 2.挂子 3.用 var App = { tempalte:` <div class='app'></div>` }; ...

  2. java - day014 - 编译期,运行期

    编译期 静态成员 私有变量 成员变量 运行期 非静态方法 package day1401; public class Test1 { public static void main(String[] ...

  3. 个性化排序算法实践(一)——FM算法

    因子分解机(Factorization Machine,简称FM)算法用于解决大规模稀疏数据下的特征组合问题.FM可以看做带特征交叉的LR. 理论部分可参考FM系列,通过将FM的二次项化简,其复杂度可 ...

  4. Linux基础之终端、控制台、tty、pty等概念简介

    基本概念: 1>tty(终端设备的统称): tty一词源于teletypes,或者teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘阅读和发送信息的东西,后来这东西被 ...

  5. master-worker常驻型程序代码修改哪些需要重启master或者worker

    之前在yii的项目里用redis作为消息队列,现在很多任务需要延迟需求,于是把之前redis的消息队列替换成了rabbitmq 于是使用yii的yii2-queue这个组件 但是由于提供的yii qu ...

  6. vue 单向数据流

  7. pycharm鼠标更改字体大小

    Pycharm快捷键设置(鼠标滚动控制字体大小) 一.pycharm字体放大的设置 File -> setting -> Keymap ->在搜寻框中输入:increase -> ...

  8. 修改DEDE文章标题长度,解决DEDE文章标题显示不全

    在用dede调用列表标题出来的时候,会发现标题文字字数显示不完全,那是因为dede默认标题出来长度是30个字符,为了让标题显示完整,要做以下修改! 进入后台–系统–系统设置–系统基本参数–其他选项–文 ...

  9. TinyMCE 工具栏配置

    plugins: { type: [String, Array], default: 'lists image media wordcount advlist bbcode code charmap ...

  10. Fiddler抓包工具(捕获Android数据包)

    一:获取Android的数据包必须要在同一个网络中 移动设备访问网络原理 先看看移动设备是怎么去访问网络,如图所示,可以看到,移动端的数据包是从wifi出去的. 可以看得出,移动端的数据包,都是要走w ...