Flutter:文章详情页,渲染富文本

插件使用flutter_widget_from_html_core

haskell 复制代码
flutter_widget_from_html_core: ^0.15.2

view

js 复制代码
// 内容详情
Widget _buildContent() {
  return <Widget>[
    HtmlWidget(
      controller.content,
      // 设置渲染模式
      renderMode: RenderMode.column,
      // 设置文本样式
      textStyle: TextStyle(
        fontSize: 28.sp,
        color: Colors.white,
        height: 1.5,
      ),
    ),
  ]
  .toColumn(crossAxisAlignment: CrossAxisAlignment.center)
  .paddingAll(30.w)
  .card(color: AppTheme.blockBgColor);
}

controller

js 复制代码
import 'package:get/get.dart';
class AgreementController extends GetxController {
  AgreementController();
  String title = '';
  String content = '';  

  _initData() {
    title = Get.arguments['title'] ?? '详情';
    content = '''
      <div style="font-size: 16px;">
        <h1>示例标题22</h1>
        <p>这是一段<strong>富文本</strong>内容</p>
      </div>
    ''';
    update(["agreement"]);
  }

  @override
  void onInit() {
    super.onInit();
    _initData();
  }
}
相关推荐
天涯学馆4 分钟前
JS 组合模式在组件化开发中的应用:从原理到实战
前端·javascript·面试
FogLetter5 分钟前
闭包:JavaScript中的魔法背包
前端·javascript
江城开朗的豌豆6 分钟前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
移动开发者1号7 分钟前
剖析 Systrace:定位 UI 线程阻塞的终极指南
android·kotlin
移动开发者1号8 分钟前
深入解析内存抖动:定位与修复实战(Kotlin版)
android·kotlin
whysqwhw9 分钟前
OkHttp深度架构缺陷分析与革命性演进方案
android
WTSolutions14 分钟前
Image Pixel RGBA Extractor:免费在线图像像素色彩提取工具全解析
javascript
Zender Han17 分钟前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
轻语呢喃19 分钟前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
旺旺大力包22 分钟前
【JS笔记】JS 和 noodjs 的常见操作(十)
开发语言·javascript·node.js·ecmascript