主要实现详情和评论的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. 6.JUC之ReentrantReadWriteLock

    一.概述: Java纪年1.5年,ReentrantReadWriteLock诞生于JUC,此后,国人一般称它为读写锁.人如其名,他就是一个可重入锁,同时他还是一个读写锁 a)跟ReentrantLo ...

  2. sql sever2008 R2 检测到索引可能已损坏。请运行 DBCC CHECKDB。

    1.设置成单用户状态 USE MASTER ALTER DATABASE DBNAME SET SINGLE_USER; GO --DBNAME为修复的数据库名 2.执行修复语句,检查和修复数据库及索 ...

  3. Django中使用JWT

    JWT """ 1.组成: header.payload.signature 头.载荷.签名 2.距离: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1 ...

  4. C++——多维数组动态开辟与释放

    前言 在讨论多维数组动态开辟与释放之前,先说说什么是二维数组静态开辟与释放. 形如这种就是静态开辟内存,事先画好了内存大小 #include<iostream> using namespa ...

  5. 13 复习 - webpack基本配置2

    在webpack下使用样式表 1.安装处理样式表的loader cnpm i style-loader css-loader -D //css cnpm i less-loader less -D / ...

  6. VMWARE许可文件

    VMware 14 Pro 永久许可证激活密钥FF31K-AHZD1-H8ETZ-8WWEZ-WUUVACV7T2-6WY5Q-48EWP-ZXY7X-QGUWD

  7. CF277B Set of Points——构造题

    题意 构造 $n$ 个点使其凸度(顶点数最多的凸多边形的顶点数)恰好为 $m$,且任意三点不能共线. (题意有点绕,建议看英文原文 分析 首先,题目并不是求凸包上的顶点数,而是求能形成的凸多边形的最大 ...

  8. location对象属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 第五章 CSS美化网页元素

    一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 </p> 二.字体风格 ...

  10. sublime 不是插件安装越多越好,如xxxsnippet 自动完成插件太多,就非常耗电脑性能,经常性的卡着不动

    sublime 不是插件安装越多越好,如xxxsnippet 自动完成插件太多,就非常耗电脑性能,经常性的卡着不动