flutter - Flutter中,如何解决`AnimatedCrossFade`低效设计?
问题描述
一个问题AnimatedCrossFade
是您必须提供两个孩子,即使只显示其中一个。
如果这些孩子中的一个(或两个)既复杂又沉重,那么这是没有效率的。
我试图提供一个Builder
像这样的孩子:
AnimatedCrossFade(
firstChild: widget1,
secondChild: Builder(builder: widget2builder),
duration: const Duration(milliseconds: 500),
crossFadeState: toggle ? CrossFadeState.showFirst : CrossFadeState.showSecond,
),
var widget2builder = (context) {
print("Building widget 2");
return Container(),
);
};
但是,这会立即打印Building widget 2
,即使第一个小部件是正在显示的小部件,因此根本不需要小部件 2。
这是一个完整的、可运行的示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
bool toggle;
@override
void initState() {
super.initState();
toggle = true;
}
@override
Widget build(BuildContext context) {
var toggleButton = Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
child: const Text("Toggle"),
color: Colors.grey,
onPressed: () {
setState(() {
toggle = !toggle;
});
},
),
);
var widget1 = Container(
key: UniqueKey(),
color: Colors.blue,
width: 200.0,
child: const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "
"ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "
"ullamco laboris nisi ut aliquip ex ea commodo consequat.",
),
);
var widget2builder = (context) {
print("Building widget 2.");
return Container(
key: UniqueKey(),
color: Colors.red,
width: 200.0,
child: const Text(
"I am ready for my closeup.",
),
);
};
return MaterialApp(
home: Material(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
toggleButton,
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("Some text above."),
AnimatedCrossFade(
firstChild: widget1,
secondChild: Builder(builder: widget2builder),
duration: const Duration(milliseconds: 500),
crossFadeState: toggle ? CrossFadeState.showFirst : CrossFadeState.showSecond,
),
const Text("Some text below."),
],
),
],
),
),
);
}
}
如果你运行它,你会看到它Building widget 2
被打印到控制台,但小部件 1 是正在显示的那个。
我的问题:
是否有任何理由
AnimatedCrossFade
构建它不使用的小部件?我怎样才能防止这个问题并
AnimatedCrossFade
有效地使用?
解决方案
我想在 Rémi 的回答中补充一点,在问了这个问题之后,我发布了一个包来解决它,名为AnimatedSizeAndFade
:
https://pub.dev/packages/animated_size_and_fade
它与其他类似的小部件相比如何:
使用 AnimatedCrossFade,您必须同时保留 firstChild 和 secondChild,而 AnimatedSizeAndFade 则不需要。
使用 AnimatedSwitcher,您可以简单地更改其子级,但它只会对淡入淡出进行动画处理,而不是对大小进行动画处理。
除非您事先知道孩子的大小,否则 AnimatedContainer 也不起作用。
推荐阅读
- r - 如何将多个嵌套的 XML 元素转换为数据框?
- flutter - 颤振二级动画未运行
- go - 使用缓冲区作为输出时,压缩文件夹已损坏
- python - 为什么 0.24.2 版中没有关于 pandas.MultiIndex.map 的文档?它与 pandas.Index.map 有关吗?
- php - 如何使用 pregmatch 验证无字符 /.%\@?在输入字段中,仅 A-Za-z0-9./ 在另一个输入字段中
- flutter - Flutter Admob 与 ios WebView
- html - 具有动态高度的 Flex-wrap
- android - Moshi:将多个 JSON 属性放入一个类的一个字段中
- python - 用于 FTP 下载的 Python 进度条不起作用
- mysql - 子查询返回超过 1 个值。当子查询跟在 =、!=、<、<=、>、>= 之后或当子查询用作表达式时,这是不允许的