如何缩放类似于缩放图像的文本小部件答案

【问题标题】：How to scale a Text widget that would behave like a scaling of an image如何缩放类似于缩放图像的文本小部件
【发布时间】：2019-07-05 13:26:17
【问题描述】：

我想执行一个英雄转换，最终会改变一个小部件的大小。此小部件包含一些文本。

默认情况下，文本小部件会调整大小，并且里面的文本会移动并调整大小以适应文本小部件。

我想让整个小部件的行为像图像一样：一切都会缩放（缩放）。

我试过了：

auto_size_text 包：文本仍然会移动，结果并不完美

截图包：生成图片耗时过长，请先将当前小部件替换为图片，然后再进行英雄转换。

我正在考虑 RenderRepaintBoundary，但这对于一个简单的任务来说似乎需要做很多工作。

有什么想法吗？

【问题讨论】：

标签： flutter

【解决方案1】：

感谢@Romain，简单的答案确实是 FittedBox。

当我将 FittedBox 放在第二页上时，将更改 Text Widget 大小的 Hero 转换将是平滑的。

但我需要将原始大小传递到第二页，以使 FittedBox 内的文本显示在与之前显示相同的行数上。

结果如下： https://vimeo.com/346745092

这里是代码：

import 'package:flutter/material.dart';

const String textThatCouldChangeDependingOnContext = "Hero Text .... ";

main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _textKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(64.0),
          child: Column(
            children: <Widget>[
              Hero(
                tag: 'tag',
                child: Material(
                  child: Container(
                    color: Colors.red,
                    child: Text(textThatCouldChangeDependingOnContext,
                        key: _textKey),
                  ),
                ),
              ),
              FlatButton(
                child: Text('Fly'),
                onPressed: () {
                  Size originalTextSize = _textKey.currentContext.size;
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              MySecondPage(originalTextSize)));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

class MySecondPage extends StatefulWidget {
  final Size originalTextSize;

  MySecondPage(this.originalTextSize);

  @override
  _MySecondPageState createState() => _MySecondPageState();
}

class _MySecondPageState extends State<MySecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            GestureDetector(
              onTap: () => Navigator.pop(context),
              child: Hero(
                tag: 'tag',
                transitionOnUserGestures: true,
                child: Material(
                  child: Container(
                    color: Colors.red,
                    child: FittedBox(
                      fit: BoxFit.contain,
                      child: SizedBox(
                        height: widget.originalTextSize.height,
                        width: widget.originalTextSize.width,
                        child: Text(textThatCouldChangeDependingOnContext),
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

如果我了解您想要实现的目标，您可能需要使用FittedBox。

这是我用来创建下面动画的内容，其中 Text 小部件在动画的开始和结束之间具有不同的大小：

【讨论】：