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();
  }
}
相关推荐
ujainu12 小时前
Flutter + OpenHarmony 实战:《圆环跳跃》——完整游戏架构与视觉优化
flutter·游戏·架构·openharmony
2501_9444480012 小时前
Flutter for OpenHarmony衣橱管家App实战:统计分析实现
flutter·信息可视化
爱吃大芒果12 小时前
Flutter for OpenHarmony 实战:mango_shop 路由系统的配置与页面跳转逻辑
开发语言·javascript·flutter
qq_1777673712 小时前
React Native鸿蒙跨平台实现消息列表用于存储所有消息数据,筛选状态用于控制消息筛选结果
javascript·react native·react.js·ecmascript·harmonyos
ujainu12 小时前
Flutter + OpenHarmony 实战:从零开发小游戏(一)——主菜单与最高分存储
flutter·游戏·app
2501_9400078912 小时前
Flutter for OpenHarmony三国杀攻略App实战 - 性能优化与最佳实践
android·flutter·性能优化
沐雪架构师12 小时前
LangChain 1.0 Agent开发实战指南
开发语言·javascript·langchain
2501_9400078912 小时前
Flutter for OpenHarmony三国杀攻略App实战 - 战绩记录功能实现
开发语言·javascript·flutter
摘星编程12 小时前
React Native + OpenHarmony:自定义useEllipsis省略号处理
javascript·react native·react.js
灰灰勇闯IT12 小时前
Flutter for OpenHarmony:TabBar 与 PageView 联动 —— 构建高效的内容导航系统
flutter