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();
  }
}
相关推荐
工呈士3 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童5 分钟前
五个JavaScript 应用技巧
javascript
举个栗子dhy10 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
hyyyyy!10 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
未扬帆的小船11 分钟前
在gpt的帮助下安装chales的证书,用于https在root情况下抓包
android·charles
六边形66614 分钟前
一文搞懂JavaScript 与 BOM、DOM、ECMAScript、Node.js的用处
前端·javascript·面试
万户猴14 分钟前
【 Android蓝牙-十】Android各版本蓝牙行为变化与兼容性指南
android·蓝牙
Mars狐狸19 分钟前
你踩过console.log的坑吗?从performace说起
前端·javascript
张风捷特烈2 小时前
FFmpeg 7.1.1 | 调试 ffmpeg.c 环境 - Widows&Clion&WSL
android·ffmpeg
学习机器不会机器学习2 小时前
深入浅出JavaScript常见设计模式:从原理到实战(2)
开发语言·javascript·设计模式