增加切换的效果,我们主要是修改这个地方

这样我们的评论的内容就显示出来了

最终代码

details_web.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_html/flutter_html.dart'; class DetailsWeb extends StatelessWidget {
@override
Widget build(BuildContext context) {
var goodsDetails = Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo.goodsDetail; return Provide<DetailsInfoProvide>(
builder: (context,child,val){
var isLeft=Provide.value<DetailsInfoProvide>(context).isLeft;
if(isLeft){
//详情页
return Container(
child: Html(
data: goodsDetails//注意这里是data,而不是child了!!!!
),
);
}else{
return Container(
width: ScreenUtil().setWidth(750),//和我们的页面等宽的
padding: EdgeInsets.all(10.0),
alignment: Alignment.center,//居中显示
child: Text('暂时没有数据')
);
}
},
); }
}

.

Flutter移动电商实战 --(48)详细页_详情和评论的切换的更多相关文章

  1. Flutter实战视频-移动电商-48.详细页_详情和评论的切换

    48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...

  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移动电商实战 --(46)详细页_自定义TabBar Widget

    主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. javascript_05-操作符

    一元运算符 a++和++a //5 2 3 var a =1; var b = ++a + ++a; console.log(b) //4 1 3 var a =1; var b = a++ + ++ ...

  2. CentOS7.X+LAMP环境下安装zabbix4.X

    1.安装zabbix仓库 rpm -ivh https://repo.zabbix.com/zabbix/4.2/rhel/7/x86_64/zabbix-release-4.2-1.el7.noar ...

  3. TCP的三次握手和四次挥手与路由器(三层)转发原理

    传输层是国际标准化组织提出的开放系统互连(OSI)参考模型中的第四层.该层协议为网络端点主机上的进程之间提供了可靠.有效的报文传送服务.其功能紧密地依赖于网络层的虚拟电路或数据报服务.传输层定义了主机 ...

  4. HTML&CSS基础-相对定位

    HTML&CSS基础-相对定位 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  5. Codeforces Round #582 (Div. 3)-G. Path Queries-并查集

    Codeforces Round #582 (Div. 3)-G. Path Queries-并查集 [Problem Description] 给你一棵树,求有多少条简单路径\((u,v)\),满足 ...

  6. 22 webpack结合Vue使用的总结

    总结梳理:webpack中如何使用vue: 1.安装vue的包:cnpm i vue -S 2.由于 在webpack中,推荐使用 .vue这个组件模板文件定义组件, 所以,需要安装 能解析这种文件的 ...

  7. JavaScript 隐式原型(_proto_)与显示原型(prototype)

    作者:苏墨橘链接:https://www.zhihu.com/question/34183746/answer/59043879来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. MVC框架和MTV框架

    MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),具有耦合性低 ...

  9. Vue 获取页面后跳转其他页面

    <template> <div> <img :src="detail.img" /> <h1>{{ detail.title }}& ...

  10. [Dart] Capture and Handle Data Sequences with Streams in Dart

    Streams represent a sequence of asynchronous events. Each event is either a data event, also called ...