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

Posted crazycode2

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(‘暂时没有数据‘)
          );
        
      ,
    );
   
  

.

以上是关于Flutter移动电商实战 --(48)详细页_详情和评论的切换的主要内容,如果未能解决你的问题,请参考以下文章

dart版本升级后flutter移动电商代码引起的错误

电商小程序实战教程-类别管理移动端开发

电商小程序实战教程-类别管理移动端开发

Vue+Koa2移动电商实战 密码加密

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

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