Flutter 动画重叠显示报错: RenderPointerListener 和 RenderRepaintBoundary 不满足约束
我想要让这个动画在所有元素的下面，重叠显示，但是报错了
'Another exception was thrown: RenderPointerListener does not meet its constraints.'
'Another exception was thrown: RenderRepaintBoundary does not meet its constraints.'
我的代码是
SideMenu(
background: Global.home_currentcolor,
key: _sideMenuKey,
menu: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 50.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
TextButton(
onPressed: () =>
Global().getrecently(context),
child: Text(
shijian(),
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 20.0),
],
),
),
Positioned(
top: 0,
child: Container(
//缩小0.5倍
child: RiveAnimation.asset(
'assets/cat.riv',
animations: ['Sulamine'],
controllers: [_controller3],
),
),
),
ListTile(
leading: const Icon(Icons.cached,
size: 20.0, color: Colors.white),
title: Text(
'查看成绩',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => scorepage(),
),
),
),
ListTile(
leading: const Icon(Icons.score_outlined,
size: 20.0, color: Colors.white),
title: Text(
'chatgpt',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
chat_gpt()));
}),
ListTile(
leading: const Icon(Icons.book_online,
size: 20.0, color: Colors.white),
title: Text(
'一键评教',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Global()
.No_perception_login()
.then((value) => null);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => pingjiao()));
},
),
ListTile(
leading: const Icon(Icons.book_online,
size: 20.0, color: Colors.white),
title: Text(
'请假历史',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Global()
.No_perception_login()
.then((value) => null);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => qingjia()));
},
),
ListTile(
leading: const Icon(Icons.colorize,
size: 20.0, color: Colors.white),
title: Text(
'调个色',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
showDialog(
context: context,
builder: (context) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: AlertDialog(
title: Text('选择当前页颜色'),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: Global
.home_currentcolor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent:
0.7,
enableAlpha: false,
displayThumbColor: true,
showLabel: true,
paletteType:
PaletteType.hsv,
pickerAreaBorderRadius:
const BorderRadius.only(
topLeft:
const Radius.circular(
2.0),
topRight:
const Radius.circular(
2.0),
),
),
),
actions: <Widget>[
TextButton(
child: const Text('确定'),
onPressed: () async {
setState(() => Global
.home_currentcolor = Global
.home_pickcolor);
getApplicationDocumentsDirectory()
.then((value) {
File file = File(
value.path +
'/color.txt');
//判断文件是否存在
if (file.existsSync()) {
//存在则写入
file.writeAsString(Global
.home_currentcolor
.value
.toString());
} else {
//不存在则创建文件并写入
file.createSync();
file.writeAsString(Global
.home_currentcolor
.value
.toString());
}
});
Navigator.of(context)
.pop();
},
),
],
));
});
},
),
ListTile(
leading: const Icon(Icons.score_outlined,
size: 20.0, color: Colors.white),
title: Text(
'查看学习通已批完的考试但未发布的成绩',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
chaoxinglogin()));
}),
ListTile(
leading: const Icon(Icons.cached,
size: 20.0, color: Colors.white),
title: Text(
'重新登入',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
deleteFile();
AchievementView(context,
title: '成功!',
subTitle: '已清除课程和成绩缓存，请退出app重新登录',
//onTab: _onTabAchievement,
icon: Icon(
Icons.insert_emoticon,
color: Colors.white,
),
//typeAnimationContent: AnimationTypeAchievement.fadeSlideToUp,
//borderRadius: 5.0,
color: Colors.green,
//textStyleTitle: TextStyle(),
//textStyleSubTitle: TextStyle(),
//alignment: Alignment.topCenter,
duration: Duration(seconds: 3),
isCircle: true, listener: (status) {
print(status);
})
..show();
},
),
ListTile(
leading: const Icon(Icons.settings,
size: 20.0, color: Colors.white),
title: Text(
'关于&设置',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => about(),
);
},
),
],
),
),
您可以将动画放在Stack的底部，然后在Stack中添加其他元素，这样动画就会在所有元素的下面重叠显示。代码示例：
Stack(
children: [
Positioned(
bottom: 0,
child: Container(
//缩小0.5倍
child: RiveAnimation.asset(
'assets/cat.riv',
animations: ['Sulamine'],
controllers: [_controller3],
),
),
),
//其他元素
],
)
解释:
-
RenderPointerListener 和 RenderRepaintBoundary 都是 Flutter 中用于处理事件和渲染的类。当它们不满足约束时，通常是因为它们的布局不正确，例如，它们没有正确地设置大小或位置，导致它们无法正常工作。
-
使用 Stack 可以让您轻松地将元素堆叠在一起，并控制它们的位置和重叠方式。通过将动画元素放在 Stack 的底部，您可以确保它在所有其他元素的下面显示。
-
Positioned 小部件可以让您精确地控制子元素在 Stack 中的位置。使用
bottom: 0将动画元素放置在 Stack 的底部。 -
使用 Container 可以设置动画元素的大小和样式。
-
RiveAnimation.asset 用于加载和播放 Rive 动画。您需要提供动画文件路径和动画名称。
通过使用 Stack 和 Positioned，您可以轻松地将动画元素放置在所有其他元素的下面，并避免出现错误。
如果您的代码仍然存在错误，请检查您的布局，确保所有元素的大小和位置都设置正确，并确保动画元素被正确地放置在 Stack 的底部。
原文地址: https://www.cveoy.top/t/topic/ocr1 著作权归作者所有。请勿转载和采集!