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

最新推荐文章于 2025-03-10 11:13:46 发布

weixin_30329623

最新推荐文章于 2025-03-10 11:13:46 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/wangjunwei/p/10754093.html

本文介绍了一个使用Flutter实现的评论和详情页切换效果的代码示例。通过修改特定部分，可以实现在详情和评论间的平滑过渡。代码展示了如何根据状态显示不同的内容，包括HTML数据的加载和暂无数据时的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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