溢出问题数学表达式 Flutter答案

【问题标题】：Overflow issue math expression Flutter溢出问题数学表达式 Flutter
【发布时间】：2022-01-11 07:29:26
【问题描述】：

我正在尝试使用 flutter_html 包在颤振应用程序中显示数学表达式。但无法修复溢出问题，我不想修剪/省略或淡化表达式

我想用水平滚动显示完整的表达式

我的代码是

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: HtmlContent(htmlData: formatedTitle),
)

HtmlContent 小部件

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

class HtmlContent extends StatelessWidget {
  final String? htmlData;
  final Map<String, Style>? htmlCustomStyle;

  const HtmlContent({Key? key, this.htmlData, this.htmlCustomStyle})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: (() {
        if (htmlData!.contains("img") || htmlData!.contains("table"))
          return deviceSize.width < 800
              ? Container(child: InteractiveViewer(child: htmlWidget(context)))
              : htmlWidget(context);
        else
          return htmlWidget(context);
      })(),
    );
  }

  htmlWidget(context) {
    return Html(
      data: htmlData,
      style: htmlCustomStyle == null ? htmlStyle : htmlCustomStyle!,
      customImageRenders: {
        (attr, _) => attr["src"] != null && attr["src"]!.startsWith("/media"):
            networkImageRender(
          mapUrl: (url) => baseURL + url!,
          loadingWidget: () => Center(child: CircularProgressIndicator()),
        )
      },
    );
  }
}

溢出问题只是数学表达式，除了数学表达式一切都很完美，我尝试使用 Expanded/Flexible/SizedBox/FittedBox/Container 和 BoxConstraints

完整的小部件

Container(
      margin: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(0),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                  SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: HtmlContent(
                              htmlData: widget.formatedTitle,
                            ),
                  ),
                  Column(
                    children: [
                      Text(
                        "Question Hint",
                        style: labelStyle,
                      ),
                      SizedBox(height: 5),
                      Container(
                          child: (widget.questionHint.contains("math-tex"))
                              ? Padding(
                                  padding: const EdgeInsets.all(10),
                                  child: TeXView(
                                    renderingEngine: widget.renderingEngine,
                                    loadingWidgetBuilder:
                                        (BuildContext context) {
                                      return Center(
                                        child: CircularProgressIndicator(),
                                      );
                                    },
                                    child: TeXViewDocument(widget.questionHint),
                                  ),
                                )
                              : widget.questionHint.contains("</math>")
                                  ? SingleChildScrollView(
                                      scrollDirection: Axis.horizontal,
                                      child: HtmlContent(
                                          htmlData: widget.questionHint))
                                  : HtmlContent(htmlData: widget.questionHint)
                          )
                    ],
                  ),
              ],
            ),
          ),
        ],
      ),
    );

【问题讨论】：

没有看到你的HtmlContent(htmlData: formatedTitle)就很难分辨
您好，我已经更新了 Post 中的代码
@IndrajeetSingh 你能分享代码以便我们正确测试吗？例如，添加您的 html 代码和显示问题提示的框的代码，因为目前我只能使用一些简单的 html 来测试它，这些 html 只是在行尾换行 ...
嗨@Wouter我试过使用Expanded/Flexible/SizedBox/FittedBox/Container和BoxConstraints但是没有运气，溢出问题只有数学表达式，除了数学表达式一切都很完美..我已经更新了帖子中的代码

标签： flutter flutter-layout flutter-dependencies dart-pub

【解决方案1】：

请检查 HtmlContent 类中的扩展小部件

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

class HtmlContent extends StatelessWidget {
  final String? htmlData;
  final Map<String, Style>? htmlCustomStyle;

  const HtmlContent({Key? key, this.htmlData, this.htmlCustomStyle})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: (() {
        if (htmlData!.contains("img") || htmlData!.contains("table"))
          return deviceSize.width < 800
              ? Container(child: InteractiveViewer(child: htmlWidget(context)))
              : Expanded(child:htmlWidget(context));
        else
          return htmlWidget(context);
      })(),
    );
  }

  htmlWidget(context) {
    return Html(
      data: htmlData,
      style: htmlCustomStyle == null ? htmlStyle : htmlCustomStyle!,
      customImageRenders: {
        (attr, _) => attr["src"] != null && attr["src"]!.startsWith("/media"):
            networkImageRender(
          mapUrl: (url) => baseURL + url!,
          loadingWidget: () => Center(child: CircularProgressIndicator()),
        )
      },
    );
  }
}

【讨论】：