Question

我想执行一个Hero转换，该转换最终将改变Widget的大小。该小部件包含一些文本。

默认情况下，文本小部件将调整大小，内部的文本将移动并调整大小以适合文本小部件。

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

我尝试过：

auto_size_text包：文本仍将移动并且结果不完美

screenshot包：生成图像所需的时间太长，在执行英雄转换之前用图像替换当前的小部件。

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

有什么想法吗？

Answer 1

如果我了解您要实现的目标，则可以使用FittedBox。

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

Answer 2

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

当我在第二页上放置一个FittedBox时，进行Hero过渡来改变文本小部件的大小将很平滑。

但是我需要将原始大小向下传递到第二页，以使FittedBox中的文本与以前显示的行数相同。

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

代码在这里：

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.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            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 个答案: