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

痛定思痛。 2023-06-01 06:06 11阅读 0赞

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

![1090399-20190915220828317-2101998478.png][]

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

![1090399-20190915220857898-438849246.png][]

# 最终代码 #

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/11524488.html

[1090399-20190915220828317-2101998478.png]: /images/20230601/bf61abfc82724dbb9324073418df0518.png
[1090399-20190915220857898-438849246.png]: /images/20230601/89fb4184762248068fecfc217a5c10c0.png