Flutter移动电商实战 --(47)详细页_Flutter_html插件的使用
2023-09-11 14:15:29 时间
详情里面是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系列之:flutter中可以建索引的栈布局IndexedStack
- flutter系列之:用来管理复杂状态的State详解
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- Flutter 错误 Transform‘s input file does not exist: ... artifacts/engine/android-arm/flutter.jar.
- Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信
- flutter 日志输出,Flutter打印日志,flutter log,flutter 真机日志
- flutter GridView 九宫格
- Flutter移动电商实战 --(33)列表页_子类和商品列表交互效果
- HTML-获取/修改html页面标题
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter 组件之用于导航navigation的 Flutter UI 包(教程含源码)
- Flutter 打不过 React Native 的原因
- Flutter教程之四年开发经验的高手给的建议
- Flutter 淡入淡出与逐渐出现动画
- Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠
- Flutter Widget - Badges 标记
- Flutter监听音量实现波形可视化的音频
- 如何修复 Flutter 中的“正在检查 Dart SDK 版本... << 此时出乎意料”错误?
- flutter 实现不可滚动的ListView构建器
- flutter版本控制工具 `FVM`
- Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
- flutter实现底部弹出框以及特色功能
- Web 之 html 如何显示隐藏Html元素的两种方法简单整理
- Flutter 通过 Column 实现垂直布局
- Flutter开发 - Null check operator used on a null value(flutter大量奇怪异常)
- Flutter开发 -flutter1.22.x升级踩坑记