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

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

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

最终代码

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(‘暂时没有数据‘)
          );
        }
      },
    );

  }
}

.

原文地址:https://www.cnblogs.com/crazycode2/p/11524482.html

时间: 2024-10-03 09:54:29

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

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

一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角的测试的字样.一直固定在底部 做底部的固定栏widget 新建页面:在文件夹details_page/details_bottom.dart 在布局用三个InkWell 因为都是可以点击的 加入购物车的InkWell 立即购买,复制购物车的InkWell改改就可以了. 引用这个组件 效果展示 最终代

电商网站商品模型之商品详情页设计方案

如下设计方案参考淘宝和华为商城 SKU SPU的关系 SPU = Standard Product Unit (标准产品单位)SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性.例如iphone4就是一个SPU,与套餐.存储容量.颜色无关. SKU=stock keeping unit(库存量单位)SKU即库存进出计量的单位, 可以是以件.盒.托盘等为单位.SKU是物理上不可分割的最小存货单元.在使用时要根据不同业态,不同管理模式来处理.例如32G

laravel 5.5 《电商实战 》基础布局

我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所有页面都将继承于此页面: _header.blade.php —— 布局的头部区域文件,负责顶部导航栏区块: _footer.blade.php —— 布局的尾部区域文件,负责底部导航区 我们先创建主要布局文件:resources/views/layouts/app.blade.php: $ mkd

12-Flutter移动电商实战-首页导航区域编写

1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重,不利于项目以后的维护工作.所以我们单独把每一个自元素导航拿出来,一个方法,返回一个组件. 代码如下:详细的解释可以观看视频. class TopNavigator extends StatelessWidget {  final List navigatorList;  TopNavigator(

laravel 5.5 《电商实战 》安装应用

最近开始接触电商业务.公司打算采用lavarel做后端的开发,出于学习成本和时间的考虑.自己找到了一个不错的收费教程.这段时间会同步更新,分享自己的学习过程. 自己的开发环境,mac+nginx+mysql5.6+php7.1 注意,如果没有特别提示,分享中所有的命令执行都是在项目的根目录操作. 首先是版本的选择,因为要用于公司项目的开发,自己优先选择了LTS版本的laravel5.5 安装laravel很方便,直接输入指令 composer create-project laravel/lar

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

11-Flutter移动电商实战-首页_屏幕适配方案和制作

1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸,根据不同屏幕进行缩放,能满足大部分屏幕场景. github:https://github.com/OpenFlutter/flutter_ScreenUtil 这个轮子功能还不是很完善,但是也在一点点的进步,这也算是国内现在最好的Flutter屏幕适配插件了,又不足的地方你可以自己下载源码进行修改

Vue.js+Koa2移动电商实战3

移动端屏幕适配基础 制作webapp时一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样,这让很多小伙伴很是头疼.在这里我介绍一下我平时工作中常用的适配方案,当然适配方案有很多种,所以你有更好的方法,也可以使用或者大家一起交流. 常见移动web布局适配方法 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,几乎达不到大型项目的要求,属于过时的方法. Media Query(媒体查询):现在比较主流的适配方案,比如我们常用的样式框架Bootstrap就

Vue.js+Koa2移动电商实战6

首页轮播图的制作 1.按需加载Swipe组件 按照惯例我们在使用Vant组件时需要把组件import进来.在/src/main.js下按需引入,代码如下: import { Button, Row, Col ,Search , Swipe , SwipeItem } from 'vant' Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem) 引入成功后,就可以写轮播图代码了. 2.下载这三张图片 我们作轮