Flutter移动电商实战 --（47）详细页_Flutter_html插件的使用

怼烎@ 2023-06-01 06:05 21阅读 0赞

详情里面是hemlt和图片组成的，但是flutter是不支持html的所以需要其他插件

flutter webview plugin:这个不太好用

flutter\_html：用这个插件

#  先解决之前一个bug #

在加载详情页面的时候，控制台输出报错了

![1090399-20190915215959217-770236653.png][]

需要用的到异步的处理

provide/details\_info.dart类的方法：getGoodsInfo

![1090399-20190915220024310-826022216.png][]

# html插件 #

[https://github.com/Sub6Resources/flutter\_html][https_github.com_Sub6Resources_flutter_html]

视频和iframe标签目前不支持

添加引用：

flutter_html: ^0.9.6

![1090399-20190915220108366-1236652044.png][]

开了上网工具 下载也还是比较慢的

![1090399-20190915220138255-642482458.png][]

# 详细列表和评论区域 #

新建details\_web.dart页面。把details\_tabbar.dart里面的导入的包引入进来。

![1090399-20190915220211305-994713461.png][]

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import '../../provide/details_info.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';

引入HTML的插件。直接输入html就出出现提示了。

![1090399-20190915220258356-883225708.png][]

![1090399-20190915220352548-2106250982.png][]

# pages/detail\_page.dart #

引入html的widget

import './details_page/details_web.dart';

然后调用

![1090399-20190915220457667-1284005069.png][]

# 效果展示 #

我们的详情就已经出来了

![1090399-20190915220531879-986187098.png][]

# 最终代码： #

details\_page/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 Container(
          child: Html(
            data: goodsDetails//注意这里是data，而不是child了！！！！
          ),
        );
      }
    }

pages/details\_page.dart

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import '../provide/details_info.dart';
    import './details_page/details_top_area.dart';
    import './details_page/details_expain.dart';
    import './details_page/details_tabbar.dart';
    import './details_page/details_web.dart';
    
    class DetailsPage extends StatelessWidget {
      final String goodsId;
    
      DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数
    
      @override
      Widget build(BuildContext context) {
     
        return Scaffold(
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: (){
                Navigator.pop(context);//返回上一个页面
              },
            ),
            title: Text('商品详细页'),
          ),
          body: FutureBuilder(
            future: _getBackInfo(context),
            builder: (context,snapshot){
              //判断是否有数据
              if(snapshot.hasData){
                //如果有数据返回一个Container
                return Container(
                  child: ListView(
                    children: <Widget>[
                      DetailsTopArea(),
                      DetailsExplain(),
                      DetailsTabbar(),
                      DetailsWeb()
                    ],
                  ),
                );
              }else{
                return Text('加载中......');//没有数据的情况
              }
            },
          ),
        );
      }
    
      Future _getBackInfo(BuildContext context) async{
        await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
        //print('加载完成...........');
        return '完成加载';
      }
    
    }

转载于:https://www.cnblogs.com/crazycode2/p/11524233.html

[1090399-20190915215959217-770236653.png]: /images/20230601/4393b666cedf4bb99fcf9832af4be373.png
[1090399-20190915220024310-826022216.png]: /images/20230601/3c7d852533f34c8eb7fc562e25707787.png
[https_github.com_Sub6Resources_flutter_html]: https://github.com/Sub6Resources/flutter_html
[1090399-20190915220108366-1236652044.png]: /images/20230601/3cf13bcf99cd4e538b2f4c8436830734.png
[1090399-20190915220138255-642482458.png]: /images/20230601/89273d8450d142659c7ba0d038b8c0c0.png
[1090399-20190915220211305-994713461.png]: /images/20230601/1edd186425344725b878af0c284f986f.png
[1090399-20190915220258356-883225708.png]: /images/20230601/a3b41a22b9664e928c03616d3fde4e8a.png
[1090399-20190915220352548-2106250982.png]: /images/20230601/9784dccf2d414b499227331cee55a082.png
[1090399-20190915220457667-1284005069.png]: /images/20230601/42e0ebcffe1f43589ce1c8d995df6d49.png
[1090399-20190915220531879-986187098.png]: /images/20230601/467f59e950744e58aa8a89e3828b7227.png