Flutter 中使用 HTML 代码，富文本的转义，webView 的使用

2025年06月15日 Flutter
#Flutter

Flutter 中使用 HTML 代码，富文本的转义，webView 的使用

Html 转义

组件 flutter_html 3.0.0

地址:https://pub.dev/packages/flutter_html/versions/3.0.0-beta.2

安装

dependencies:
  flutter_html: ^3.0.0-beta.2

导入 现在在你的 Dart 代码中，你可以使用：

import 'package:flutter_html/flutter_html.dart';

使用

Padding(
    padding: const EdgeInsets.all(10),
    child: Html(
    data: _list[0]['content'],
    style: {
        "body": Style(backgroundColor: Colors.white),
        'p': Style(fontSize: FontSize.xxSmall)
    },
    ),
)

webView

flutter_inappwebview 组件

pub 地址:https://pub.dev/packages/flutter_inappwebview

示例地址:https://github.com/pichillilorenzo/flutter_inappwebview/blob/master/flutter_inappwebview/example/lib/in_app_webiew_example.screen.dart

安装

dependencies:
  flutter_inappwebview: ^6.1.5

使用

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class NewDetailWebPage extends StatefulWidget {
  final Map arguments;
  const NewDetailWebPage({super.key, required this.arguments});

  @override
  State<NewDetailWebPage> createState() => _NewDetailWebPageState();
}

class _NewDetailWebPageState extends State<NewDetailWebPage> {
  @override
  void initState() {
    super.initState();
    print(widget.arguments['aid']);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('新闻详情'),
        ),
        body: Column(
          children: [
            Expanded(
                child: InAppWebView(
              initialUrlRequest: URLRequest(
                  url: WebUri(
                      "https://www.dazhuzi.com/newscontent.php?aid=${widget.arguments['aid']}")),
            ))
          ],
        )
    )
  }
}
↑
0%