47.详细页_Flutter_html插件的使用

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

flutter webview plugin:这个不太好用

flutter_html:用这个插件

先解决之前一个bug

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

需要用的到异步的处理

provide/details_info.dart类的方法:getGoodsInfo

html插件

https://github.com/Sub6Resources/flutter_html

视频和iframe标签目前不支持

添加引用:

flutter_html: ^0.9.6

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

详细列表和评论区域

新建details_web.dart页面。把details_tabbar.dart里面的导入的包引入进来。

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

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

pages/detail_page.dart

引入html的widget

import './details_page/details_web.dart';

然后调用

效果展示

我们的详情就已经出来了

最终代码:

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 '完成加载';
} }

Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用的更多相关文章

  1. Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建

    42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future ...

  2. Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页

    43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...

  3. Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写

    44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...

  4. Flutter实战视频-移动电商-45.详细页_说明区域UI编写

    45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...

  5. Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget

    46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...

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

    48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...

  7. Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏

    49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...

  8. Flutter实战视频-移动电商-41.详细页_数据接口的调试

    41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...

  9. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

随机推荐

  1. 系统安全-SElinux

    Selinux是[security-Enhanced Linux]的简称,是美国国家安全局[NSA]和[SCC]开发的Linux的一个扩张强制访问控制安全模块. 因为企业的业务平台的服务器上存储着大量 ...

  2. POJ 1952 BUY LOW, BUY LOWER 动态规划题解

    Description The advice to "buy low" is half the formula to success in the bovine stock mar ...

  3. 【BZOJ1014】[JSOI2008]火星人prefix Splay+hash

    [BZOJ1014][JSOI2008]火星人prefix Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个 ...

  4. 【BZOJ1085】[SCOI2005]骑士精神 双向BFS

    [BZOJ1085][SCOI2005]骑士精神 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它 ...

  5. EasyPusher实现将asterisk直播流以RTSP转发实现通话直播与录像

    本文转自博客:http://blog.csdn.net/jinlong0603/article/details/56047145 EasyPusher RTP直播推送介绍 EasyPusher是一个推 ...

  6. Template Pattern

    1.Template模式解决的问题:对于某一个业务逻辑在不同的对象中有不同的细节实现,但是逻辑的框架是相同的.将逻辑框架放在抽象基类中,并定义好细节的接口,子类中实现细节.Template模式利用多态 ...

  7. matlab面向对象设计---类的概念和使用

    代码: classdef MadgwickAHRS < handle %MADGWICKAHRS Implementation of Madgwick's IMU and AHRS algori ...

  8. iOS反射机制:objc_property_t的使用

    #import <objc/runtime.h> 需要导入这个头文件. 动态获取一个自定义类对象中的所有属性 - (NSDictionary *)allProperties { NSMut ...

  9. 自动化测试框架selenium+java+TestNG——TestNG注解、执行、测试结果和测试报告

    TestNG是java的一个测试框架,相比较于junit,功能更强大和完善,我是直接学习和使用的TestNG就来谈下TestNG的一些特点吧. TestNG的特点 注解 TestNG使用Java和面向 ...

  10. scroll或是其子类被添加进view时,界面自动上移

    开发中经常会遇到ViewController添加scroll或是其子类被添加进controller.view时,scroll会自动下移大概64像素 解决: self.edgesForExtendedL ...