Flutter：向下缩放时防止包装文本

Question

我有一个小部件：HtmlWidget（'

因为它又大又长，当显示在手机上时，它会包装成：

Some Long 
Sentence Alright

有两种方法可以缩小规模：

1.Transform.scale

Transform.scale(
  child: myWidget,
  scale: 0.5,
)

这种方法的问题：

• 文本仍然被包装（可能是因为它被布局，然后被缩小）

2.手机盒

Container(
  child: FittedBox(child: myWidget),
  width: 300,
  height: 100,
)

这种方法只有一个问题：我不知道预期的宽度/高度。

基本上，我想要一个小部件，它可以根据比例缩小myWidget（比如Transform.scale），但不包装内容（比如FittedBox）。

我该怎么做？




Answer 1

我建议一种新的方法。您可以尝试这种方法，并使用正则表达式更改html中文本的大小

main() async {

  String html =
  '''
  <font size="60">Some Long Sentence Alright</font>
  ''';
  html = html.replaceAllMapped(RegExp(r'font size=\"?(\d{1,2})\"'), (match) {
    print(match);
    print(match.group(0));
    print(match.group(1));
    var value = int.parse(match.group(1) ?? "");
    var newValue = value ~/ 2;
    print(newValue);
    print(match.group(0)!.replaceAll(value.toString(), newValue.toString()));
    var replace = match.group(0)!.replaceAll(value.toString(), newValue.toString());
    return replace;
  });
  print(html);
}

输出

I/flutter (21629): Instance of '_RegExpMatch'
I/flutter (21629): font size="60"
I/flutter (21629): 60
I/flutter (21629): 30
I/flutter (21629): font size="30"
I/flutter (21629):   <font size="30">Some Long Sentence Alright</font>

Answer 2

FittedBox具有默认配合：BoxFit。包含把它改成你需要的。

FittedBox(
   fit: BoxFit.scaleDown,
   child: Text(
      text.pasDeven,

   ),
)

Answer 3

Transform小部件将其自身的约束向下传递到Text小部件，如果视口不够宽，不适合200px字体大小，则在向下缩放绘画之前将其包装。请参阅RenderTransform源代码：它扩展了RenderProxyBox，使用默认的performLayout，并且仅重写油漆。

知道了这一点，您可以实现自己的RenderObject来转换约束（在布局期间）和画布（在绘制期间）。我在这里提出了一个简单的实现。如下所示：它使用x2、x4和x8字体大小，没有“幻影边距”。

最重要的是：

  @override
  void performLayout() {
    // ...

    // adjust the constraints width before performing child layout
    final childConstraints =
        constraints.copyWith(maxWidth: constraints.maxWidth / scale);

    // ...
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // scale down during painting to compensate
    layer = context.pushTransform(/* ... */);
  }