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();
  }
}
相关推荐
谢慧琼41 分钟前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
YM52e1 小时前
分页查询的基石:ArkTS 为鸿蒙商品列表设计 LIMIT/OFFSET 的表
android·学习·华为·harmonyos
安卓与AI研习社2 小时前
Android ANR 到底怎么定位?从触发原理到日志判断的完整方法
android
拾年2753 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__4 小时前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试
拾年2754 小时前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞
前端·javascript·react.js
默_笙4 小时前
😝 5 亿次循环卡死页面?我用 Web Worker 把它扔进后台线程,页面丝滑如初
前端·javascript
CAD老兵4 小时前
一行代码集成 DWG/DXF 图纸查看:测量批注,数据不出站
前端·javascript·github
小林ixn4 小时前
单例模式:从弹窗管理到全局状态,一个模式搞定
前端·javascript·设计模式